服务器之家
您的位置： 首页 编程语言 css

网页设计CSS样式表语法CSS选择器属性选择器

422人浏览   2023-10-23 14:30:53

Css (CascadingStyle Sheet)-----层叠样式表

（控制网页的样式和布局）

作用：样式定义如何显示HTML元素，样式为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在CSS文件中。可做到共享用提高运行速度，内部样式表多次增加内存占用，降低效率。

Css语法

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

h1 {color:red;font-size:14px;}设文本颜色，RGB，16进位，red三种方式。

选择器h1

选择器类型

·HTML选择器（只能用标记，标签选择器）

P{color:red}

·ID选择器（＃）

#test{color:red}

·类选择器（点号）

. test{color:red}

CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

标签选择器：标签选择器用于指定元素名称的所有元素

targetName: { }

类选择器：

.class 选择器选取带有指定类 (class) 的元素。

.className { }

ID选择器：

id 选择器用于指定元素名称的所有元素

#idName: {}

CSS属性选择器，有其适应范围，IE7(以及更高版本)才在规定！DOCTYPE（文档声明）的情况下才支持属性选择器。

对带有指定属性的HTML元素设置样式。

[align=center]{color:blue}

//包含指定值，适用于由空格分隔的属性值

[name~="t1"]{color:red}

//包含指定值，适用于由连字符分隔的属性值

[name|="t"]{color:green}

1 <!DOCTYPE HTML＞

2 <html>

3 <head>

4 <title>htmL选择器</title>

5 <style type="text/css">

6 p{color:red;font-weight:bold}

7 </style>

8 </head>

9 <body>

10 <p＞这是一个段落.</p>

11 </body>

12 </html>

1 <!DOCTYPE HTML＞

2 <html>

3 <head>

4 <title>id选择器</title>

5 <style type="text/css">

6 #test{color:red;font-weight:bold}

7 </style>

8 </head>

9 <body>

10 <p id="test">这是一个段落.</p>

11 </body>

12 </html>

1 <!DOCTYPE HTML＞

2 <html>

3 <head>

4 <title>类选择器</title>

5 <style type="text/css">

6 .test{color:red;font-weight:bold}

7 </style>

8 </head>

9 <body>

10 <p cLass="test">这是一个段落.</p>

11 </body>

12 </html>

属性选择器

属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id 选择器。

语法：

E ：元素； Element ; att ：表示 attribute 属性；

E [ att ］匹配具有 att 属性的 E 元素例如： input [ value ]

E [ att =' val '］匹配具有 att 属性且属性值等于 val 的 E 元素

E [ att ~=' val '］匹配具有 att 属性且属性值包含 val 的 E 元素（至少单个词，不是其中非头非尾的字母）

E [ att ^=' val '］匹配具有 att 属性且属性值以 val 开头的 E 元素

E [ att S =' val '］匹配具有 att 属性且属性值以 val 结尾的 E 元素

E [ att *=' val '］匹配具有 att 属性且属性值含有 val 的 E 元素

属性选择器

<!DOCTYPE HTML>

<html>

<head>

<title>属性选择器</title>

<style type="text/css">

[align="center"]{color:blue}

[name~="t1"]{color:red}

[name|="t"]{color:green}

</style>

</head>

<body>

＜p align="center">这是一个段落.</p>

<p align="center" name="t t1">这是一个段落.</p>

<p align="center" name="t-t1">这是一个段落.</p>

</body>

</html>

ID选择器和类选择器的区别

·两个的名称都可以自定义，名称不能以数字开头。

·ID选择器只能在HTML文档中出现一次。

·类选择器可以在HTML文档中出现多次。

·ID选择器和类选择器的自定义名称大小写敏感，推荐小写。

相关推荐