1.插入CSS样式表的三种方式
- 外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">
- 内部样式表:<style> hr {color:sienna;} p {margin-left:20px;} ......} </style>
- 内联样式:<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式:属性在不同的样式表中被同样的选择器定义
多重样式的优先级:内联样式>内部样式表>外部样式表>浏览器默认样式
注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
CSS样式优先级:!important>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器
CSS优先规则5条:
CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2:"直接样式"比"祖先样式"优先级高。
CSS 优先规则3:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 优先规则4:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
CSS 优先规则5:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。
2.链接样式
链接的样式,可以用任何CSS属性(如颜色,字体,背景等);特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
顺序:LoVe——>HAte(link,visited,hover,active)
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
3.盒子模型:
W3C标准盒子模型:总元素的宽度=content+padding+border+margin
=width+padding++border+margin(即width=content)
IE盒子模型:总元素的宽度=content+padding+border+margin
=width+margin(即width=content+padding+border)
4.CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
区别:
display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;
visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
5.CSS Position(定位)
static:遵循正常的文档流
fixed:固定定位,相对于浏览器窗口
relative:相对定位,相对其正常位置来定位
absolute:绝对定位,相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
sticky:粘性定位,基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
当页面滚动未超出目标区域时它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
重叠的元素
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:z-index=-1;
6.水平居中、垂直居中、水平垂直居中()见另一篇博客