CSS3基础知识及选择器

type

status

date

slug

summary

第一章认识css3

css被称为层叠样式单,它是一种专门描述结构文档的表现方式的文档,主要用于网页风格设计,包括字体大小,颜色背景以及元素的精确定位等.css样式的使用,使”网页结构代码”和”网页格式风格代码”分离开,将站点上的所有网页都指向某个css文件,遇到修改时,只需更改css文件就可以了.不仅维护简单,还可以使HTML文档代码简练,缩短浏览器的加载时间.

1.1 css 基本语法

CSS语法规则由两个主要部分构成,分别是选择器以及一条或多条声明.如:p {color : red; font-size:20px; }。其中,p:选择器,color和font-size为属性名,red和20px为属性值.

此外，一般每条声明占一行，多条声明之间用分号（;）隔开。

注:

css注释方式为/* 注释内容 */

css语法具有较高的容错性,一条语法错误的语句不会的影响下一条语句的解析

css中每条声明之间需要用分号(;)来进行分割,否则后面一条语句没法被解析

1.2 HTML网页引用CSS样式方式

CSS可以控制HTML文档的显示,但在控制文档显示之前,需要在文档中引入CSS样式,HTML提供了4种引入方式,包括行内样式内嵌样式链接样式和导入样式(推荐).

1.2.1 使用行内样式表

在body正文中使用,一般配合js使用

1.2.2 使用内部CSS

在head标签中使用<style></style>标签来声明,一般在小案例中使用.

1.2.3 引用外部样式表(最实用)

引入外部样式表是使用频率最高,指在外部定义CSS样式表并形成以”.css”为扩展名的文件,然后在页面通过<head></head>标签中的<link></link>标签来引入页面中.代码如下: <link rel="stylesheet" href="style.css">

rel:指定引入外部资源链接类型

href:指定引入样式表的位置.一般为相对HTML文件的相对位置.

具体实现:

style.css中的代码:

1.3 CSS 三大特性 (了解)

1.3.1 叠层性

叠层性就是处理CSS冲突的能力.当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器.权重低的选择效果会被权重低的选择器效果覆盖掉,权重相同时取后者.

权重:权重可以理解为一个选择器对于元素的重要性.id选择器权重为100,类选择器权重为10,标签选择器权重为1.(后面会对类选择器,id选择器.标签选择器进一步阐述,不做过多讲解)

1.3.2 CSS 继承性

特性：子元素默认继承父元素样式的特性.

常见可继承属性：（文字控制属性都可以继承）

color，font-style，font-weight，font-size，font-family

text-indent，text-align，inline……

1.3.3 CSS优先性

当不同的规则作用在html元素上时,如果定义的属性有冲突,那么应该用谁的值?CSS有一套优先性的定义,顺序如下:

!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性值

第二章基础选择器

在CSS3中,大致把CSS选择器分为5类,如下：

基本选择器：标签选择器，通配选择器，id选择器，class选择器，群组选择器

层次选择器：子选择器，兄弟选择器，相邻选择器，包含选择器，分组选择器

伪类选择器：

属性选择器：

伪元素选择器：

下面介绍5种基本选择器

2.1 标签选择器

作用：通过标签名来找到所有HTML页面中这类标签,设置样式.

结构：选择器{property:value; }

2.2 类选择器（.ClassValue）

作用：通过类属性值,找到页面中所有带有这类属性值的标签,来声明样式.

结构:.ClassValue{property:value;}

所有标签均具有class属性,class属性的属性值即对应类选择器的类名ClassValue

类名构成:数字,字母,下划线和下划线构成,但必须以字母或下划线开头

一个标签可以同时拥有多个类名,类名之间以空格隔开.

类名可以重复,一个类选择器可以同时选中多个标签

2.3 id选择器（#id）

作用：通过标签中id属性值,找到页面中带有这个id属性值的标签,声明样式.

结构：#IdValue{property:value;}

所有id标签都具有id属性

id属性具有唯一性,在页面中不可重复

一个标签中只能有一个id属性值

一个id选择器只能选中一个标签

一个id选择器只能选中一个标签(语法是可以选中俩个的,但后面配合js使用可能会出错)

2.4 通配符选择器（*）

作用：对页面中的所有标签声明样式.

结构:*{property:value;}

一般在开发中极少用到.可能出现的场景:去除标签默认的margin(外边距)和padding(内边距),

2.5 群组选择器（,）

作用：同时选择多组标签,设置相同的样式.这样可以化简你的代码.

结构：选择器1,选择器2{property:value;}

第三章层次选择器

3.1 后代选择器

作用：（又称包含选择器）根据HTML标签的嵌套关系,选择元素的后代元素，包含子元素，子子元素等。包含选择器和子元素选择器之前用空格隔开

结构： 父选择器后代选择器 {property:value;}

在上例子中,对p标签内容”这是div标签中的p标签”声明样式,如果不用id,clss,通配符等直接定位的选择器方式声明样式,而是通过他的父级标签div来顺藤摸瓜定位到它来进行声明

3.2 子代选择器

作用：根据HTML标签的嵌套关系,选择父元素直接子代(众多儿子)中的满足条件的元素.

结构： 父选择器>子代选择器{css}

3.3 兄弟选择器

作用：设置某个兄弟选择器后面的兄弟元素的样式。设置后面一个兄弟元素，用“+”连接选择器，设置后面一类兄弟元素，用“~”连接选择器

结构：

兄弟选择器+后面兄弟选择器{css} 设置一个

兄弟选择器~后面兄弟选择器{css} 设置一类

第四章伪类选择器

伪类选择器并不是针对真正的元素使用的选择器，只针对CSS中的伪元素起作用

4.1 伪元素选择器（Selector:before/after）

作用：和属性content一起使用(没有content属性不生效)，用于指定元素之前/之后插入指定内容，content属性值可以是字符串，url，attr，open-quote等格式。伪元素默认是行内元素

使用场景：常用于对列表前面添加符号或页面箭头

4.1.1 配合quotes属性执行插入

4.1.2 配合counter-increment属性添加自定义编号

可用于制作实现列表目录前序号。counter-increment属性用于定义计数器，然后结合属性counter（name,list-style-type）方法来实现添加自定义使用自定义编号。

编号样式	说明	编号样式	说明
decimal	默认值，阿拉伯数字	lower-roman	小写罗马数字
disc	实心圆	upper-roman	大写罗马数字
circle	空心圆	low-alpha	小写英文字母
square	实心方块	upper-alpha	大写英文字母

4.1.3 创建多级编号

上面案例只添加一级编号，还可以像书目录一样添加多级编号。

4.2 结构性伪类选择器

1、概念：

1、作用：运用文档结构树来实现元素过滤，可以减少对class和id属性的依赖，有利于保持代码的整洁。

2、场景：常用于查找某父级选择器中的子元素

2、选择器：

选择器	说明
E:first-child{}	匹配父元素中的第一个子元素，并且是E元素
E:last-child{}	匹配父元素中的最后一个元素，并且是E元素
E:nth-child(n){}	匹配父元素中的第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中的倒数第n个子元素，并且是E元素。

3、用法一：

可以根据2中选择器定位一系列标签中的特定一个标签，此时n要变成具体的数字

4、用法二（公式用法）：

n可以不为具体的数字，而作为含n的公式用于筛选元素

n为：0、1、2、3、4、5 …….

通过n组成常见公式：

公式	功能
2n、even	筛选第偶数个元素
2n+1、2n-1、odd	筛选第基数个元素
-n+5	找到前5个
n+5	找到第5个往后

第一章 认识css3