CSS层叠艺术：优雅呈现与高效设计-优快云博客

HTML（超文本标记语言）

CSS(层叠样式表)

1、层叠样式表，是用来修饰文档的语言，让文档以更优雅的形式呈现给用户。

为了使内容和样式相分离，提高工作效率。

2、发展历程：

1996年12月第一份正式标准完成 CSS

1998年5月，CSS规范第二版出版

1999年开始修订，2001年完成了CSS3工作草案

3、CSS工作原理：

HTML文件-解析HTML文件，同时加载CSS-转成DOM，并解析CSS，将样式加到文档里-展示给用户

4、CSS声明：

CSS核心功能：给特定的属性设置特定的值。

CSS的属性和值对大小写敏感。

属性名和属性值之间通过英文冒号分隔开（:）。

属性名和属性之间通过英文分号分隔开（;）。

5、CSS声明块：

将多个CSS声明结合在一起，声明和声明之间通过';'分割

使用'{}'将多个声明括起来，形成一个声明块。

{

background-color: rgb(0, 0, 0);

border: 1px solid;

}

6、CSS选择器：

CSS声明块前面添加选择器，用来指定将这个声明块用在哪些元素上。

div {

background-color: rgb(0, 0, 0);

border: 1px solid blue;

}

7、CSS可读性：

/*CSS注释*/

可以加换行，可读性更高，更美观。

8、速记写法：

border: 1px solid blue;

padding:10px;(当padding这样写时，意味着四个方向的内边距都为10px)

padding:10px 20px 8px 15px[当四个方向的数值不同时，分别代表：上、右、下、左)四个方向的值]

margin:10px 20px 8px 15px[当四个方向的数值不同时，分别代表：上、右、下、左)四个方向的值]

9、CSS的应用：

HTML文档如何引入/使用CSS

（1）外部样式表

新建.css后缀的文件，然后在HTML内通过link引入，如下：

或者在style标签中通过@import"***.css"

<style>

@import url(hello.css);

</style>

（2）内部样式表

将CSS写到HTML的style标签中，可以在不修改CSS文件的前提下修改样式，比较方便，但还是不建议使用。

<style>

p {

color: blue;

}

</style>

（3）行内样式表

将CSS写到元素的style属性中，只能作用于一个元素，但是不建议使用。

<p style="color: orchid">hello world!</p>

（4）三者的优先级：(从上到下读取，行内样式最后读取到，所以优先级更高)

(3)>(2)>(1)

10、CSS选择器：

（1）标签选择器

标签选择器又叫元素选择器，使用元素名可以直接选中相同元素元素

<style>

p {

color: tomato;

}

li {

border: 1px solid purple;

}

</style>

(2) 类选择器

以'.'开头，后面紧跟类名，不允许有空格，与元素的class属性值保持一致。

一个元素可以有多个class值，每个值之间通过空格分开

.circle {

width: 50px;

height: 50px;

border-radius: 50%;

margin: 10px;

}

</div>

（3）id选择器

以'#'开头，后面紧跟类名，不允许有空格，与元素的id属性值保持一致。

在一个文档中id值不能重复，所以这个一般选择唯一元素。

#one {

color: salmon;

}

(4) 普遍选择器

用'*'来表示普遍选择，表示选择所有元素。通常用在组合选择器中。

* {

background-color: rgb(164, 247, 236);

}

#app > * {

background-color: rgb(134, 34, 165);

}(组合选择器)

（5）层次选择器

（1）后代选择器

用" "隔开，包括子元素、也包括孙子元素......

（2）子代选择器

用'>'隔开，表示父元素的直接子代元素

（3）相邻同胞选择器

.myDiv+* 选择class为myDiv的下一个兄弟元素

（4）一般同胞选择器

.myDiv~* 选择的是class为myDiv后面的所有兄弟元素

<style>

/* 后代选择器，作用于*/

#app h2 {

background-color: rgb(81, 62, 245);

}

/* 子代选择器 */

#app > p {

background-color: rgb(219, 117, 117);

}

/* 相邻同胞选择器 */

.myDiv + * {

background-color: rgb(204, 77, 204);

}

/* 一般同胞选择器 */

.MyDiv ~ * {

background-color: rgb(16, 194, 179);

}

</style>

（6）多选择器

多个选择器组合使用，用','分割

组合选择器：

div,p,.app,#myDiv {}

嵌套选择器：两个标签使用了相同的类名，可以选择其中一个来使用样式

格式： div.myDiv

<style>

.mydiv,

#myp,

div,

p {

background-color: rgb(202, 43, 162);

}

</style>

（7）属性选择器

将需要修改样式的属性放进'[]'中，选中所有含有这个属性的标签元素。

[title] {}

属性＋属性值来写样式，双重条件

[title=div] {}

属性包含title，并且以di开头的标签元素

[title6^=di] {}

属性包含title，属性值以div结尾

[title$=div] {}

属性包含title，并且属性值包含字母i的标签元素就被选中（部分匹配，没有细分）

[title*=i] {}

属性包含title，并且属性值必须是目标字符串（di）（全词匹配）

[title~=di] {}

<style>

/* 第一种形式： [属性] {} */

/* [class] {

background-color: rgb(50, 77, 168);

} */

/* 第二种形式：[属性=属性值] {} */

/* [class="div"] {

background-color: rgb(190, 179, 22);

} */

/* 第三种形式：[class^=di] {},以di开头的值 */

/* [class^="di"] {

background-color: rgb(175, 56, 190);

} */

/* 第四种形式：[class$=div] {},以div结尾的值 */

/* [class$="div"] {

background-color: rgb(228, 92, 137);

} */

/* 第五种形式：[class*=m] {} ,属性值中有含有m这个字母的元素 */

/* [class*="m"] {

background-color: rgb(221, 45, 45);

} */

/* 第六种形式：[class~=div] {},属性值就是div这个单词的元素 */

/* [class~="div"] {

background-color: rgb(156, 68, 142);

} */

</style>

CSS-day01