Web学习历程（六）

最新推荐文章于 2024-08-05 17:34:43 发布

胡小冰

最新推荐文章于 2024-08-05 17:34:43 发布

阅读量94

点赞数

分类专栏：学习笔记文章标签： css web

本文链接：https://blog.csdn.net/weixin_44096353/article/details/108832117

版权

学习笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

 三周左右的学习，html已经逐渐掌握，现在开始进行CSS的学习，加油！

本文主要内容：

CSS的概述
CSS的四种基本选择器
CSS的创建

前言

CSS概述

CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。

接下来我们要讲一下为什么要使用 CSS。

HTML 的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）

比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。

CSS 的重点知识点

盒子模型、浮动、定位

CSS 整体感知
我们先来看一段简单的CSS代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type = "text/css">
            p {
                color: red;
                font-size: 30px;
                text-decoration: underline;
                font-weight: bold;
                text-align: center;
                font-style: italic;
            }
            h1 {
                color: blue;
                font-size: 50px;
                font-weight: bold;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <h1>我是大标题</h1>
        <p>
            我是内容
        </p>
    </body>
</html>

解释如下
在这里插入图片描述
图片链接
我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在 style 标签里面。

CSS 的四种基本选择器

CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS 的选择器分为两大类：基本选择题和扩展选择器。
基本选择器：

标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

1、标签选择器：选择器的名字代表 html 页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

例如：p{ font-size:14px; }

注意：

所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
无论这个标签藏的多深，一定能够被选择上。
选择的所有，而不是一个。

2、id 选择器：规定用#来定义

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 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>
        #para1
        {
            text-align:center;
            color:red;
        } 
        </style>
</head>
<body>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
</body>
</html>

效果展示：
在这里插入图片描述 id 选择器的选择符是“#”。
任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

只能有字母、数字、下划线。
必须以字母开头。
不能和标签同名。比如 id 不能叫做 body、img、a。

另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！

3、类选择器：规定用圆点.来定义

针对你想要的所有标签使用。优点：灵活。
css 中用.来表示类。举例如下：

.one{ width:800px; }

效果:
在这里插入图片描述 (在需要的地方通过class属性使用选择器)

和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：

类选择器可以被多种标签使用。
特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）
```
<h3 class="teshu  zhongyao">我是一个h3啊</h3>
```

初学者常见的错误，就是写成了两个 class。举例如下：（错误）

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

4、通配符 * ：匹配任何标签

通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。所以该篇博客不对此选择器做描述。

除了上述四种选择器，CSS还有几种高级选择器。

后代选择器：用空格隔开
交集选择器：选择器之间紧密相连
并集选择器（分组选择器）：用逗号隔开
伪类选择器

这里也不再做过多的描述，感兴趣的同学可以翻阅千古壹号的该篇文章，里面有详细的讲解以及使用方法。

CSS语法

语法格式：

- 选择器{ 属性名: 属性值; 属性名: 属性值; }

或者可以写成：

选择器 {
k: v;
k: v;
k: v;
k: v;
}
选择器 {
k: v;
k: v;
k: v;
k: v;
}

解释：

选择器代表页面上的某类元素，选择器后一定是大括号。
属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
冒号和属性值之间可以留一个空格（编程习惯的经验）。
如果一个属性有多个值的话，那么多个值用空格隔开。

举例：p { color: red;}

效果展示：
在这里插入图片描述

CSS的创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

如何插入样式表？插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

1、外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
例如：

图片来源：https://camo.githubusercontent.com/9c1c9d6e74533b5ede91ae2df21e26a1ea9f75b9/687474703a2f2f696d672e736d79687661652e636f6d2f323031352d31302d30332d6373732d30342e706e67

2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style > 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
	hr {color:sienna;}
	p {margin-left:20px;}
	body {background-image:url("images/back40.gif");}
</style>
</head>

3、内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4、多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：


color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下： 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。