1-CSS第一步

最新推荐文章于 2024-01-05 16:50:50 发布

宁静_致远_

最新推荐文章于 2024-01-05 16:50:50 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签： CSS

本文链接：https://blog.csdn.net/tiantianzs/article/details/123855095

版权

前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

title: 1-CSS第一步
tags: CSS（设计Web）
category: MDN

什么是 CSS

参考文档

当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性

如果所有网站都使用默认样式，互联网就会非常枯燥。但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。

CSS 用来干什么

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等

一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言, 但你可能也听说过其他可标记语言，如 SVG 或 XML

展示一份文档给用户实际上是将文档变成用户可用的文件。Browsers：如 Firefox ，Chrome, 或 Edge ，都可以将文档在电脑屏幕、投影仪或打印机等设备上进行可视化

CSS 语法

CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则

语法由一个选择器(selector)起头。它选择(selects) 了我们将要用来添加样式的 HTML 元素

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为属性(property):值(value); 的声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) 对应不同的合法值

CSS 模块

你可以通过 CSS 为许多东西添加样式，CSS 由许多模块(modules) 构成。你可以在 MDN 上浏览这些模块的参考内容(MDN reference)，许多模块都被组织在自己单独的文档页面

CSS 规范

所有的标准 Web 技术(HTML, CSS, JavaScript 等) 都被定义在一个巨大的文档中，称作规范 specifications (或者简称为 “specs”)，它是由 (像是 W3C, WHATWG, ECMA 或 Khronos) 这些规范化组织所发布的，其中还定义了各种技术是如何工作的

CSS 也不例外 — 它是由 W3C(万维网联盟)中的一个名叫 CSS Working Group 团体发展起来的

CSS 始终在发展，并伴随着新的特性。然而，有一件事情从始至终都未改变，那就是不让新的改变破坏旧的网站，即使是 2000 年建立的网站，如今也能正常访问

浏览器支持

让所有的浏览器都同时支持一个 CSS 新特性是不现实的，通常都会一个空档期 — 一些浏览器已经支持而另一些仍未支持。因此，查看特性的实现状态(implementation status)是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态，你可以通过这种方法来查看你是否可以去使用它

CSS 入门

参考文档

在 HTML 中引入 CSS

有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS

<!-- 
    将该元素添加到 <head> 中
 -->
<link rel="stylesheet" href="styles.css" />

样式化 HTML 元素

元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：

p {
  color: green;
}

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

p,
li {
  color: green;
}

改变元素的默认行为

对浏览器的默认样式不太满意，只需选定那个元素，加一条 CSS 规则即可

li {
  list-style-type: none;
}

使用类名

可以给 HTML 元素加个类名（class），再选中那个类名

举个例子吧，咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的：

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：

.special {
  color: orange;
  font-weight: bold;
}

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

/* 
  这个意思是说，“选中每个 special 类的 li 元素”
*/
li.special {
  color: orange;
  font-weight: bold;
}

根据元素在文档中的位置确定样式

假如在我们的文档中有两个 元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。（即 li 包含 em）

/* 
  该选择器将选择<li>内部的任何<em>元素  
*/
li em {
  color: rebeccapurple;
}

在 HTML 文档中选择直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (称为相邻选择符)

/* 
  该选择器选择与 h1 直接同级的下一个 p 元素
*/
h1 + p {
  font-size: 200%;
}

根据状态确定样式

当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用 CSS 去定位或者说针对这些不同的状态进行修饰

/* 
  未访问的链接为粉色
*/
a:link {
  color: pink;
}

/* 
  已访问的链接为绿色
*/
a:visited {
  color: green;
}

你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。（即将鼠标放置在链接上时，下划线消失

a:hover {
  text-decoration: none;
}

同时使用选择器和选择符

你可以同时使用选择器和选择符

/* 
  选择一个 span 元素，其从里到外分布嵌套了一个 p 元素、article 元素
*/
article p span {
  ...;
}

/* 
  选择一个 p 元素，其直接兄弟分别为 ul 元素、h1 元素
*/
h1 + ul + p {
  ...;
}

你可以将多种类型组合在一起

/* 
  在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为 special
*/
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

如何构建CSS

参考文档

在HTML里面应用CSS

外部样式表

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它的情况：

<!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>

内部样式表

内部样式表是指不使用外部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>

内联样式

内联样式表存在于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>

选择器

/* 元素选择器 */
h1

/* 伪类选择器 */
a:link

/* 类选择器 */
.manythings

/* id选择器 */
#onething

/* 通用选择器 */
*

/* 后代选择器 */
.box p

/* 组合选择器 */
.box p:first-child

/* 群组选择器 */
h1, h2, .intro

专一性

CSS语言有规则来控制在发生碰撞时哪条规则将获胜–这些规则称为级联规则和专用规则

在下面的代码块中，我们为p选择器定义了两个规则，但是段落最后是蓝色的。这是因为将其设置为蓝色的声明将出现在样式表的后面，而稍后的样式将覆盖以前的样式。这就是起作用的级联

p {
  color: red;
}

p {
  color: blue;
}

在我们同时使用了类选择器和元素选择器的例子中，类将获胜，使得段落变红–即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了

.special {
  color: red;
}

p {
  color: blue;
}

属性和值

参考文档，官网描述的更好

函数

虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。一个例子是calc()函数。这个函数允许您在CSS中进行简单的计算，例如：

.box {
  padding: 10px;

  /* 
    设定宽度为 90% 并同时减去 30px
  */
  width: calc(90% - 30px);

  background-color: rebeccapurple;
  color: white;
}

例如还有 transform 属性，它可以平移旋转图像等。

还有关于颜色方面的 rgb() 等函数

@规则

@rules (读音为 “at-rules”). 这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。有些@rules 规则很简单，有规则名和值。例如，要将额外的样式表导入主CSS样式表，可以使用@import:

@import 'styles2.css';

最常见的 @rules 之一是@media，它允许您使用媒体查询来应用CSS

/* 
  给 <body> 元素一个粉红色的背景色 
*/
body {
  background-color: pink;
}

/* 
  如果浏览器的宽度大于30em，则背景色将为蓝色
*/
@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

速记属性

一些属性，如 font, background, padding, border, and margin 等属性称为速记属性–这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁

注释

CSS中的注释以/*开头，以*/结尾

空白

空白是指实际空格、制表符和新行。以与HTML相同的方式，浏览器往往忽略CSS中的大部分空白；许多空白只是为了提高可读性。

CSS是如何工作的

参考文档

CSS究竟是怎么工作的

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

浏览器载入HTML文件（比如从网络上获取）

将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式
接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理
浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）
关于DOM

一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。

节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）

DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。

一个真实的DOM案例
```

 Let's use:
 Cascading
 Style
 Sheets

```
在这个DOM中，元素对应了父节点，它的子节点是一个text节点和三个对应了元素的节点，SPAN节点同时也是他们中的Text节点的父节点。（这里要注意文本也可以是节点）
```
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
 └─ "Sheets"
```
应用CSS到DOM

浏览器会解析HTML并创造一个DOM，然后解析CSS

当浏览器遇到无法解析的CSS代码会发生什么

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明

相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。

这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染

也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题
```
.box {
 width: 500px;

 /* 
 老式的浏览器由于无法解析，忽略这一行；
 新式的浏览器则会把这一行解析成像素值，
 并且覆盖第一行指定的宽度 
 */
 width: calc(100% - 50px);
}
```

宁静_致远_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
1-CSS第一步

title: 1-CSS第一步tags: CSS（设计Web）category: MDN什么是 CSS参考文档当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性如果所有网站都使用默认样式，互联网就会非常枯燥。但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。CSS 用来干什么CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言, .
复制链接

扫一扫