在title和body之间写style标签,引入css样式
或者新建一个css文件,在这两者之间引入link标签,链接css文件。
1.建立类选择器
.red{
color: red;
}
<p class="red size" >hhh</p >
可用于任何标签,用class标签引用
2.标签选择器
给每个标签一个样式,代码如图
div{
color: darksalmon;
font-size: 30px;
}
每个div标签都是这样
3.全局选择器
#red{
color: red;
}
</style>
<div id="red">sssss</div>
这个文件每个标签都用这个样式,在文件初期,不知道具体样式,可用这个代替。
<style>
.one{
width: 100px;
height: 100px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: rosybrown;
}
</style>
<div class="one">ddd</div>
<div class="two">ddjd</div>
</body>
p{
/* 字号 */
font-size: 30px;
/* 字体粗细 */
font-weight: 400;
/* 字体倾斜 normal--正常 italic--倾斜 */
font-style: italic;
/* 行高
数字+px
数字----当前字号的倍数 */
line-height: 30px;
}
div{
/* height与line-height保持垂直居中,值相等,
单行文字垂直居中 */
height: 100px;
background-color: aquamarine;
line-height: 100px;}
<style>
div{
font-family: 楷体;
}
/* font复合性,倾斜,加粗,字体大小,行高,楷体 */
/* 字号,字体必须都写 */
p{
font: italic 700 30PX/2 楷体;
}
</style>
<style>
p
{
/* 首行缩进两个字符 */
text-indent: 2em;
}
</style>
4.图片文字位置
h1{
/* text-align: left; */
text-align: center;
/* 居中文字内容,不是标签 */
/* text-align: right; */
}
div{
text-align: center;
}
</style>
<body>
<h1>hahha</h1>
/*图片用文字标签包裹,*/
<div>< img src="./demo1/0992.png" alt=""></div>
a{
/* 删除下划线 ,用于删除超链接默认的下划线*/
text-decoration: none;
}
div{
/* 添加下划线 */
text-decoration: underline;
}
p{
/* 添加删除线 */
text-decoration: line-through;
}
span{
/* 添加顶划线 */
text-decoration: overline;
}
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻界面</title>
</head>
<link rel="stylesheet" href="./综合案例一样式.css">
<body>
<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div >来源:央视网 | 2222年12月12日 12:12:12</div>
<p><strong>央视网消息:</strong>眼下,湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成,玉米收割七成。湖北省通过大力推广新品种水稻,建设高标准农田等一系列措施,为秋粮稳产提供有力支撑。</p >
<p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市,370万亩中稻已经收割四成以上。</p >
<div class="center">< img src="./1.jpg" alt="" ></div>
<p>王化林说的新品种,是湖北省研发的杂交水稻“华夏香丝”,不仅产量高,还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内,像“华夏香丝”这样抗旱节水的品种还有20多个,这些水稻新品将在荆门全面推广,确保来年增产增收。</p >
<p>此外,湖北还大力推进高标准农田建设。截至今年6月,已建成3980万亩高标准农田。目前,湖北全省仍有1800多万亩中稻正在有序收割中,预计10月中旬收割完毕。</p >
</body>
</html>
2.css
h1{
text-align: center;
font-weight: 400;
font-size: 30px;
color: #333;
}
.center{
text-align: center;
}
p{
text-indent: 2em;
line-height: 18px;
color: #333;
}
div{
font-weight: 50;
font-size: 14px;
color: #999;
}