CSS操作

基础

css格式定义

css样式设置由选择器和声明部分组成，示例如下

选择器类型{
	属性1:值1;
	属性2:值2;
	…………
}

一般来说，作为分隔每个属性的标志，最末尾的属性后的分号可以省略，但规范上是不省略的

css样式调用

分为：行内样式表，内部样式表，链入外部样式表

以下为链入外部样式表的两种方法：

方法1：<link href="相对地址" type="text/css" rel="stylesheeet"/>

方法2：<style type="text/css">
		@import url("相对地址");
	  </style>

注：也可以在当前网页内以css的方式写入本网页的样式（如行内样式表和内部样式表），但是该样式仅作用于该网页，而且夹杂于内容中，故不推荐使用

选择器

标签选择器：p、hn等标签

代表该标签的共性，用css修改时，将会作用于当前网页所有该标签

调用方式：直接使用定义的标签

选择器类型：指定的标签名字

类选择器：以.开头

把相同类型的元素分类定义成不同的样式，用css修改时，将改变这一类的所有元素样式

调用方式：class=”类选择器的名字”（多个效果可用空格隔开）

选择器类型：.类选择器名

注意：

不要试图用一个类名，把某个标签的所有样式写完，一个标签应该多携带几个类
每个类要尽可能的小，以达到公共性

id选择器：以#开头

代表某一元素的个性，用css修改时，只改变当前元素的样式

调用方式：id=”id选择器的名字”

选择器类型：#id选择器的名字

注：id选择器在文档中只能使用一次，而类选择器可以使用多次

通配符选择器：“*”

作用于所有的标签样式，用css修改时会改变所有使用该css的网页样式

使用方式：不需要调用，在css文件链接时直接附加

群组选择器/并集选择器：“,”

表达“或”的含义，部分样式相同或完全相同时使用

使用方式：

标签名1,标签名2,……{属性表}

标签指定式选择器/交集选择器

表达“和”的含义，同时使用标签选择器和类选择器或者同时使用标签选择器和id选择器

使用方式：

标签名.类名{属性表}
标签名#id{属性表}

包含选择器/后代选择器

选择元素或元素组的后代，也称后代选择器，把外层标签写在前面，内层标签写在后面，中间用空格分隔

使用方式：（两个选择器中间必须有空格）

选择器1 选择器2{属性表}

属性选择器

为拥有指定属性的html元素设置样式，不局限于class和id属性，下表以attribute代替属性选择器名

选择器	描述
[attribute]	选取带有指定属性的元素
[attribute=value]	选取带有指定属性且取值为value的元素
[attribute~=value]	选取属性值中包含指定词汇的元素
[attribute\|=value]	选取带有指定值开头的属性值的元素，值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute]*=value]	匹配属性值中包含指定值的每个元素

使用方法：

标签名[属性选择器名]{属性表}

例如：
选择器为[attribute]类型时：
p[here]
{
	background-color:red;
}

选择器为[attribute=value]类型时：
p[here=red]
{
    background-color:red;
}

关系选择器

主要包括子元素选择器，相邻兄弟选择器，普通兄弟选择器

属性名称	含义
子元素选择器（E>F）	选择所有作为E元素的直接子元素F，对更深一层的元素不起作用
兄弟相邻选择器（E+F)	选择紧跟在E元素后面的F元素，选择相邻的第一个兄弟元素
普通兄弟选择器（E~F）	选择E元素之后的所有兄弟元素F，作用于多个元素

使用方法：

子元素选择器：
标签名>子元素标签名{属性表}

如：
div>a{
    color:red;
}
实现效果为div标签内，直接子元素的a标签都为红色

兄弟相邻选择器：
标签名+子元素标签名{属性表}

如：
div+a{
    color:red;
}
实现效果为div标签同级的紧挨的下一个a标签为红色

普通兄弟选择器：
标签名~子元素标签名{属性表}
div~a{
    color:red;
}
实现效果为div标签后的所有同级的a标签都是红色

伪类选择器

超链接伪类选择器

伪类名称	含义
a:link	未访问时的超链接状态
a:visited	访问后的超链接的状态（也可用于普通非链接元素:visited）
a:hover	鼠标经过、悬停时超链接的状态
a:active	鼠标单击不动时超链接的状态（也可用于普通非链接元素:active）

注：

样式必须符合link、visited、hover、active顺序
在css定义中，a:hover必须被置于a:link和a:visited后才有效
a:active必须被置于a:hover之后才有效

使用方法：（以a:link和h1为例）

a:link{属性表}       <!--超链接伪类选择器-->
h1:hover{属性表}	  <!--普通非链接元素伪类选择器-->

结构伪类选择器

表达式	描述
:root	将样式绑定到页面的根元素中（即指位于文档树中最顶层结构的html标签）
:not	用于选择除某个元素之外的所有元素
:empty	指定当元素内容为空白时使用的样式
:target	对页面中某个target元素指定样式，只在用户点击链接并跳转到target元素后生效

其中，:target使用时，前面不需要添加标签名，在锚点跳转后应用于跳转到的位置

子元素伪类选择器

表达式	描述
:first-child	对父元素中的第一个子元素指定样式
:last-child	对父元素中的最后一个子元素指定样式
:only-child	当某个父元素中只有一个子元素时使用的样式
:nth-child(n)	对指定序号的子元素设置样式（正数），表示第几个子元素
:nth-last-child(n)	对指定序号的子元素设置样式（正数），表示倒数第几个子元素
:nth-child(even)	所有正数第偶数个子元素，等同于:nth-child(2n)
:nth-child(odd)	所有正数第奇数个子元素，等同于:nth-child(2n+1)
:nth-last-child(even)	所有倒数第偶数个子元素
:nth-last-child(odd)	所有倒数第奇数个子元素
:nth-of-type(n)	用于匹配属于父元素的特定类型的第n个子元素
:nth-last-of-type(n)	用于匹配属于父元素的特定类型的倒数第n个子元素

伪元素选择器

伪元素选择器是针对css中已经定义的伪元素使用的选择器，css中主要使用的伪元素为“:before”伪元素选择器和”:after”伪元素选择器

:before伪元素选择器

用于在被选元素的内容前面插入内容，必须配合“content”属性来指定要插入的具体内容

使用方法：

element:before{
	content:文字/url();
}

element表示元素，“{}”中的content属性用来指定要插入的具体内容，既可以为文本也可以为图片

:after伪元素选择器

用于在被选元素内容的后面插入内容，必须配合“content”属性来指定要插入的具体内容

使用方法：

element:after{
	content:文字/url();
}

继承性

如果子元素定义的样式没有和父元素冲突，那么将继承父元素的样式，可以再加以修改，并不会影响父元素

<strong><em>123456</em></strong>

如上，strong标签为em标签的父元素，em标签为strong标签的子元素

注：

实际开发中，通常对使用较多的字体、文本属性使用继承，在body中统一设置字体、字号、颜色、行距等
文本属性（如color、font-类等）具有继承性，但对于元素的布局属性、盒模型属性（如背景属性、边框属性、外边距属性、内边距属性、定位属性、布局属性、元素宽高属性等）都不能继承

优先级说明

基本优先级

各种选择器不冲突时将全部应用
某些选择器冲突时，冲突部分将会以行内样式>id选择器>class选择器>标签选择器的顺序优先应用
优先级相同时，在冲突部分，后定义的选择器内容将覆盖前面的选择器

优先级修改

在使用时，可以用!important关键字将某个选择器的优先级提到最高，但一般还是建议统筹设计

p{
	color:blue !important;
	font-style:italic;
}

如上，p标签中的颜色被设定成了最高优先级，如果p标签的字体颜色样式与其他选择器冲突，则优先运用p标签中定义的“blue”

权值计算

如果用具体的权值描述样式的优先级，优先级从低到高如下排列：

继承样式——0分
标签选择器——1分
伪元素或对象选择器——1分
类选择器——10分
属性选择器——10分
id选择器——100分
行内样式——1000分
！important——无穷大