学习前端的第四天

一、样式表的权重
样式表的权重关系：内联样式表的权重最大，内部样式表和外部样式表的权重和书写的前后顺序有关，放在后面的会把前面的样式覆盖掉，覆盖的只是相同属性的样式。但是有一个具有最高权重，即!important,语法例
background:red!important;
二、CSS选择符
1.CSS的语法为
选择符｛属性:属性值;｝
2.选择符
选择符就是给标签起名字,共有七类选择符, 类型选择符,id选择符,class选择符,群组选择符,包含选择符,伪类选择符,通配符.
3.类型选择符
所有的html标签可以直接当作选择符进行应用。
div\p\em\i\b\strong…
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。
4.id选择符
id选择符相当于人的身份证号
语法：
起名字： <标签 id=“名称”></标签>
用名字写样式： #名称{ 属性:属性值 }
特点：唯一性！在同一个页面里面，一个id名只能用一次。
应用：来划分网页外围结构
5.类选择符(class选择符)
语法:
其名称: <标签 class=“名称1 名称2 名称3 名称4…”></标签>
用类名写样式 .名称{属性:属性值;}
特点: a:一个元素可以有多个类名,类名可以重复出现
b:可以制定一类样式.
6.群组选择符
语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
eg : #box,.con,h3,#wrap{ width:300px; }
7.包含选择符(子代选择器\后代选择符) ( 通过父元素找子元素 )
语法:
父元素 子元素{ 属性:属性值; }
8.伪类选择器:
a:link {color: red;} /* 未访问的链接状态 /
a:visited {color: green;} / 已访问的链接状态 /
a:hover {color: blue;} / 鼠标滑过链接状态 /
a:active {color: yellow;} / 鼠标按下去时的状态 */
注:如果用的话,必须按照顺序,link可不写;hover可用于任意标签。
9.通配符
*{ }
* 选择页面中所有的元素！
*{
margin:0; 盒子外围间距清零
padding:0; 盒子内部的距离清零
}
10.起名规范
a.尽量小写字母开头。
b.数组、字母、下划线、连字符的组合。
c.不能使用关键字命名 （所有的标签和属性都属于关键字）
d.命名尽量反应板块内容、或者反应结构(语义化)。
e.可以是拼音，但是不能出现汉字和特殊字符。
11.起名方法
1：驼峰式命名法：
newsLeft newsRight
2: 连字符命名：
news-left news-right news-center
3: 下划线命名：
news_left news_right news_center