使用CSS控制网页格式有行内法,内嵌式,链接式,导入式等方法
这里将采用内嵌式的方法书写
内嵌法就是通过<style>标记将样式定义在HTML的文件头部中
1.标记选择器
标记选择器特点:定义了标记选择器之后,网页中该标记的样式均会发生改变
样例:
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标记选择器 */
h1{
/* 居中 */
text-align: center;
}
p{
/* 设置字的大小 */
font-size:50px;
}
</style>
</head>
<body>
<h1>你好</h1>
<p>Yor can't park your car here.</p>
</body>
</html>
效果:
2.class选择器
class选择器:别称类选择器,选择器以英文句号开始,后面再加英文单词
样例:
效果:
3,ID选择器
ID选择器是以#开始的,选择器定义之后需要设置id属性才可以应用样式
样例:
效果:
全部代码:
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标记选择器 */
h1{
/* 居中 */
text-align: center;
}
p{
/* 设置字的大小 */
font-size:50px;
}
/* class选择器 */
.p1{
text-align: left;
}
.p2{
text-align: center;
}
.p3{
text-align: right;
}
/* ID选择器 */
#id1{
/* 设置一个盒子宽700px 高400px */
width: 700px;
height: 400px;
/* 边框厚度 线框线的类型 线框颜色 */
border: 5px solid red;
}
</style>
</head>
<body>
<h1>你好</h1>
<p>Yor can't park your car here.</p>
<div id="id1">
<!-- class选择器:当修改了类选择器之后,只有应用此类选择器的标记样式才可以发生变化 -->
<p class="p1">dragon</p>
<p class="p2">rabbit</p>
<p class="p3">tiger</p>
</div>
</body>
</html>
整体效果: