网页布局:
先划分上线结构然后再划分左右从外往里写
选择符:作用:对html标签进行选择然后写css样式
一,类型选择符(标签选择符)
用法:所有的html标签都能当做选择符来用
特点:能选择页面中所有的当前同类标签
二,Id选择符:(就相当于身份证号)
语法:
起名字:
<标签 id=”名称”></标签>
用id写样式:
#名称{css样式}
Id名特点:
Id有唯一性(单一一个页面只能出现一次) id名称用来划分网页外围结构
扩展:起名规范:
A,起名称不能使用关键字(所有的标签和属性都是关键字)
B,小写英文字母开头,后面可以跟数字,字母,下划线,连字符
C,起没名字尽量反映板块用途
D,起名方法:
1,驼峰命名法:第二个单词首字母大写
2,连字符:box-left
3,下划线:box_left
每一个板块开始,添加注释
一般id名称用来划分网页外围
三,class选择器(类选择器)
语法:
起class名
<标签 class=”名称”></标签>
用class名写样式:
.名称{css样式} 不要忘记名称前面有个点 .
Class名的特点:
A,一个标签可以拥有多个class名
B,class名可以重复出现
C,Class名更适合定义一类样式
四:包含选择符:通过父元素找子元素
语法:
父元素选择符 子元素选择符 {css样式}
五:群组选择符
语法说明:把分散的标签合成一组 然后给一组添加样式
选择符1,选择符2,选择3,{css样式}
六:通配符
说明:选择当前页面中所有的标签
* {css代码}
例如 *{ margin:0; padding:0;}
margin:盒子外面的间距清零
padding:盒子内部填充清零
七:伪类选择器
a:link{color:red;}
a:visited{color:red;}
a:hover{color:red;}
a:active{color:red;}
a:link 未访问的连接状态
a:visited 已访问的连接状态
a:hover(常用) 鼠标滑过连接状态
a:active 鼠标按下去的状态
注:选择符的顺序不能改
a:hover{鼠标滑过之后,样式更改}
注:伪类选择器 不一定必须给a添加 hover可以更改自身样式
鼠标滑过父元素,更改子元素样式不能更改父元素样式
鼠标滑过谁就给谁添加:hover
选择符:hover子元素{css样式}
选择符的权重;
Id:选择符 > class选择呢符 > 标签选择符
Id权重:100
Class权重: 10
标签权重: 1
内联样式表: 1000
包含选择符:11 父+子元素的和
群组选择符:1 本生权重没有发生变化
通配符:0
伪类选择符:10
注:权重相同的时候,按照后写的执行
提高当前权重:
关键字:!Important
语法:选择符{属性:属性值 !Important;} 让当前权重最高