传智播客前端学习第三天总结

目录

字体

字体大小

字体类型

字体粗细

字体风格

字体连写

文本

文本颜色

行间距

水平对齐

首行缩进

文本装饰

开发工具排错

选择器

后代选择器

子代选择器

交集选择器

并集选择器

链接伪类选择器

subline快捷方式

标签的显示模式

块级元素

行内元素

行内块元素

标签显示模式转换

---

字体

字体大小

• 单词：font-size
• 特点：em（相对于当前对象内文本的字体尺寸，绝对长度单位），px（相对长度单位）相对于电脑分辨率而言
• 使用：font-size：16px；

字体类型

• 单词：font-family
• 特点：各种字体之间用逗号隔开。中文字体和带空格，#，￥等特殊符号的字体要加引号
• 使用：font-family：“微软雅黑”；

字体粗细

• 单词：font-weight
• 特点：normal（400），bold（700）加粗
• 使用：font-size：700；（数字解析更快）

字体风格

• 单词：font-style
• 特点：normal，italic（斜体）
• 使用：font-style：italic；

字体连写

• 单词：font：font-style font-weight font-size font-family；
• 特点：不能打乱顺序，font-size和font-family不能省略
• 使用：font：italic 700 16px “宋体”；

文本

文本颜色

• 单词：预定义颜色，16进制，rgb
• 特点：十六进制，#rrggbb（红绿蓝）。rgb若用了%，就算取值为0也要带上%
• 使用：#ffffff（白色），可简写为#fff

行间距

• 单词：line-height
• 特点：一般比字体大7,8px左右
• 使用：line-height：24px；

水平对齐

• 单词：text-align
• 特点：只是让标签中的文字居中对齐，不是让盒子居中对齐
• 使用：text-align：center；（left，right，center）

首行缩进

• 单词：text-indent
• 特点：建议使用em作为单位
• 使用：text-indent：2em；

文本装饰

• 单词：text-decoration
• 特点：none，underline，overline，line-through
• 使用：text-decoration：none；（回忆字体加粗，倾斜，下划线，删除线的增添和删除）

开发工具排错

chrome浏览器先点击鼠标右键检查，左上角的小箭头选中标签。左边会显示该标签的HTML，右边显示CSS。若有报错的删除线，则会指出哪行代码有问题。右边的CSS数值可以改动查看改动后效果（安装插件后直接更改源代码）

选择器

后代选择器

• 单词：外层标签 空格 里层标签
• 特点：选出外层标签里所有的里层标签（后代）
• 使用：div p { color：pink；}

子代选择器

• 单词：外层标签 > 里层标签
• 特点：选出外层标签里直接的里层标签（亲儿子）
• 使用：ul li > a { color：pink；}

交集选择器

• 单词：标签名 无空格 类名
• 特点：即是div标签又是red类
• 使用：div.red { color：red；}    （div#red   id本来就是唯一的，不用这样写）

并集选择器

• 单词：标签名，类名，id
• 特点：用逗号隔开，大家有相同的样式
• 使用：.one，p，#test { color：red；}

链接伪类选择器

• 单词：（：link{}，：visited，：hover，：active按着时的状态）
• 特点：不能颠倒顺序
• 使用：a：link{}    a：visited{}    a：hover{}    a：active{}

 

• 注：实际开发中一般就写 a {}  a：hover{}

subline快捷方式

• div*3
• ul>li*5>a
• div+p，dl>dt+dd
• .demo，input：radio

标签的显示模式

块级元素

• 单词：h1,p,div,ul,li
• 特点：独自占一行或多整行，可以对其设置高宽（默认宽度为一行100%），对齐等属性，容纳所有元素
• 使用：
  123

行内元素

• 单词：a，文本外观的四个标签，span
• 特点：和相邻元素在一行上，不可以设置宽高（默认宽度就是本身内容的宽度），对齐等属性，只容纳文本和其他行内元素
• 使用：123

行内块元素

• 单词：img，input，td
• 特点：除了可以设置宽高其余和行内元素相同（容纳标签？）
• 使用：  

标签显示模式转换

• 单词：display
• 特点：转换
• 使用：display：inline；（block，inline-block）