CSS基础语法

时间：2017-08-20 16:50:13 阅读：201 评论：0 收藏：0 [点我收藏+]

标签：参与没有获得两种优点作用选择器内容规范

一、CSS常用选择器

前言：

页面中，所有的CSS代码，需要写入到<style></style>标签中。

style标签的type属性应该选择"text/css"，但是type属性可以省略。

CSS修改页面中的所有标签，必须借助选择器选中。

选择器中，可以写多对CSS属性，用{}包裹。每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。

写法：

选择器{

属性1:属性值1;

}

(1)通用选择器：

1. 写法：*{ }

2.作用：选中页面中的所有标签

3.优先级：最低

(2)标签选择器：

1.写法：标签名{ }

2.作用：根据选择器名称，选中页面中的所有html标签。

(3)类选择器：(class选择器):

1. 写法：.class名（注意：一定不能忘记前面的点.）

调用：在html标签中，使用class="class名"调用选择器。

2.优先级：class选择器>标签选择器

(4)ID选择器：

1. 写法：#ID名{ }

调用：在html标签中，使用id="id名"调用选择器。

2.优先级：id选择器大于class选择器

(5)交集选择器:

1. 写法：选择器1选择器2选择器3……{ }

多个选择器之间紧挨着，没有任何分隔；

2. 作用效果：一个标签要满足交集选择器，则必须满足交集选择器中出现的所有选择器；

(6)并集选择器

1. 写法：选择器1，选择器2，……选择器N{}。多个选择器之间用逗号分隔。

2. 生效规则：只要满足并集选择器中的一个，即可生效。

(7)后代选择器

1. 写法：选择器1选择器2……选择器N{}。选择器之间用空格分隔

2.生效规则：必须满足，后一个选择器，是前一个选择器的后代（子代、孙代、），才会生效。

(8)子代选择器

1.写法：选择器1>选择器2>……选择器N{}。选择器之间用>分隔

2.生效规则：必须满足，后一个选择器，是前一个选择器的直接子代才会生效。隔代，即中间包含其他标签，则不会生效。

(9)伪类选择器（后续讲解）

二、CSS导入方式和优先级

【选择器的注意事项】

1 .id选择器与class选择器的区别？

①写法不同：class选择器使用.声明，而ID选择器使用#声明。

②优先级不同：当作用于同一标签时，id选择器高于class选择器

③在同一HTML文件中，ID是唯一的，所以ID选择器只能作用于一个标签上，但是，class选择器可以作用于N个标签。

2.选择器的命名规则：

只能有：字母、数字、下划线、减号组成。开头不能是数字。

3.选择器的优先级排序：

①首先遵循近者优先原则。哪个选择器，作用于最里层标签，则哪个选择器生效。

②当作用于同一层标签时，优先级排序如下：

id选择器大于class选择器大于标签选择器大于通用选择器。

【选择器的优先级】

1.第一原则：

近者优先。作用于最里层的选择器生效。

2.当作用于同一层时：

每种选择器所占优先级，可以进行运算获得：

标签选择器占权重1

class选择器占权重10

id选择器占权重100

行级样式表style=""占权重1000

注意：只有交集、后代、子代选择器，才参与优先级的累加！！而，并集选择器相当于写了两个选择器，没有总优先级。

3.如果计算出的优先级权重完全相同，则后写的选择器生效。

【引入CSS的三种方式】

1、行级样式表：在HTML标签中，使用style=""的形式引用；

优点：使用灵活，优先级权重最高。

缺点：不符合W3c关于内容和表现分离的要求。不利于样式复用。代码杂乱，不利于后期维护。

2、内部样式表：在head标签中，使用style标签包裹CSS代码。

特点：一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面公用样式。

<head>

</head>

3、外部样式表：将CSS代码,全部写到一个CSS文件中，使用link标签，将html文件与css文件关联。

rel:选择stylesheet

type选择"text/css"，可以省略。

href选择CSS文件地址。

优点：彻底实现CSS与HTML的分离，符合W3C规范，有利于多页面复用统一样式。

[导入CSS文件的两种方式]

①在<head>标签中，使用link链接：

②在style标签中，使用@import导入；

@import url("css/01-css.css");

【两种导入方式的区别】

　　①link术语标准的HTML标签，而@import url不是标准的标签；

　　②link可以兼容所有低版本的浏览器，而@import url只在CSS2之后可用；

　　③link是将两个文件链接起来，起桥梁作用，而@import相当于将CSS文件复制到HTML文件中；

　　④link会在HTML文件边加载的过程当中，边加载CSS文件；@import会在HTML文件加载完之后，再导入CSS文件；

综上所述，我们使用link连接的方式加载CSS文件.

CSS基础语法

标签：参与没有获得两种优点作用选择器内容规范

原文地址：http://www.cnblogs.com/1996zy/p/7400138.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行