疫情停课不停学，HTML第四天学习笔记（CSS选择器和网页划分）

3.19.今天是学习HTML的第四天，学习了CSS选择器和网页划分的部分知识，一下是我的笔记（不足之处还请各位小伙伴多多提出建议哦）
1.样式表的权重
内联样式表的权重最大！
内部和外部样式的权重，和书写的前后顺序有关！
（放在后面的会把放在前面的样式覆盖掉,覆盖的只是相 同属性的样式，不同属性的样式会继续执行。）
关键字：
!important -> 当前声明具有最高权重！
语法：
background:red!important;

2.CSS的层叠性
css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式
3.网页布局：
先做上下排版
再做左右排版
从外往里

4.CSS选择符
含义：选择符就是给标签起名字。
1）：类型选择符（标签选择符）
所有的html标签可以直接当作选择符进行应用。
div\p\em\i\b\strong…
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。

2）：id选择符 （具有唯一性）
快捷键创建：div#elem + tab键 -> <div id="elem"></div>
语法：
起名字：        <标签 id="名称"></标签>
用名字写样式：   #名称{ 属性:属性值 }

特点：唯一性！在同一个页面里面，一个id名只能用一次。
应用：来划分网页外围结构

3）: 类选择符(class选择符)
语法:
其名称:         <标签 class="名称1 名称2 名称3 名称4..."></标签>
用类名写样式     .名称{属性:属性值;}
特点:
a:一个元素可以有多个类名,类名可以重复出现
b:可以制定一类样式.

4）: 群组选择符
语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
eg :     #box,.con,h3,#wrap{ width:300px; }

5）: 包含选择符(子代选择器\后代选择符)    ( 通过父元素找子元素 )
语法:
父元素 子元素{ 属性:属性值; }
6）伪类选择器
含义：CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
主要这四个伪类是针对a（链接）标签的
:link ：访问前的选择器 ( 只能加给a标签 )
:visited ：访问过后的选择器( 只能加给a标签 )
:hover  ：鼠标移入的选择器 ( 所有标签都能添加 )
:active  ：鼠标按下的选择器 ( 所有标签都能添加 )
注：
a标签如果四个伪类都添加的话，那么是有顺序的 L V H A
一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}

7）：通配符
*{  }
* 选择页面中所有的元素！
*{
margin:0;    盒子外围间距清零
padding:0;   盒子内部的距离清零
}

注：起名规范：
尽量小写字母开头。
数组、字母、下划线、连字符的组合。
不能使用关键字命名 （所有的标签和属性都属于关键字）
命名尽量反应板块内容、或者反应结构(语义化)。
可以是拼音，但是不能出现汉字和特殊字符。
常用起名方式：
1：驼峰式命名法：
newsLeft   newsRight
2: 连字符命名：
news-left   news-right   news-center
3: 下划线命名：
news_left   news_right   news_center

• 点赞
• 收藏
• 分享
• 文章举报