1.css字体
- css字体类型： font-family（宋体，楷体、黑体，等具体需要什么字体可以自己设置）
- css字体大小：font-size（默认大小是16px）
- css字体粗细：font-weight（分为：(细)( 正常 )(粗)）
- css字体样式：font-style
- css文本装饰：text-decoration: overline(上划线) underline(下划线) line-through(删除线)
- css文本对齐：text-align（默认左对齐）（ left right center justify(两端点对齐)）
<style>
div{font-family: 宋体;width: 300px;height: 300px;border: 1px black solid;} 这是给所有字体变成宋体
.A1{font-size: 20px;} 这是字体大小为20px
.B1{font-weight: 900;} 这是字体粗细为900
.C1{font-style: italic;} 这是字体为倾斜
.D1{text-decoration: overline;} 这是上划线
.E1{text-decoration: underline ;} 这是下划线
.F1{text-decoration: line-through;} 这是删除线
.G1{text-align: right;} 这是右对齐
</style>
</head>
<body>
<div>
<p class="A1">1.测试测试测试测试测试</p>
<p class="B1">2.测试测试测试测试测试</p>
<p class="C1">3.测试测试测试测试测试</p>
<p class="D1">4.测试测试测试测试测试</p>
<p class="E1">5.测试测试测试测试测试</p>
<p class="F1">5.测试测试测试测试测试</p>
<p class="G1">5.测试测试测试测试测试</p>
</div>
</body>
2.css选择器
以下是常用的选择器
- id选择器
- 群组选择器（分组选择器）
- class选择器
- 层次选择器
- 伪类选择器
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a :link{background: blue;} 蓝色
.s:visited{background: crimson;} 深红
.d:hover{background: darkorange;} 橘色
.f:active{background: deeppink;} 桃红
</style>
</head>
<body>
<a href="s" class="a">123456</a>
<a href="s" class="s">123456</a>
<a href="s" class="d">123456</a>
<a href="s" class="f">123456</a>
<div id="box"> 在一个页面中，ID是唯一值。( 身份证 )
<p class="A1"></p> class选择器是可以复用的
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
</div>
伪类选择器：
link 访问前的选择器 ( 只能加给a标签 )
visited 访问过后的选择器 ( 只能加给a标签 )
hover 鼠标移入的选择器 ( 所有标签都能添加 )
active 鼠标按下的选择器 ( 所有标签都能添加 )
结构性伪类选择器：
nth-of-type()、 nth-child()
first-of-type、 first-child
last-of-type、 last-child
only-of-type、 only-child
()中可以添加的值：number(第几个，从1开始) | n(表示一个0到无穷大的数)
</body>
</html>
这是访问过后的a标签
这是鼠标移入的a标签
这是鼠标按下的a标签
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
