1.1CSS语法
选择符
属性声明
括号
换行不敏感、空格不敏感
案例:
div { color:red;}
p{font-size:14px;color:blue;}
h1 {
width: 20px;
height:200px;
}
1.2CSS简单属性
width:设置宽度,单位px像素
height:高度
color:前景色,也就是文字的颜色
background-color:背景色。
font-size:字体的大小。
案例:
1.3CSS的注释格式: /* 注释内容 */
2.1CSS选择器综述
所有标签选择器 * {}(通配符选择器)
标签选择器 p {} div {}
ID选择器 #head {}
类选择器 .head {}
层级选择器(复合选择器)
分组选择器
属性选择器
子元素选择器
相邻兄弟选择器
伪类选择器
伪元素选择器
2.2通配符选择器
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
通配符的穿透力很强,优先级高于继承的样式,会覆盖继承的样式。一般不用。
2.3标签选择器
2.4 ID选择器
2.4.1 -HTML标签都有公共ID属性,而且整个页面唯一
-id一般用于css的选择器和js的钩子
-id选择器使用“#”进行标识,后面紧跟id名
2.4.2ID选择器命名规范
1)只允许出现字母(大小写均可,严格区分) 、下划线、数字。
也就是说,id=”laoHe”和 id=”laohe”不冲突
2) 只允许以字母开头
3) 命名没有长度限制,可以是 1 个字母,也可以是很多个。不过不建议太长。
4) 不允许出现标签名(不是硬性规定,是有工作经验的表现
注意:
id选择器的优先级非常高,所以确定在整个页面内唯一出现时,才可以使用id选择器,不然因为优先级问题在后续维护中不能很好进行修改更新。