CSS基础语法、基本选择器、元素选择器、类选择器、ID选择器、伪类和伪元素选择器

今天终于开始学前端了,以前一直被其他事给耽误,这一次不会了!哈哈哈!

1、定义CSS的基本语法

定义的基本语法分为两个组成部分,一是选择器,二是属性说明

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

选择器指定了对哪些网页元素进行样式设置,选择器可以是HTML标签名、元素的类名、元素的ID名等。而且根据选择器的构成形式可以将选择器分为基本选择器和复合选择器。
将CSS应用到HTML页面主要有三种方式,分别为:内联式(行内样式)、内嵌式(内部样式表)、连接式(外部样式表)。内部样式表的格式如下:

<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
…
}
</style>

在HTML页面中也可以省略type属性,直接写成<style>

2、基本选择器

基本选择器指的式选择器的名称前面没有其他选择器,即在组成上,基本选择器式单一名称。基本选择器主要包括元素选择器、类选择器、ID选择器、伪类和伪元素。

  1. 元素选择器
    元素选择器就是直接用HTML标签作为选择器,一个HTML标签对应一个元素选择器,在W3C标准中,元素选择器又称为类型选择器。
元素选择器{
属性1:属性值1;
属性2:属性值2;
…
}

网页中的任何一个HTML标签都可以作为相应的元素选择器的分类,设置的样式对整个网页的该类元素有效
2.ID选择器
ID选择器的名称为元素的ID值,它可以针对一个元素进行样式设置,需要注意的是ID名称在一个HTML页面必须唯一,在设置前必须加上标识符"#",语法说明:ID选择器名称的第一个字符不能使用数字,ID选择器名不允许有空格,选择器名前的"#"是ID选择器的标识,不可以省略,另外ID选择器区分大小写。

 #ID选择器{
属性1:属性值1;
属性2:属性值2;
…
}

针对多个元素具有相同样式的情况,不建议使用ID选择器和元素选择器,建议使用类选择器。
3. 类选择器
类选择器也是一种基本选择器,类选择器的名称为元素的class属性值,一个类名在HTML页面中可以重复出现多次,此外。类选择器名前面必须加上"."作为标识符。 语法说明:类选择器名称的第一个字符不能使用数字,且前面的"."是类选择器的标识,不可以省略。

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

另外一个元素可以有多个class属性值,中间用空格分隔。

4.伪类选择器
伪类是指逻辑上存在、但文档树种并不存在的“幽灵”,通常用于给元素某些特定状态添加样式,伪类典型的应用就是为超链接添加未访问、访问过后、悬停和活动四种链接状态。从效果上看,存在伪类对应的类名,但实际上并没有这个类名,因此称之为伪类。

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

伪类类型描述

伪类类型 描述
:active 将样式添加到被激活的元素
:hoiver 当鼠标悬浮在元素上方时,向元素添加样式
:link 将样式添加到未访问过的链接
:visited 将样式添加到已被访问过的链接
:focus 将样式添加到被选中的元素
:first-child 将样式添加到文档树种每一层元素的指定类型的第一个子元素
:lang 向带有指定lang属性的元素添加样式

5. 伪元素选择器
和伪类一样,伪元素也用于向选择器添加特殊的效果。伪元素之所以称为“伪元素”,原因是伪元素只是在逻辑上存在但在文档树中却不存在的“幽灵元素”,从效果上看,文档树中村则对应伪元素的元素,但实际代码中并不存在这样的元素。

选择器:伪元素{
属性1:属性值1;
属性2:属性值2;
…
}

语法说明:选择器可以是任意类型的选择器,当选择器是类选择器时,未了限定某类元素,也可以在类选择器名前加上元素名,即将选择器名写成:元素名.类选择器名。
伪元素类型

伪元素类型 描述
:first-leter 向文本的第一个字符添加特殊样式
:first-line 向文本的首行添加特殊样式
:before 在选择器选择的元素之前添加内容,并可设置添加内容的样式
:after 在选择器选择的元素之后添加内容,并可设置添加内容的样式

6.通用选择器
通用选择器又称为通配符选择器,使用通配符"*"表示,它可以选择文档中的所有元素,最常用的就是为了兼容不同的浏览器,重置元素的默认样式,但是这种方法对性能影响较大。

*{
属性1:属性值1;
属性2:属性值2;
…
}

猜你喜欢

转载自blog.csdn.net/dream_follower/article/details/80723110