<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>选择器,文本样式</title>
<style>
p{/* 标签选择器 */
color:red;
}
.green{/* 类选择器 */
color:green;
}
#pink{/* id选择器 */
color:pink;
}
p .西瓜, .芒果 span{/* 字体属性 */
color:blue;
font-size:50px;/* 设置字体大小 */
font-family:"宋体";/* 设置字体类型 */
font-style:italic;/* 设置字体风格 */
font-weight:bold;/* 设置字体粗细 */
/* font字体风格,字体粗细,字体大小,字体类型不建议使用 */
}
.芒果{/* 文本属性 */
color:yellow;
text-indent:2em;/* 首行缩进2个字节 */
line-height:100px;/* 行高 */
text-decoration:underline;/* 文本装饰 :underline下划线 overline上划线 line-through删除线*/
text-shadow:blue 10px 10px 2px;/* 文本阴影 :颜色,x轴位移,y轴位移,模糊半径*/
}
.草莓{
color:black;
text-align:right;/* 水平对齐方式left,right,center,justify */
vertical-align:;/* 垂直对齐方式middle,top,bottom */
}
</style>
<body>
<h1>你好</h1>
<p>欢迎</p>
<p class="green">请登录</p>
<p id="pink">请注册</p>
<!-- id选择器优先级最高 -->
<p>我喜欢吃<span class="西瓜">西瓜</span></p><!-- span能让某几个字凸显出来 -->
<p class="芒果">我还喜欢吃<span>芒果</span></p>
<p class="草莓">我喜欢吃草莓</p>
</body>
</html>HTML学习笔记——CSS选择器和文本样式
猜你喜欢
转载自blog.csdn.net/progammer10086/article/details/81268230
今日推荐
周排行