目录
前言一、CSS选择器(一)标签选择器(二)id选择器(三)类别选择器二、针对标签的选择器嵌套三、集体声明和全局声明(一)集体声明(二)全局声明结语前言
CSS代码由
选择器
和一条或多条声明组成的,选择器是需要改变样式的 HTML标签,在CSS中由分号隔开每条代码为声明,且声明是以大括号{}括起来的。
之前我们阐述了CSS的基本概念,其中选择器是需要改变样式的 HTML标签,然而选择器分为三种:标签选择器
、id选择器
、class选择器
,它们的作用都是设置CSS样式。
一、CSS选择器
(一)标签选择器
标签选择器
对HTML中的标签设计样式。
例如,下列html代码中,设置h2标签样式字号为25像素且为红色,p标签样式字号为15像素且为蓝色:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">h2 {color: red;font-size: 25px;}p {color: blue;font-size: 15px;}</style></head><body><h2>CSS</h2><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>
运行结果如下:
(二)id选择器
id选择器
,可以通过在CSS 使用"#
“对特定 id 的 HTML标签
设计特定的样式 ,即可对html中多个标签进行不同的CSS样式设置。若不使用”#
",则表示作用于当前html代码中所有该类型标签进行样式设置。
要注意多个id选择器不能同时使用,即id标签只能被引用一次
。
例如,下列html代码中,id=style1的文本样式设置为红色、字号为15像素;id=style2的文本样式设置为蓝色、字号为15像素:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#style1 {color: red;font-size: 15px;}#style2 {color: blue;font-size: 15px;}</style></head><body><p id="style1">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p id="style2">CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>
运行结果如下:
(三)类别选择器
类别选择器(class选择器
),即用于对一组标签的样式
设计,它可作用于多个标签且多次使用
,通过设置html中标签的class属性,然后在CSS中使用“.
”进行引用。
也可以在html标签中使用多个选择器名称,之间用空格隔开,从而对某个或多个标签设计多个样式。
例如,下列html代码中,对class="other red "的h2标签文字进行居中对齐、设置为红色,对class="red"的p标签样式设置为红色、字号为10像素,对class="blue"的p标签样式设置为蓝色、字号为15像素:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">h2.other {text-align: center;}.red {color: red;font-size: 10px;}.blue {color: blue;font-size: 15px;}</style></head><body><h2>以下是CSS的介绍:</h2><h2 class="other red">CSS</h2><p class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p class="blue">CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p><p class="blue">CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。</p></body></html>
运行结果如下:
id标签也可以和class标签混合使用,例如下列html代码:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.red {color: red;font-size: 20px;}#style {color: blue;font-size: 20px;}</style></head><body><h2>以下是CSS的介绍:</h2><h2 class="red">CSS</h2><p id="red" class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p></body></html>
二、针对标签的选择器嵌套
当要对html标签中嵌套的标签进行样式设计时,在CSS代码中通过标签 嵌套的标签{ }
两个选择器来表示,标签和嵌套的标签中用空格隔开。
例如,下列html代码中,对文本中的“HTML”进行样式设计:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">p span {color: red;font-size: 18px;}</style></head><body><h2>CSS</h2><p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p></body></html>
运行结果如下:
三、集体声明和全局声明
(一)集体声明
在CSS代码中通过",
"对多个
选择器间隔,即可对多个html标签进行集体声明
。
例如,下列html代码中,对html中的h2标签和p标签进行统一的样式设计:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">h2,p {color: red;font-size: 18px;}</style></head><body><h2>CSS</h2><p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p></body></html>
运行结果如下:
(二)全局声明
在CSS代码中通过"*
"对所有
html标签进行统一的样式设计,即为全局声明
。
例如,下列html代码中,对html中的所有标签进行统一的样式设计:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">* {color: orangered;font-size: 18px;}</style></head><body><h2>CSS</h2><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。</p></body></html>
运行结果如下:
结语
以上就是全部内容,篇幅较长,感谢您的阅读和支持,若有表述或代码中有不当之处,望指出!您的指出和建议能给作者带来很大的动力!!!