目录
（1）标签选择器：用标签名作为选择器，为对应·标签名的元素设置样式
（2）类选择器：用class名作为选择器，为指定class名的元素设置样式
（3）id选择器：用id名作为选择器，为指定id名的元素设置样式（注意：id名是唯一的）
（1）交集选择器：两个选择器直连：第一个必须是标签选择器，第二个必须是类选择器或者id选择器，且选择器之间不能有空格。
（2）并集选择器：多个选择器写在一起（用逗号隔开），使用同样的样式声明
（2）text-align文本的水平对齐方式；text-decoration 文本修饰线；text-transform单词的大小写；text-indent文本块中首行文本的缩进程度。
一、选择器
1、基本选择器
（1）标签选择器：
用标签名作为选择器，为对应标签名的元素设置样式
<head>
<style>
/* 标签选择器 */
h1{
color: brown;
}
</style>
</head>
<body>
<h1 class="book">《昆虫记》</h1>
</body>（2）类选择器：
用class名作为选择器，为指定class名的元素设置样式
<head>
<style>
/* 类选择器 */
.book_name{
color: brown;
}
</style>
</head>
<body>
<h1 class="book_name">《昆虫记》</h1>
</body>（3）id选择器：
用id名作为选择器，为指定id名的元素设置样式（注意：id名是唯一的）
<head>
<style>
/* id选择器 */
#zhuzuo1{
color: brown;
}
</style>
</head>
<body>
<h1 class="book_name" id="zhuzuo1">《昆虫记》</h1>
<h1 class="book_name" id="zhuzuo2">《一千零一夜》</h1>
</body>2、选择器的复合
（1）交集选择器：
两个选择器直连：第一个必须是标签选择器，第二个必须是类选择器或者id选择器，且选择器之间不能有空格。
<head>
<style>
/* 交集选择器 */
h1.book_name{color: green;}
#zhuzuo2{color: brown;}
</style>
</head>（2）并集选择器：
多个选择器写在一起（用逗号隔开），使用同样的样式声明
<head>
<style>
/* 并集选择器 */
h1.book_name, #zhuzuo2{
color: brown;
}
</style>
</head>（3）关系选择器
①后代选择器（可跨代）：选择所有被E元素包含的F元素，中间用空格隔开
②子代选择器（不可跨代）：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>隔开
③相邻兄弟选择器：选择紧跟E元素后的F元素，用+隔开，选择相邻的第一个兄弟元素，只能向下选择
④通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择
代码如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 */
nav ul li {
color: red;
}
/* 子代选择器 */
article>p{
color: green;
}
/* 相邻兄弟选择器 */
h4+p{color: orange;}
/* 通用兄弟选择器 */
h1~p{font-size: 40px;}
</style>
</head>
<body>
<header>
<h1>广东*****学院</h1>
<p>欢迎来到计算机学院</p>
</header>
<hr>
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>学生风采</li>
<li>联系方式</li>
</ul>
</nav>
<hr>
<main>
<section>
<article>
<h2>最新文章</h2>
<h3>文章标题</h3>
<p>这里是文章的内容简介<br>可以使用<br>标签进行换行</p>
<img src="图片路径" alt="图片显示失败" width="100" height="100">
</article>
<aside>
<h4>侧边栏</h4>
<p>侧边栏内容，如加快链接，广告等</p>
</aside>
</body>运行结果如下：
二、样式的优先级
行内样式>id选择器样式>类选择器样式>标签选择器样式（无需遵循“后来居上“原则)
三、常用样式声明（属性）
1、文本
（1）字体属性
color 颜色；font-size 字号； font-family 字体； font-style 字体倾斜（normal 正体，italic斜体）；font-weight 字体粗细
补充：bold 定义粗体字符； bolder 定义更粗的字符；lighter 定义更细的字符；100-900 定义由细到粗，400等同默认，而700等同与bold.
<head>
<style>
.font{
color: red;
font-size: large;
font-family: 楷体;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<p class="font">字体属性</p>
</body>（2）text-align文本的水平对齐方式；text-decoration 文本修饰线；text-transform单词的大小写；text-indent文本块中首行文本的缩进程度。
<head>
<style>
.font{
/* 文本的水平对齐方式 */
text-align: center;
/* 文本修饰线 */
text-decoration: dashed;
/* 单词的大小写 */
text-transform: capitalize;
/* 文本块中首行文本的缩进程度 */
text-indent: 0%;
}
</style>
</head>
<body>
<p class="font">文本a</p>
</body>2、图像
<head>
<style>
#img1{
/* 当前元素宽高，若用百分数取值（比如25%），则是相对于父元素而言 */
width: 300px;
height: 300px;
/* 边框颜色 */
background-color: navajowhite;
border: burlywood 20px dotted;
/* 边框宽度 */
/* border: 20px; */
/* 图像透明度，取值范围0~1 */
opacity: 1;
/* 边框线型：虚线 */
border-style: dashed;
}
</style>
</head>
<body>
<img src="F:\Web前端开发技术\css\周.jpg" id="img1">
</body>运行结果如下：
3、背景
<head>
<style>
footer{
width: 300px;
height: 300px;
/* 设置元素的背景色 */
background-color: bisque;
/* background-image 以图像作为元素的背景，元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像,如果图像超过元素大小，则从图像的左上角开始裁剪。 */
background-image: url(周.jpg);
/* 设置平铺背景图像方式 no-repeat确保背景图不会重复平铺*/
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
}
</style>
</head>
<body>
<footer></footer>
</body>运行结果如下：
4、表格
（1）表格的宽度和高度
使用width和height属性来定义表格的宽度和高度
<style>
.table{
width: 400px;
height: 200px;
}
</style>（2）边框线
border-width 边框的宽度 border-color 边框的颜色 border-style 边框线型 border-collapse 边框线折叠（默认时表格会被折叠成一个个单一的边框）
border-width: 2px;
border-color: red;
border-style: solid;
border-collapse: collapse;可将border-width （边框的宽度 ） border-color（ 边框的颜色） border-style（ 边框线型） 这三个属性写在border属性内，用空格隔开。如下
border: 2px red solid;（3）颜色
background-color整张表格背景色 color 整张表格文本颜色
（4）单元格文本位置
①单元格文本水平对齐 text-align：left(center,right);
②单元格文本垂直对齐 vertical-align：bottom(center,top);
用部分属性举例：
<head>
<style>
.table{
width: 400px;
height: 200px;
border-width: 2px;
border-color: red;
border-style: solid;
border-collapse: collapse;
background-color: gray;
color: black;
}
th,td{
border: 2px red solid;
text-align: right;
vertical-align: bottom;
}
</style>
</head>
<body>
<table border="1" width="500px" height="100" alight="center">
<tr align="center">
<td></td>
<th>教师人数</th>
<th>学生人数</th>
<th>总人数</th>
</tr>
<tr align="center">
<th>2021年</th>
<td>40</td>
<td>400</td>
<td>440</td>
</tr>
<tr align="center">
<th>2022年</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align="center">
<th>2023年</th>
<td>150</td>
<td>3000</td>
<td>3150</td>
</tr>
<tr align="center">
<th>2024年</th>
<td>250</td>
<td>4000</td>
<td>4200</td>
</tr>
</table>
</body>运行结果如下：
5、表单
（1）表格的宽度和高度
使用width和height属性来定义表格的宽度和高度
（2）表单边框颜色、边框大小及线型
可将border-width （边框的宽度 ） border-color（ 边框的颜色） border-style（ 边框线型） 这三个属性写在border属性内，用空格隔开。如下
border: 2px red dashed;dashed:虚线 solid:实线 double：双实线
（3）背景样式
background-color：设置表单的背景颜色
background-image: url(图片路径)：设置表单背景图片
备注：background-image 以图像作为元素的背景，元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像,如果图像超过元素大小，则从图像的左上角开始裁剪。
background-repeat：设置平铺背景图像方式 （no-repeat确保背景图不会重复平铺 ）
background-repeat: no-repeat;（4）表单按钮样式
可以使用上面的属性更改按钮样式，如下
<head>
<style>
button{
background-color: red;
color: yellow;
border: none;
}
</style>
</head>
<body>
<button>点击我查看</button>
</body>（5） 设置光标样式
主要通过cursor属性来实现，这个属性允许你定义当鼠标指针悬停在元素上时显示的样式。以下是一些常用的cursor属性值：
cursor: default; —— 默认光标样式。
cursor: pointer; —— 手指形状，通常用于链接或按钮，表示可点击。
cursor: move; —— 移动形状，通常用于可移动的元素。
cursor: text; —— 文本选择效果，通常用于表示文本可以被选中。
cursor: wait; —— 等待光标，通常用于表示操作需要等待。
cursor: help; —— 帮助光标，通常用于表示该元素提供帮助信息。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
