CSS学习笔记——Day One-CSDN博客

本文链接：https://blog.csdn.net/2301_79729136/article/details/134542296

CSS（层叠样式表）是用于描述HTML文档样式的样式表语言。它用于控制网页元素的布局、颜色、字体和间距等视觉属性。本文呈现学习CSS部分笔记：

CSS基础选择器

在CSS中，选择器用于选择要应用样式的HTML元素。有多种类型的选择器，包括标签选择器、类选择器、id选择器、多类名选择器等。

标签选择器

标签选择器的特点：

可以快速为页面中同类型的标签添加统一样式。
不能为元素设计差异化样式，只能应用统一的样式。


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器{
        属性：属性值
        ...
    } */
        h1 {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <h1>哈哈哈哈哈哈</h1>
</body>

</html>

注意事项：
标签选择器会把页面中所有同类型的标签都选择出来，而不仅仅是那些具有特定类或ID的标签。

类选择器和id选择器

如果在同一页面中有多个同类型的标签需要应用不同的样式，那么需要结合类选择器或id选择器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*类选择器语法 
.类名 {
        属性1: 属性值1;  
        ...
}  */
        .line2 {
            color: blue;
        }

        .line3 {
            color: brown
        }

        /* id选择器语法
#id名 {
            属性1: 属性值1;  
            ...
}  */
        #line1 {
            color: chartreuse;
        }
    </style>
</head>

<body>
    <h1 id="line1">哈哈哈哈哈哈</h1>
    <h1 class="line2">啦啦啦啦啦啦</h1>
    <h2 class="line3">强强强强强强</h2>
</body>

</html>

类选择器与id选择器的区别：

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。

多类名选择器

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字.。

<p class="red font20 small">.........</p>

注意：

在标签class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式

CSS字体属性

基础属性

font-family用于指定元素的字体系列。
font-size用于指定元素的字体大小。
font-weight用于指定元素的字体粗细。
font-style用于指定元素的字体样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* 字体大小 */
            font-size: 20px;
            /* 字体粗细 */
            font-weight: 400;
            /* 字体系列 */
            font-family: '微软雅黑';
            /* 字体样式 */
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>哈哈哈哈哈哈哈</p>
</body>

</html>

字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

body {   font: font-style  font-weight  font-size/line-height  font-family;}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

CSS文本属性

CSS Text属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

color属性用于定义文本的颜色
text-align属性用于设置元素内文本内容的水平对齐方式
text-decoration属性规定添加到文本的修饰
text-indent属性用来指定文本第一行的缩进
line-height属性用于设置行间距离（行高）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: aqua;
            text-align: center;
            text-decoration: dotted;
        }

        div {
            text-indent: 2em;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <p>哈哈哈哈哈哈哈</p>
    <div>CSS（层叠样式表）是用于描述HTML（或XML和SVG等其他标记语言）文档样式的样式表语言。它用于控制网页元素的布局、颜色、字体和间距等视觉属性。</div>

</body>

案例设计：新闻页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻案例</title>
    <style>
        body {
            font: 16px/28px '微软雅黑';
        }

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

        div {
            text-align: center;
            color: rgb(103, 92, 92);
            font-size: 13px
        }

        a {
            text-decoration: none;
        }

        button {
            color: aqua;
            font-weight: 700;
        }

        p {
            text-indent: 2em;
        }

        .pic {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div>2019-07-03 16:31:47 来源: <a href="" style="color:blueviolet">中国天气网</a>　
        <input type="text" value="请输入查询条件"> <button>搜索</button>
    </div>
    <hr>
    <p>
        中国天气网讯今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
    </p>

    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p class="pic">
        <img src="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 style="font-size: 9px;color:rgb(75, 70, 70)">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>

</html>

部分效果页面如下：
新闻页面案例

总结

学习CSS基础的过程，让我对网页设计有了更深入的了解。通过掌握CSS，我能够更好地控制网页元素的布局、颜色、字体和间距等视觉属性。
通过实践和学习，我掌握了一些常用的CSS属性和选择器，以及如何使用相对单位来适应不同的屏幕和分辨率。
学习CSS是一个不断探索和成长的过程。通过不断地实践和总结，我能够更好地应用CSS来提升网页的设计和开发水平。同时，我也意识到学习CSS是一个持续的过程，需要不断地学习和更新知识，以适应不断变化的网页设计和开发技术。