跟着pink老师学前端CSS-D1_pink老师地面观察站气温图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46548238/article/details/117882213

本文介绍了CSS的基础知识，包括CSS语法规范、选择器的使用，如标签选择器、类选择器和ID选择器，以及基础的字体属性，如font-family、font-size、font-weight和text-align等。此外，还讨论了CSS引入方式，如内部样式表、行内样式表和外部样式表，并提供了一个新闻综合案例来展示实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. CSS简介

CSS是层叠样式表（Cascading Style Sheets）的简称。HTML只关注内容的语义，CSS负责美化页面。CSS最大的价值即为：由HTML专注去做结构呈现，样式交给CSS，实现结构和样式相分离。

1.1 CSS语法规范

<!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>CSS语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 {改什么样式} */
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

CSS语句写在里面的

1.2 CSS代码风格

1. 样式格式书写

紧凑格式
展开格式

2. 大小写规范

使用小写。

3. 空格规范

属性值前面，冒号后面保留一个空格。
选择器（标签）和 { 之间保留一个空格。

2. CSS基础选择器

选择器就是要根据不同需求把不同的标签选出来。基础选择器是由单个选择器组成的。

2.1 标签选择器

标签选择器是指用HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。

<style>
    /* 标签选择器 ： 写上标签名 */
    p {
        color: green;
    }
    div {
        color: hotpink;
    }
</style>

2.2 类选择器

/* 样式点定义，结构类调用，一个或多个，开发最常用 */
.hotpink {
    color: hotpink;
}

类名规范

类名不可以用标签名。
比较长的类名可以用 - 来分割。
不要使用纯数字和中文来命名。
尽量使用有意义的单词作为类名，拼音不要用简写用全拼。

多类名

可以把一些标签元素相同的样式（共同的部分）放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省代码，统一修改也方便。

<div class="pink font">riki</div>

在标签class属性中写多个类名
多个类名中间用空格分开

2.3 id选择器

/* id选择器：样式#开头，结构id调用，只能调用一次，别人切勿使用 */
#pink {
    color: hotpink;
}

类选择器像人的名字，一个人可有多个名字，一个名字可以被多个人使用。
id选择器相认的身份证号码，和人是一对一的关系。
id选择器和类选择器最大的不同在于使用次数上。
类选择器再修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

2.4 通配符选择器

在CSS中，通配符选择器使用”*“定义，它表示选取页面中所有元素。通配符选择器不需要调用，自动给所有元素使用样式。

* {
    color: hotpink;
}

3. CSS字体属性

3.1 font-family

名字比较长的字体用单引号括起来，各种字体之间必须用英文状态下的逗号隔开，写多个字体是为了尽可能避免浏览器找不到字体的情况。
尽量使用系统默认自带的字体，保证在任何用户的浏览器中都能正常显示。
最常见的几个字体：‘Microsoft YaHei’,‘Hiragino Sans GB’,tahoma,arial。

3.2 font-size

不同的浏览器可能默认显示字号不一样，要设置一个固定的大小。
可以给body指定整个页面文字的大小，标题页面比较特殊，应该单独设置文字大小。

3.3 font-weight

font-weight : normal （400）| bold （700）| bolder | lighter | number （100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ）
实际开发中更提倡用数字，不用加单位。

3.4 font-style

实际开发中主要目的是为了让倾斜（italic）的字体正回来。

em {
    font-style: normal;
}

3.5 复合属性

/* 复合属性: 简写方式节约代码*/
/* font：font-style font-weight font-size/line-height font-family */

div {
    font: italic 700 16px 'microsoft yahei';
}

顺序不可调换，各个属性以空格隔开。
font-size和font-family必选。

4. CSS文本属性

4.1 文本颜色（color）

表示方式	属性值
预定义的颜色值	red、green、blue、pink
十六进制	#FF0000、#FF6600、29D794等
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

开发中最常用的是十六进制。

4.2 对齐文本（text-align）

text-align属性用来设置元素内文本的水平对齐方式，分为left、center、right。

4.3 装饰文本（text-decoration）

属性值	描述
none	默认无装饰线（最常用）
underline	下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

p.s. 链接一般会自带下划线，可以使用text-decoration属性取属性值为none来消除下划线。

4.4 文本缩进（text-indent）

p {
    text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度。

p {
    text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小。

4.5 行间距（line-height）

p {
    line-height: 16px;;
}

行高=上间距+文本高度+下间距。

5. CSS引入方式

5.1 内部样式表

内部样式表是写在html的内部，是将所有的CSS代码抽取出来，单独放到一个style标签中。

< style>标签理论上可以放在html文档中任意地方，但一般会放在< head>标签内。
通过此方式可以方便控制整个页面中的元素样式设置。
代码结构清晰，但并没有完全实现结构与样式分离。

5.2 行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。

5.3 外部样式表

外部样式表将样式单独写到CSS文件中，之后把CSS文件引入到HTML文件中。在html文件中用link标签引入CSS文件。

在实际开发中使用最多，可以控制多个页面，完全实现了结构与样式分离。

<link rel="stylesheet" href="style.css">

6. 新闻综合案例

<!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>
    <style>
        body {
            font: 16px/28px 'microsoft yahei';
        }
        h1 {
            font-weight: 400;
            text-align: center;
        }
        div {
            text-align: center;
            font-size: 12px;
            color:#888888;
        }
        a {
            text-decoration: none;;
        }
        .search {
            color: #666;
            width: 170px;
        }
        .btn {
            font-weight: 700;
        }
        p {
            text-indent: 2em;
        }
        .pic {
            text-align: center;
        }
        .footer {
            color:#888888;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div>2019-07-03 16:31:47 来源: <a href="#"> 中国天气网</a>
    <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
    </div> 
    <hr>
        <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p> 
        
        <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日。</h4> 

        <p class="pic">
            <img src="img.jpg" height="500">
        </p>

        <p> 今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>

        <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。</p>
        
        <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p> 
        
        <h4>明日热度再升级！京津冀携手冲击38℃+</h4> 

        <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p> 

        <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。
        （文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p> 

        <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p> 
</body>
</html>

缩放了