【前端三件套-CSS】基础入门必备

Aic山鱼

已于 2022-10-25 16:56:56 修改

阅读量1k

点赞数 4

分类专栏：前端基础专栏文章标签： 1024程序员节

于 2022-10-24 11:59:34 首次发布

本文链接：https://blog.csdn.net/zhaochen1127/article/details/127489551

版权

前端基础专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.层叠样式表

网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层

总之一句话，CSS 用来设置网页中元素的样式

使用 CSS 来修改元素样式的方式大致可以分为 3 种

css选择器

eg：p{}(标签选择器)，.class{}（类选择器） ,*{}（通配符选择器）,#id{}（id选择器）

2.css字体属性：

字体复合属性如何写?里面有什么注意细节?
如果让加粗的文字不加粗显示，如何让倾斜的文字不倾斜显示?
1，font复合属性写法顺序为：font：font-style，font-weight，font-size/line-height，font-family

顺序不能颠倒，必须有font-size和font-style

2，font-size=“400”，font-style=“normal”

css文本属性：

文本颜色：color：

文本对齐：text-align

text-align

文本装饰

text-decoration

下划线中划线上划线没有装饰线（通常使用在超链接上）

文本缩进

em是个相对单位，是对于本字段的font-size的大小而定的。两个文字大小就是2em。

行间距：line-height

总结css属性：

css引入方式：

1，内嵌样式表（内部样式表）：把css放在html的内部

style标签可以放在html的任何一个地方但是一般内部样式表放在head标签中

一般在练习时使用内嵌式引入css

虽然代码结构清晰但是，并没有做到css与html分离

2，行内样式表：

更方便修改小的样式：

3，外部样式表（外链式）：单独写一个css样式文件，适用于css样式代码比较多的时候，也是最常用的css引入方式。

用link连接html与css。

3.新闻案例（结合运用）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="css/新闻案例.css">



</head>

<body>

    <h1>北方高温明日达鼎盛京津冀多地地表温度将超60C

    </h1>

    <div>

        <span class="gray">2987-29831-123-01 16:23：@3 来源：</span>

        <a href="">中国天气网</a> <input type="text" placeholder="请输入查询内容"> <button class="btn">搜索</button></div>

    <hr>

   <p> C。预报显示，今后三天(3-5日)，这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计

    北京、天津、石家庄、济南等地明天的最高气温有望突破38C，其中北京和石家庄的最高气温还有望创今年以来

    的新高。</p>

<h4>气温41. 4C!地温66.5!北京强势迎七月首个高温日</h4>

<p class="pic">

    <img src="imagesss/梦想的草原.jpg" alt="dog's day">

</p>

<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、

    山东西部、河南北部最高气温已普遍超过35C。大城市中，北京、天津、郑州均迎来高温日。售

    在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50°C以上，部分地区地

    表温度甚至超过60°C。其中，河北衡水地表温度高达68.3°C， 天津站和北京站附近的地表温度分别高达66.6°C和

    66.5°C。</p>

<h4>明日热度再升级!京津冀携手冲击38C+</h4>

<p>中国天气网气象分析师王伟跃介绍，明天(4日)，华北、黄淮地区35°C以上的高温天气还将继续升级，并进入

    鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部

    山西南部局地、 河南北部、东北部分地区 的最高气温都将达到或超过35°C。

    </p>

    <p class="foot">

        本文来源：昂克赛拉大家覅哦i会计法

    </p>

</body>

</html>

css代码块：

body{

    font: 16px/28px "微软雅黑";
}

h1{

    text-align: center;

    font-weight: 400px;

}

.gray{

    color: gray;

    text-align: center;

    font-size: 12px;
}

a{

    text-decoration: none;

    color: goldenrod;
}

.btn{

    font-weight: 700;
}

p{

    text-indent: 2em;

}

.pic{

    text-align: center;
}

.foot{

    text-align: center;

    color: #888888;

}

写下最后

点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区

Aic山鱼

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【前端三件套-CSS】基础入门必备

网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层。3，外部样式表（外链式）：单独写一个css样式文件，适用于css样式代码比较多的时候，也是最常用的css引入方式。
复制链接

扫一扫