目录
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS样式表的组成:
1.样式表
2.规则
3.选择器+声明块
4.声明
5.css属性+css属性值组成的键值对
浏览器读取编译css的顺序是从右往左
CSS样式表
内联样式表
<p style="color:red;font-size:40px"></p>
可以将CSS样式编写到元素的style属性当中。将样式直接编写到style属性中,这种样式我称为内联样式。内联样式只对当前的元素中的内容起作用,所以内联样式不方便复用。内联样式属于结构与表现耦合,不方便后期维护,不推荐使用。
内部样式表
<style type="text/css">
p{
color:red;
font-size=40px;
}
</style>
也可以将CSS样式编写到head中的style标签里。将样式表编写的style标签中,然后通过CSS选择器选中指定元素。可以同时为这些元素一起设置样式,这样可以使样式进一步复用。将样式表编写到style标签中,也可以使表现和结构进一步分离,它也是推荐的使用方式。
外部样式表
<link rel="stylesheet" type="text/css" href="style.css" />
还可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中,这样外部文件中的CSS样式表将会应用到当前页面中。
将CSS样式统一编写到外部的样式表中,完全使结构和表分离,可以使样式表可以在不同的页面中使用。最大限度地使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存,加快用户访问的速度,提高了用户体验。所以在开发中,该方式是最推荐的方式。
CSS语法
注释
/*注释*/
CSS的注释,必须编写在style标签中,或者是CSS文件中。
选择器
通过选择器可以选中页面中指定元素,并且将声明块中的样式应用到选择器对应的元素上。
声明块
声明块紧跟在选择器的后边,使用一对{ }括起来。声明块实际上就是一组一组的名值对结构。这一组的名值对称为声明。
在一个声明块中可以写多个声明,多个声明之间使用;隔开,声明的样式名和样式值之间使用:来连接。
块元素和内联元素
块元素
<div></div>
div就是一个块元素。所谓的块元素就是独占一行的元素,无论他的内容有多少。
同时p、h1、h2、h3等都是块元素。div标签没有任何语义,就是一个纯粹的块元素。并且不会为它里面的元素设置任何的默认样式。
div元素主要用来对页面进行布局。
内联元素
<span></span>
span是一个内联元素(行内元素)。所谓的行内元素,指的是只占自身大小的元素,不会占用一整行。
同时a、img、iframe等都是内联元素。span标签没有任何语义,span标签专门来选中文字,然后为文字来设置样式。
作用
块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式。一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素(a元素可以包含任意元素,但是除了它本身;p元素不可以包含任何块元素)。
常用的选择器
元素选择器
作用:通过元素选择器可以选择页面中的所有指定元素。
语法:标签名{ }
id选择器
作用:通过元素的id属性值选中唯一的一个元素。
语法:#id属性值{ }
类选择器
作用:通过元素的class属性值选中一组元素。
语法:.class属性值{ }
(class属性和id属性类似,只不过class属性可以重复。拥有相同class属性值的元素,我们说他们是一组元素。可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开)
选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器n{ }
通配选择器
作用:可以用来选中页面中的所有元素。
语法:*{ }
复合选择器(交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:选择器1选择器2选择器n{ }
(对于id选择器来说,不建议使用复合选择器)
后代元素选择器
作用:选中指定元素的指定后代元素。
语法:祖先元素 后代元素{ }
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
(IE6及以下的浏览器不支持子元素选择器)
其他子元素选择器
:first-child 可以选中第一个子元素
/*选中body里的p标签*/
body > p:first-child{
background-color:yellow;
}
:last-child 可以选中最后一个子元素
p:last-child{
background-color:yellow;
}
:nth-child(数字) 可以选中任意位置的子元素
p:nth-child(1){
background-color:yellow;
}
(even表示偶数位置的子元素;odd表示奇数位置的子元素)
:first-of-type
:last-of-type
:nth-of-type
这些与child选择器非常类似。只不过child是在所有子元素中排列,而type是在当前类型的子元素中排列。
兄弟元素选择器
一、作用:可以选中一个元素后紧接着的指定兄弟元素。
语法:前一个 + 后一个 { }
二、作用:可以选中一个元素后边所有的指定兄弟元素。
语法:前一个 ~ 后一个 { }
子元素
元素之间的关系
父元素:直接包含子元素的元素。
子元素:直接被父元素包含的元素。
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素。
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素。
兄弟元素:拥有相同父元素的元素叫兄弟元素。
伪类选择器
伪类专门用来表示元素的一种特殊的状态。
比如:访问过的链接,普通的超链接,获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。
有四个伪类可以根据访问者与该链接的交互方式,将链接设置成4种不同的状态。
正常链接----a:link
访问过的链接----a:visited(只能定义字体颜色;浏览器通过历史记录来判断链接是否访问过)
鼠标滑过的链接----a:hover
正在点击的链接----a:active
:hover和:active也可以给其他元素设置(IE6中,不支持对超链接以外的元素设置)
否定伪类
作用:可以从已选中的元素中剔除出某些元素
语法::not(选择器)
p:not(.hello){
background-color:yellow;
}
其他伪类
获取焦点----:focus
input:focus{
background-color: yellow; /*文本框获取焦点以后,修改背景颜色为黄色*/
}
选中的元素----::selection(该伪类在火狐浏览器中要使用::-moz-selection)
伪元素
使用伪元素来表示元素中的一些特殊位置
首字母----:first-letter
首行----:first-line
指定元素前----:before
指定元素后----:after
(一般before或after都需要结合content样式一起使用,通过content可以向before或after的位置添加一些内容)
属性选择器
title属性,这个属性可以给任何标签指定。当鼠标移入到元素上时,元素的title属性的值将会作为提示文字显示。
属性选择器
作用:可以根据元素中的属性或属性值来选取指定元素。
常用语法:[属性名] 选取含有指定属性的元素
p[title]{
background-color: yellow;
}
[属性名=“属性值”] 选取含有指定属性值的元素
p[title="hello"]{
background-color: yellow;
}
[属性名^=“属性值"] 选取属性值以指定内容开头的元素
p[title^="ab"]{
background-color: yellow;
}
[属性名$="属性值“] 选取属性值以指定内容结尾的元素
p[title$="c"]{
background-color: yellow;
}
[属性名*=”属性值“] 选取属性值以包含指定内容的元素
p[title*="b"]{
background-color: yellow;
}
样式的继承
在CSS中,祖先元素上的样式也会被后代元素所继承。
利用继承可以将一些基本在样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式。
但是,并不是所有的样式都会被子元素所继承,比如:背景相关的样式、边框相关的样式、定位相关的样式都不会被继承。
选择器的优先级
当使用不同的选择器,选中同一个元素并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级决定。
优先级高的优先显示。
优先级规则:
内联样式,优先级 1000
id选择器,优先级 100
类和伪类, 优先级 10
元素选择器,优先级 1
通配*, 优先级 0
继承的样式, 没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较。
但是注意,选择器优先级计算不会超过它的最大的数量级(并集选择器中的优先级是单独计算),如果选择器的优先级一样则使用最后的样式。
可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的的样式显示甚至超过内联样式,但是在开发中,尽量避免使用。
伪类的顺序
涉及a的伪类一共有四个,而这四个选择器的优先级是一样的。
该四个伪类的顺序:
:link
:visited
:hover
:active