<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式</title>
<!-- 内部样式：type可有可无 -->
<style type="text/css">
h3{
color: green;/*字体颜色*/
font-size: 28px;/*字体大小*/
text-align: center;/*文本居中显示*/
}
p{
color: blue;
}
.col{/*类选择器*/
font-size: 36px;
}
#size{/*id选择器*/
color: green;
}
.font li,p,h3{
color: red;
}
ol li{
font-size: 24px;
}
</style>
<!-- 关联外部样式：link标签 -->
<link rel="stylesheet" href="font.style.css"/>
</head>
<body>
<!-- css:层叠样式表又叫级联样式表 -->
<!--引入样式：
1.内联样式：在标签中加入style属性
2.内部样式:在HTML文件中用style标签书写
3.外部样式：
step1:书写css文件样式
step2:在HTML文件中用link关联样式表
同时对一个标签作用内联样式，内部样式，外部样式时，样式采用的优先级，
内联样式优先级最高
内部样式和外部样式中谁距离标签更近谁优先
选择器：
1.标签选择：选择标签
2.类选择：在结构中用class属性，在样式中用.类名
3.id选择: 在结构中用id属性，在样式中用#id名
color:字体颜色
font：文字 size：大小 font-size：字体大小
-->
<h2 style="color: aquamarine;font-size: 32px;">古诗中文网</h2> <!--内联样式-->
<h3 class="col">蒹葭</h3>
<p class="col">蒹葭苍苍，白露为霜</p >
<p class="col" id="size">所谓伊人，在水一方</p >
<ul class="font">
<li>首页</li>
<li>商品详情</li>
</ul>
<ol>
<li>前端应用</li>
<li>选择</li>
</ol>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
