CSS篇五

一、CSS字体及文本设置总结案例

1. 根据所给页面完成一模一样的页面

代码示例-HTML代码部分：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻页面title>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <h1>北方高温明日达鼎盛，京津冀局地地表温度将超60℃h1>           
    <div class="gray">
        2019-07-03 16:31:47 来源:<a href="http://www.weather.com.cn/index.shtml"> 中国天气网 a>    
        <input type="text" class="search" value="请输入查询条件" />
        <button class="anniu">搜索button>
    div>
    <hr>
     <p>见附件p>
        
    <h4>气温41.4℃！地表温度66.5℃！北京强势迎七月首个高温日h4>
    <p>见附件p>
    <p class="picture"> <img src="images/地面自动观测站气温.jpg" /> p>
    <p>见附件p>
    <p class="picture"> <img src="images/北京市温度图.jpg" /> pclass>
    <p>见附件p>
    
    <h4>明日热度再升级！京津冀携手冲击38℃+h4>
    <p>见附件p>
    <p>见附件p>
    <p>见附件p>
    <p>见附件p>
    <p>见附件p>
        
    <h4>京津冀周末迎降温 唯有济南热度不减h4>
    <p>见附件p>
    <p>见附件p>
    <p class="footer">见附件p>
body>
html>

代码示例-CSS代码部分：

h1 {
    text-align: center;
    font-weight: 400;
}
.gray {
    color: #888888;
    font-size: 12px;
    text-align: center;
}
.search {
    color: #666666;
    width: 170px;
}
.anniu {
    font-weight: 700;
}
body {
    /* body { font: font-style font-weight font-size/line-height font-family; } */
    font: normal 400 16px/28px "Microsoft YaHei";
}
p {
    text-indent: 2em;
}
a {
    text-decoration: none;
}
.picture {
    text-align: center;
}
.footer {
    color: #888888;
    font-size: 12px;
}

在这里插入图片描述
注意：
要将图片居中对齐，是给他的父标签即p标签添加水平居中对齐的代码