使用CSS控制网页格式有行内法,内嵌式,链接式,导入式等方法
这里将采用内嵌式的方法书写
内嵌法就是通过<style>标记将样式定义在HTML的文件头部中
1.标记选择器
标记选择器特点:定义了标记选择器之后,网页中该标记的样式均会发生改变
样例:
<!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属性才可以应用样式
样例:
效果:
全部代码:
<!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>
整体效果: