<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font设置0312</title>
</head>
<body>
<div style="width: 900px;height: 900px;line-height: 900px;color: pink ; border: 2px red solid;
font-style: italic;
font-family:'microsoft yahei';
font-weight: bold;
font-size:24px ;
text-align: center;
">字体一般分开写，背景建议用复合写法</div>
<!-- 1.如果一段话字体居中，长度过长时，超出部分会在div作用域以外。
2.使用行内样式时，font-family字体类型中文必须加单引号；英文加或不加单引号均可；如果加双引号就会报错【单双引号嵌套是合法的，但是双引号相互嵌套是不合法的。】
-->
<hr>
<strong>1我叫岳岳</strong>
<b>2我叫岳岳</b>
<em>3我叫岳岳</em>
<i>4我叫岳岳</i>
<!-- strong加粗，em倾斜语义化更强些对浏览器更友好些；div是无意义标签 -->
<div style=" font-style: normal;">5我叫岳岳</div>
<div style=font-weight: normal;>6我叫岳岳</div>
<div>7我叫岳岳</div>
<div>8我叫岳岳</div>
<span>无意义的行内空标签</span>
<ins>下划线语义化更强</ins>
<u>下划线语义化稍弱</u>
<hr>
<span style="text-decoration:none">没有线</span>
<span style="text-decoration:overline">上划线</span>
<span style="text-decoration:underline">下划线</span>
<span style="text-decoration:line-through">line-through 中划线</span>
<a href="">超链接无地址浅紫色</a>
<a href="#">超链接有地址默认蓝色</a>
</body>
</html>
——————————————————————————————————————————————————————————————————————————————————-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器0312</title>
</head>
<style type="text/css">
*{
text-decoration: line-through;
}
div{
color: red;
}
.div1{
color: green;
}
#div2{
color:blue;
}
</style>
<body>
<!-- 基本选择器：标签/类/id -->
<div class="div1" id="div2">基本选择器</div>
默认样式优先级【比如超链接的默认蓝色字体】小于 通配符优先级小于标签选择器优先级小于类选择器，小于id选择器小于行内样式
<div >id选择器优先级大于类一个id只使用一次一般只能用在js</div>
<hr >
<span class="div1">通配符选择器对全部的标签都有效，一般用于清除默认样式</span>
</body>
</html>
————————————————————————————————————————————————————————————————————————————————————————————————-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0312复合选择器</title>
<style type="text/css">
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p id="box">1 后代选择器颜色会变为红色
<h1>eee</h1></p>
<p>2</p>
<p>3</p>
</div>
<p>不在div里的颜色字体默认黑色</p>
</body>
<!-- 1.群组选择器，【并集选择器】，和的意思 E.F{}
2.后代选择器【嵌套选择器】 子代和孙子辈。 E F{}
3.父类选择器 直接子集 E>F{}
4.筛选子集 E F.box{} 指E的子集F中类名为box的F标签； E F .box 是指后代选择器 -->
</html>
————————————————————————————————————————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块状元素和行内元素可以通过display属性相互转换</title>
<style type="text/css">
div,span ,img{
width: 50px;
height: 50px;
border: 2px red solid;
margin-top: 5px;
overflow: hidden;
background: url(img/qq.png) no-repeat center center;
display:inline-block;
}
span{
background-color: #0000FF;
display:block;
}
img{
background: #000;
display:block ;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>1-</span>
<span>2-</span>
<span>3-</span>
<img src="img/咸鱼.jpg" alt="">图片1
<img src="./img/咸鱼.jpg" alt="">图片2
<img src="img/咸鱼.jpg" alt="">图片3
</body>
<!-- 标签分类：
行内元素（span,a）不支持宽高；不独占一行；【通过display：block；可以转换为块状元素 】
块状元素（div,p,h）:支持宽高，独占一行【通过display：inline;可以转化为行内元素】
行内块元素（img）:支持宽高，不独占一行【通过display：inline-block；可以转化为行内块元素，在一行，宽高可用； display：inline;可以转化为行内元素 ，宽高不可用 】
-->
</html>
本文详细介绍了CSS中的字体设置、选择器使用、复合选择器原理及块状与行内元素的转换方法等内容，帮助读者更好地理解和掌握网页布局技巧。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
