【前端】CSS-2022/7/20-Abyss-博客

前言

开CSS了，但这不意味着HTML就全部学完了，还有一些东西我们还没讲（比如表单），还有一些琐碎的标签，但到了后面就发现这些标签也没什么好讲的了，需要用到的时候自己查查文档就好

CSS是什么

CSS 指层叠样式表 ( Cascading (级联) Style Sheets)

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS负责的是网页的样式，一个没有CSS的网页基本就是全文字的，甚至连颜色都只有白与黑的单一样式。难以理解？下面有张对比图：

当我的个人网站关闭CSS后：

如果开了CSS（正常显示）：

我猜没有任何一个人会喜欢第一张图。

当然你也可以直接在HTML里面就写好CSS，但这样做并不规范。

CSS的三种写法

内联样式
- 写法：
  - 在标签内部通过sty1e属性来设置元素的样式
- 问题：
  - 使用内联样式，样式只能对一个标签生效，
  - 如果希望影响到多个元素必须在每一个元素中都复制一遍
  - 并且当样式发生变化时，我们需要一个个的修改，非常繁琐。
- 注意：开发时绝对不要使用内联样式（要明确分工，HTML文档中只处理结构）
内部样式表
- 写法：
  - 将样式编写到<head>标签中的<style>标签里，然后通过css的选择器来选中元素并为其设置各种样式。
- 好处：
  - 可以同时为多个标签设置祥式，并且修改时只需要修改一处即可，方便对样式进行复用
- 问题：
  - 这种写法是将页面的所有CSS都写在HTML文档里了，这样会让HTML过于冗长，并且分工不明确
  - 内部样式表只能对一个网页起作用，不能跨页面进行复用
- 注意：开发时也尽量不要使用内联样式。
外部样式表
- 写法：
  - 将CSS样式内容写在一个单独的CSS文件里（文件后缀名：.css），再在HTML文档中使用<link>标签引用该样式表。
  - link标签的写法：<link rel=”stylesheet” href=”文件路径”>
- 好处：
  - 只要写好了一个CSS外部样式表，就可以在任何网页中进行引用，只要知道了这个CSS文件的路径，在另一个服务器的网站里也能引用。
- 将样式编写到外部的CSS文件中，可以让浏览器的缓存机制发挥作用，从而加快网页的加载速度，提高用户的体验。
- 注意：在开发时，使用外部样式表是最方便，最规范，最推荐的。

CSS基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成（名值对结构）

属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

选择器决定该样式要在哪个HTML元素中被应用。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性:

实例

p { 
color:red; 
text-align:center; 
}

CSS 注释

CSS注释以 /* 开始, 以 */ 结束, 例如：

/*这是个注释*/

常用选择器

元素选择器

元素选择器，根据元素的名称进行选择，优点是一次就能选中页面中的所有需要同样的元素，但这也是它的缺点，在很多时候，我们希望同样的元素在不同的情况下也能有不同的效果，比如：

<h1>月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行，边秋一雁声。</p>
<p>露从今夜白，月是故乡明。</p>
<p>有弟皆分散，无家问死生。</p>
<p>寄书长不达，况乃未休兵。</p>

<h1>夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪，受降城外月如霜。</p>
<p>不知何处吹芦管，一夜征人尽望乡。</p>

我希望《月夜忆舍弟》中h1标签的颜色为红色，《夜上受降城闻笛》中h1标签的颜色为绿色

怎么办？还是直接用元素选择器吗？

h1{ 
color: red; 
}

这样会把所有h1标签都设成红色。

这个时候我们可以使用id选择器

id选择器

id选择器是根据元素的id属性值来选择的，且这个id属性值必须唯一，不能同时给两个元素设置成同一个id。

我们需要这么写：

HTML：

<h1 id="red">月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行，边秋一雁声。</p>
<p>露从今夜白，月是故乡明。</p>
<p>有弟皆分散，无家问死生。</p>
<p>寄书长不达，况乃未休兵。</p>

<h1 id="green">夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪，受降城外月如霜。</p>
<p>不知何处吹芦管，一夜征人尽望乡。</p>

CSS：

#red{
    color: red;
}
#green{
    color: green;
}

注意：id值必须是唯一的，同时在不同的地方设置同一个id属性值的做法是不规范的，但浏览器可以理解你的意思，当你这样设置的时候，它们会给这两个同一个id属性值的元素设置同种样式，但这仍然是不规范的，这个id属性值在CSS可以复用，但之后编写JS或者在维护代码时，往往会造成不便，所以id属性值必须唯一

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

id属性值必须唯一，如果我们非要复用的话，就可以选择class选择器：

class选择器

class选择器又称类选择器，类选择器作用与id选择器类似，但它可以复用（允许同时在不同的地方设置同一个属性值）因此，它也可以用来分组。

我们需要这么写：

HTML：

<h1 class="red">月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行，边秋一雁声。</p>
<p>露从今夜白，月是故乡明。</p>
<p>有弟皆分散，无家问死生。</p>
<p>寄书长不达，况乃未休兵。</p>

<h1 class="red">夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪，受降城外月如霜。</p>
<p>不知何处吹芦管，一夜征人尽望乡。</p>

CSS：

.red{
    color: red;
}

同一个元素只能有一个id属性值，但可以有多个class属性值

也就是说，下面的写法是正确的：

HTML：

<h1 class="color font">月夜忆舍弟</h1>
<h2>杜甫</h2>
<p>戍鼓断人行，边秋一雁声。</p>
<p>露从今夜白，月是故乡明。</p>
<p>有弟皆分散，无家问死生。</p>
<p>寄书长不达，况乃未休兵。</p>

<h1 class="color font">夜上受降城闻笛</h1>
<h2>李益</h2>
<p>回乐烽前沙似雪，受降城外月如霜。</p>
<p>不知何处吹芦管，一夜征人尽望乡。</p>

CSS：

.color{
    color: red;
}
.font{
    font-size: 30px
}

只要注意：多个class属性值用空格隔开即可

之后还会有更多的选择器需要学习。

文章版权归作者所有，未经允许请勿转载。

THE END

前端
# 笔记 # 前端 # CSS