CSS基础——firststep

理解CSS基础：选择器、样式规则与应用方式

最新推荐文章于 2024-03-30 14:12:27 发布

原创最新推荐文章于 2024-03-30 14:12:27 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS的基础知识，包括其作用、语法结构以及应用于HTML文档的三种方式：外部样式表、内部样式表和内联样式表。通过选择器选择HTML元素，并定义属性和值来添加样式。同时，文章提到了CSS的模块化，如Backgrounds and Borders模块，以及CSS注释的重要性和代码维护的最佳实践。

CSS是用来干什么的？

CSS 是用来指定文档（HTML）如何展示给用户的一门语言——如网页的样式、布局、等等。CSS可以用于给文档添加样式——比如改变标题和链接的颜色及大小，也可以用来船舰布局——例如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局，甚至为网页添加一些动画效果等。

CSS语法

CSS是一门基于规则的语言，语法由一个选择器起头（selector）。它选择（selects）了我们将要用来添加样式的HTML元素。
接着输入一堆大括号{ }，在大括号内部定义一个或多个形式为属性（property）：属性（value）的声明，每个声明都制定了我们所选择元素的一个属性，在它的后面我们往往跟上想赋予的值。
冒号之前是属性，冒号之后是值。不同的CSS属性对应不同的和法治。
如：

	h1{
		color : red;
		font-size:5em;
	}

另外一个样式表可以包含很多个规则
如：

h1{
	color : red;
	font-size:5em;
}
p{
	color:black;
}

CSS模块

CSS是由许多模块（modules）构成的，我们可以通过这些模块来为许多东西添加样式，例如CSS中的Backgrounds and Borders模块，它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充，剪裁或调整大小，以及以其他方式修改。边框可以用线条或图像装饰，并制成方形或圆形。此外，元素框可以用阴影装饰。
在这里插入图片描述

简单的CSS应用

假设下列代码存放在html文件中

	link rel = "stylesheet" href ="style.css"
	rel:让浏览器得知CSS文档的存在
	href：寻找到CSS位置

style.css文件为我的CSS样式文件

h1{
	color:red;
}

值得注意的是多个选择器之间可以通过 “，” 隔开
例：

p,li{
	color:green;
}

通过类名对HTML元素区分渲染

<ul>
  <li>小猫</li>
  <li class="special">小黑狗</li>
</ul>

假如我希望让小狗的样式和小猫不一样
那么我可以通过在CSS文件中添加个类

.special{
	color:black;
	font-weight:blod;
}

通过元素的位置确定样式

li em {
  color: rebeccapurple;
}

本选择器中将"li"内部的所有带有"em"元素都变为了紫色,
效果
在这里插入图片描述

h1 + p {
  font-size: 200%;
}

本选择器中设置了相邻两个相同层级中后一个的段落样式（相邻选择符）
效果：
在这里插入图片描述

通过状态确定样式

a:link {
  color: pink;
}

a:visited {
  color: green;
}

本段选择器的作用为该链接未被点击时为粉色，点击后变为绿色

添加CSS的三种方式

在HTML文档中应用CSS方法有三种

外部样式表

外部样式表是指将CSS编写在扩展名为.css的单独文件中，并从HTML元素引用它。这是将CSS附加到文档中最常见且最有效的方法，因为你可以将本CSS链接到多个HTML页面上，从而允许你通过一个相同的样式表来设置所有页面的样式。（代码的复用）
例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

上面的HTML文件通过<link>元素的href属性来引用CSS文件

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

需要注意的是在使用外部样式表这种方式对文档添加样式时，需要将CSS文件与HTML文档放置在同一个文件夹中，如果必须分割在不同的地方，可以通过<link>元素的href属性来调整指定的路径
例如：

<link rel="stylesheet" href="styles/general/style.css">

内部样式表

内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件<head>标签里的<style>标签之中
例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

如果你的内容管理系统不能直接编辑CSS文件，这种方法就很有用，但是这种方法相比外部样式表来说效率比较低，你没有办法将之前写的CSS样式复用，如果将一组页面修改成某种样式则只能一个个修改页面文件咯。

内联样式

内联样式表存在于HTML元素的style属性中，其特点时每个CSS表之影响一个元素。
例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>