选择器使用:
可以分为:基础选择器和高级选择器(复合选择器)
基础选择器:标签选择器、类选择器、id选择器
高级选择器(复合选择器):后代选择器、指定标签选择器、并集选择器
类选择器:
定义: 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义
调用:在html里面哪个标签需要,就在开始标签敲空格class=“类名称”进行调用
注意:命名规则是不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束
id选择器:
定义: 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义
调用:在html里面哪个标签需要,就在开始标签使用id=“id称”进行调用
注意:命名规则是不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束
类选择器和id选择器的使用区别:
类选择可以重复使用,只要样式一致就可以重复的使用同一个类名称,id选择器是唯一的不能重复使用,一个id名称一个页面只能出现一次
后代选择器:
因为Html布局有嵌套关系,我们可以通过父亲再往下找,找到子集元素,父级 + 空格+子级元素{ css键值对}
并集选择器:
样式一致的盒子如果单独设置样式需要书写多次,我们可以把样式相同的盒子只写一个样式,用英文的逗号隔开即可,使用并集选择器书写代码可以节约代码量
链接的伪类:
四种状态:
a:link 未访问的链接(访问前)
a:visited 已访问的链接(访问后)
a:hover 鼠标移动到连接上(鼠标经过)
a:active 选定的链接(按下鼠标的时候)
注意:以上的顺序不能颠倒,四种状态不会全部使用
盒子的实体化三属性:
宽 width
高height
背景 background
实体化设置的好了就不会出现兼容问题,更能直观的表现出盒子的状态
权重计算
第一等:代表内联样式,如: style=””,权值为 1,0,0,0
第二等:代表ID选择器,如:#content,权值为 0,1,0,0
第三等:代表类,伪类和属性选择器,如.content,权值为 0,0,1,0
第四等:代表类型选择器和伪元素选择器,如div p,权值为 0,0,0,1
平时的样式有时候不生效可能就是权重不够,可以添加权重使得样式生效,权重计算不进位
-------------------------------------------------------------------------------------------------
内边距:padding 拉开内容到盒子边缘的距离;
外边距:margin 拉开盒子与盒子之间的距离;
盒子阴影:
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/ 外阴影
实际常用设置:box-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色
浮动布局的注意点:
利用浮动布局的时候,建议给浮动的元素嵌套一个父级元素,然后给父级最好设置固定的高度,就减少出现兼容问题
所有的浮动布局在效果图量取的宽高必须一模一样
清除浮动:
环境1:标准流(默认情况下):父级盒子嵌套子级盒子,如果不给父级盒子设置固定的高度,父级盒子默认的高度为0,但是实际的高度是子级盒子撑开的
环境2:浮动流(浮动布局):父级盒子嵌套子级盒子,如果不给父级盒子设置固定的高度,父级盒子里面的子级盒子设置浮动float属性,父级盒子的高度不会被撑开,就是默认的0,这样就会影响我们后面的盒子正常显示
清除浮动本质:
父级盒子因为子级浮动引起内部高度为0的问题,清除浮动之后,父级就会根据浮动的盒子自动检测高度,从而解决影响下面盒子的布局问题
清除浮动的方法:
额外标签法,父级加overflow属性法,使用after伪元素法,使用双伪元素清除浮动
额外标签法:在浮动元素的末尾添加一个空的标签:例如:<div style=“clear:both;”></div>
父级加overflow属性法:直接给父级添加overflow:hidden,强制的撑开父级
after伪元素法:
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
双伪元素清除浮动:
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
|
|