Day04（11.7）

Day04（11.7）

选择器有哪些？

通配符、标签、类名、id

选择器范围越精确、优先级越高

id选择器：权重：100

语法：HTML：通过定义id属性

<div id=”box1”></div>

CSS:以#进行标识

#id名称{样式声明：}

作用：选择所有带有指定id名称的元素

注意：具有唯一性，一般用于页面中唯一的元素。头部、经常和JavaScript搭配使用。

命名规范：

1. 只能由字母、数字、下划线、$组成
2. 不能以数字开头
3. 见名知意，尽量用英文
4. 多个单词，驼峰命名法 例：leftBoxTop 中划线left-box、下划线

字体属性

文本font

1、字体 font-family:”宋体” simsun

微软雅黑 Microsoft YaHei 最常用

黑体 HeiTi

楷体 KaiTi

作用：设置文本的字体系列

取值：一个字体名称 微软雅黑 浏览器的默认字体

多个字体：

逗号隔开：

如果浏览器不支持第一个字体，则会尝试下一个字体（回退机制）

注意：如果字体名称里包含空格、汉字、特殊符号，必须加引号“”

1. 字体大小font-size

取值：

长度值（px）：16px（浏览器默认字体为16像素）

百分比：相对于父元素进行计算

em相对单位

如果用于字号，相对于父元素的字号进行计算。如果用于其他属性，相对于当前元素的字号进行计算

1. 字体样式font-style

取值： normal正常显示（默认值）

italic斜体显示

1. 字体加粗font-weight

取值：normal正常显示（默认值）

bold加粗

九级自重：100~900；400相当于normal（默认值），700相当于bold

1. 行高（文本之间的行间距）line-height

测量：文字高度+行间距

取值：Px

 number数字：数值与当前的字号相乘来设置行间距

百分比：相对于字号计算

单行文字垂直居中

简写：

语法：字体风格 字体加粗 字号/行高 字体；

注意：只有当字号和字体同时存在时简写才生效。

font：italic bold 24px/36px “楷体”；

文本属性：

1. text-align

作用：设置文本水平对齐方式

取值：left 居左对齐 默认值 right居右对齐

center居中对齐 justify两端对齐

注意：适用于块级元素

1. text-decoration

作用：设置文本装饰线

取值：underline下划线 line-through中划线 overline上划线

none默认值 去掉文本装饰线

1. text-indent

作用：设置文本的首行缩进

取值：px、em

百分比 相对于元素内容宽进行计算

允许负值

1. Color

作用：设置字体颜色

取值：颜色名称：red、pink

16进制色值：语法：#rrggbb

rgb颜色表示方法：r红色 g绿色 b蓝色

语法：（r，g，b）0-255之间

文本属性的继承

不可继承：text-decoration（穿透性）

margin属性（外边距）

margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距

（允许负值）

padding属性（内填充）

padding-top上填充 padding-bottom下填充 padding-left左填充 padding-right右填充