目录
二、标签四大通用属性-id,class,title,style
一、css是什么,有什么用?
- css的中文全称为层叠样式表
- 样式表,就是网站的衣服
- css其实就是应用到网页上的样式表
- 表中的每一个样式说明,都可以用来描述网页中的一个或多个元素
- 网页元素包括文本、图像、列表、表格、视频等
- css就是网页元素的描述工具,比如:
(1)我们可以将网页中的某个标题设置为红色:
h1{color:red;}
(2)调整某张图片的大小
img{width:300px;}
二、标签四大通用属性-id,class,title,style
- 网页上的元素,是通过属性来进行自我介绍
- 可视元素四大通用属性:id,class,title和style
- id相当于身份证号,用来唯一标识网页元素
- class相当于标签的类属性,用于元素分类
- title相当于元素简介,如元素的用途
- style属性用来描述元素的宽度、高度、颜色、轮廓等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="caption" class="vip" title="网站名称" style="font-size:36px;color:red;">PHP中文网</h1>
</body>
</html>
网页显示效果:
- css选取网页元素大多数情况下,就是靠这几个属性
三、css样式选择符与声明块
- 样式由选择符和声明块组成;选择符{声明块};详细的样式声明,以名值对的方式,写在声明块中,并以分号隔开
- CSS首先用选择符定位元素,然后在声明块设置元素的大小、颜色、背景、轮廓、透明度等
- 声明块中的每一条语句都是样式说明,由属性名和对应的值构成
- 元素通过标签来包装,通过属性来描述;因此,可以通过标签和标签中的属性来选择元素;用标签选择元素最简单,用属性选择元素可以用上一部分学到的id,class,title等
比如对网页中的图片设置圆形红色边框:
- 简单起见本例的css代码,直接写在html中;以后会单独创建一个css文件
- 下例中的 img标签选择器,可选择页面中有img标签包装的所有元素
- 声明块写在一对花括号中,里面的每一个样式声明,就是一个名值对,用分号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
border-radius: 50%;/*设置圆形轮廓*/
border: 2px solid red; /*设置图像边框*/
}
</style>
</head>
<body>
<img src="kenan.jpg" alt="">
</body>
</html>
网页显示效果:
四、CSS样式选择符的种类与特点
- 选择符通过元素特征来定位,因此元素标签和属性以及位置都可以当作选择符来使用
- 标签选择符:用标签名称来表示,用来描述网页元素类型的,通常与其他选择符组合使用,返回一组元素
p{text-align:center;} /*段落文本居中*/
- ID选择符:用#表示,用来选择网页中用id属性声明的元素,只返回一个元素
#header{background-color:#ccc} /*设置背景为灰色*/
- 类选择符:用.来表示,用来选择使用了class属性声明的元素,通常返回一组相关的元素
.blue{color:blue;}
- 属性选择符:除class,id和style以外的属性都可以,属性放在一对[]中,可同时指定多个属性,还可以对属性值进行正则查询
[title="https://www.php.cn"]{font-size:20px;}
/*将具有该属性的元素文本大小设置为20像素*/
- 群组选择符:可以设置多个元素共用样式,用逗号分隔每个选择符
h1,h2,h3,h4,h5,h6{font-size:lighter}
/*去掉标题元素的加粗样式*/
- 后代选择符:根据元素之间隶属关系来选择,多个选择符之间,用空格分隔
section h1{color:red;}
/*将section元素下面所有h1元素文本设置为红色*/
- 子代选择符:只选择当前元素的直接子元素,用>表示,很复杂,里面应用了大量伪类元素。
div>h1{color:green;}
/*将div元素下面子级h1元素文本设置为绿色*/
- 伪类选择符:伪类主要应用在特定标签上,表示当前元素的状态。例如:a标签的4种状态:未访问,已访问,鼠标悬停,点击中 等
a:visited{color:gray}
/*将访问过的链接文本颜色设置为灰色*/
- 伪元素选择符:主要有first-letter:设置段落首行的首字母样式;first-line:设置段落首行文本的样子。设置段落首字母下沉效果,或首行的显示效果,适合英文。
- 通用选择符:一次性设置所有标签的统一样式,用*表示,效率低,影响样式继承,不常用
*{font-size:12px}
/*设置网页中文本均为12像素*/
- 同辈选择符:不常用,通常用更高效的选择符替代
p+a{color:pink}
/*设置p和相邻a标签文本为粉丝*/
五、CSS代码应该写在哪?
- 写在元素标签的style属性中,仅对当前元素有效
- 写在当前页面头部的style标签中,仅对当前页面的所有元素有效
- 写入独立的css文件中,对所有引入该文件的页面都有效
比如:将h1标签的文本变成绿色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 style="color:green;">PHP中文网</h1>
</body>
</html>
如果页面中有多个h1标签,且都把文本变成绿色,发现三个标签的标签名相同且都在一个html页面中,可以在当前页面头部的style标签中设置:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{
color:green;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<h1>PHP中文网</h1>
<h1>PHP中文网</h1>
</body>
</html>
如果另一个页面,也需要把h1标签中的文本变成绿色,此时可以将样式写入一个独立的css文件中,供所有需要的html文件引用。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>PHP中文网</h1>
<h1>PHP中文网</h1>
</body>
</html>
css:
h1{
color:green;
}