详细了解CSS - 技术栈

详细了解CSS

m0_595199852024-03-17 10:16

1.1 样式定义方式

行内样式表（inline style sheet）

直接定义在标签的style属性中。

作用范围：仅对当前标签产生影响。

例如：

内部样式表（internal style sheet）

定义在style标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。

外部样式表（external style sheet）

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

作用范围：可以对多个页面产生影响。

注释

注意不能使用//。

只有：

/* 注释 */

1.2 选择器

标签选择器

选择所有div标签：

div {

width: 200px;

height: 200px;

background-color: gray;

}

ID选择器

选择ID为rect-1的标签：

#rect-1 {

width: 200px;

height: 200px;

background-color: gray;

}

类选择器

选择所有rectangle类的标签：

.rectangle {

width: 200px;

height: 200px;

background-color: gray;

}

伪类选择器

伪类用于定义元素的特殊状态。

链接伪类选择器：

:link：链接访问前的样式

:visited：链接访问后的样式

:hover：鼠标悬停时的样式

:active：鼠标点击后长按时的样式

:focus：聚焦后的样式

位置伪类选择器：

:nth-child(n)：选择是其父标签第n个子元素的所有元素。

目标伪类选择器：

:target：当url指向该元素时生效。

复合选择器

由两个及以上基础选择器组合而成的选择器。

element1, element2：同时选择元素element1和元素element2。

element.class：选则包含某类的element元素。

element1 + element2：选择紧跟element1的element2元素。

element1 element2：选择element1内的所有element2元素。

element1 > element2：选择父标签是element1的所有element2元素。

通配符选择器

*：选择所有标签