Day04(11.7)
选择器有哪些?
通配符、标签、类名、id
选择器范围越精确、优先级越高
id选择器:权重:100
语法:HTML:通过定义id属性
<div id=”box1”></div>
CSS:以#进行标识
#id名称{样式声明:}
作用:选择所有带有指定id名称的元素
注意:具有唯一性,一般用于页面中唯一的元素。头部、经常和JavaScript搭配使用。
命名规范:
- 只能由字母、数字、下划线、$组成
- 不能以数字开头
- 见名知意,尽量用英文
- 多个单词,驼峰命名法 例:leftBoxTop 中划线left-box、下划线
字体属性
文本font
1、字体 font-family:”宋体” simsun
微软雅黑 Microsoft YaHei 最常用
黑体 HeiTi
楷体 KaiTi
作用:设置文本的字体系列
取值:一个字体名称 微软雅黑 浏览器的默认字体
多个字体:
逗号隔开:
如果浏览器不支持第一个字体,则会尝试下一个字体(回退机制)
注意:如果字体名称里包含空格、汉字、特殊符号,必须加引号“”
- 字体大小font-size
取值:
长度值(px):16px(浏览器默认字体为16像素)
百分比:相对于父元素进行计算
em相对单位
如果用于字号,相对于父元素的字号进行计算。如果用于其他属性,相对于当前元素的字号进行计算
- 字体样式font-style
取值: normal正常显示(默认值)
italic斜体显示
- 字体加粗font-weight
取值:normal正常显示(默认值)
bold加粗
九级自重:100~900;400相当于normal(默认值),700相当于bold
- 行高(文本之间的行间距)line-height
测量:文字高度+行间距
取值:Px
number数字:数值与当前的字号相乘来设置行间距
百分比:相对于字号计算
单行文字垂直居中
简写:
语法:字体风格 字体加粗 字号/行高 字体;
注意:只有当字号和字体同时存在时简写才生效。
font:italic bold 24px/36px “楷体”;
文本属性:
- text-align
作用:设置文本水平对齐方式
取值:left 居左对齐 默认值 right居右对齐
center居中对齐 justify两端对齐
注意:适用于块级元素
- text-decoration
作用:设置文本装饰线
取值:underline下划线 line-through中划线 overline上划线
none默认值 去掉文本装饰线
- text-indent
作用:设置文本的首行缩进
取值:px、em
百分比 相对于元素内容宽进行计算
允许负值
- 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右填充