CCS认知1

冰阔落留给我

已于 2023-05-18 18:38:39 修改

阅读量126

点赞数

文章标签： html css javascript

于 2023-05-18 18:36:43 首次发布

本文链接：https://blog.csdn.net/lsz13390093003/article/details/130737019

版权

1.1CSS语法规范

两部分：

例代码：

<!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>Document</title>
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>有点意思</p>
</body>

</html>

效果：

1.2代码风格

2.CSS基础选择器

2.1CSS选择器的作用

2.2选择器分类

2.3标签选择器

语法：

2.3类选择器

语法：

注意：

课堂案例：

<!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>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

</html>

效果：

2.4类选择器-多类名

使用方式：

2.5id选择器

语法：

“#” =“.” id=class

（只能调用一次，别人切勿使用）

2.6通配符选择器

语法：

2.7总结

3.字体属性

3.1字体系列

语法：

注意：

3.2字体大小

语法：

（标题标签比较特殊，需要单独指定）

3.3字体粗细

语法：

变粗：

变细：

3.4文字样式

3.5字体复合属性

语法：

注意：

3.6总结：

4.CSS文本属性

4.1文本颜色

语法：

形式：

4.2对齐文本

语法：

形式：

4.3装饰文本

语法：

形式：

4.4文本缩进

语法：

4.5行间距

语法：

4.6总结

5.CSS引入方式

5.1CSS的三种样式表

5.2内部样式表

语法：

注意：

5.3行内样式表

语法：

注意：

5.4外部样式表

方法：

5.5总结

综合案例：

1.搭建html结构

2.修改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>Document</title>
    <style>
        body {
            font: 16px/28px 'Microsoft YaHei';
        }

        h1 {
            font-weight: 400;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        .gray {
            color: #888888;
            text-align: center;
            font-size: 12px;
        }

        .search {
            color: #666666;
            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 class="gray">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="images/pic.jpeg" alt="">
    </p>
    <p>
        今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
    </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>

效果：

7.Chrome调试工具

使用调试工具：

冰阔落留给我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CCS认知1

两部分：例代码：效果： 2.1CSS选择器的作用 2.2选择器分类2.3标签选择器语法： 2.3类选择器语法：注意：效果： 2.4类选择器-多类名使用方式： 2.5id选择器语法：“#” =“.” id=class （只能调用一次，别人切勿使用）2.6通配符选择器语法： 2.7总结3.1字体系列语法：注意： 3.2字体大小语法：（标题标签比较特殊，需要单独指定）3.3字体粗细语法：变粗：变细： 3.4文字样式 3.5字体复合属性语法：注意： 3.6总结： 4.
复制链接

扫一扫