Sun Oct 23

Develop

【CSS入门】1. CSS 第一步

什么是CSS

CSS不是编程语言，也不是标记语言，它是一门样式表语言。

CSS语法

CSS规则集（简称规则）
CSS
语法由一个选择器（selector）起头。它选择了我们将要用来添加样式的HTML元素。
接着输入一对大括号。在大括号内部定义一个或多个形式为 属性(property):值(value); 的声明。每个声明都制定了我们选择元素的一个属性，之后跟一个我们想要赋给这个属性的值，结尾加上分号。冒号之前的是属性，冒号之后的是值。

属性和值都是区分大小写的。
如果属性或值无效，那么声明则视为无效，并被浏览器的CSS引擎忽略，继续解析下一个CSS样式。
同样的，当浏览器无法解析选择器的时候，也会直接忽略整个选择器，然后解析下一个CSS选择器。

添加CSS

外部样式表

外部样式表是指将CSS编写在扩展名为.css的单独文件中，并从HTMLlink元素应用它的情况。

<link rel="stylesheet" href="styles.css">

为了将styles.css和index.html连接起来，可以在HTML文档中，head语句模块里面加上上面的代码。
在link语句块中，我们使用属性rel，让浏览器知道有CSS文档的存在，并用href属性指定，寻找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>

有的时候这种方式比较有用，但是会导致需要修改时修改每个页面文件。

内联样式表

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

这种方式难以维护，不推荐这种方式。

元素的默认行为

只要一个HTML文档的标记使用正确，浏览器都会将其渲染值可读状态。例如标题使用大号粗体，列表边上有项目符号。因为浏览器自带一个包含默认样式的样式表，默认对所有的页面有效。

li {
  list-style-type: none;
}

我们也可以移除浏览器的默认样式，例如用上面的规则可以移除ul自带的项目符号。

选择器

为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。选择器所选择的元素，叫做“选择器的对象”。
选择器具有专一性。

.special {
  color: red;
}

p {
  color: blue;
}

两个选择器可以选择相同的HTML元素，CSS语言有规则来控制在发生碰撞时用哪条规则将获胜，这些规则称为级联规则和专用规则。
设置为蓝色的声明出现在了样式表的末尾，所以样式将覆盖以前的样式，所以这里起作用的就是级联。如果我们使用了类选择器，那么类选择器中的规则就将起作用，因为一个类被描述为比元素选择器更具体，或者具有更多的特异性。

选择器列表

如果有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”。

h1, 
.special {
  color: blue;
}

上面就是一个选择器列表，另起一行的好处是，会更好读一点。

选择器类型

元素选择器

p {
  color: green;
}

元素选择器，即直接匹配HTML元素的选择器。
上面的规则，可以将文档中的所有段落变成绿色。

类选择器

<ul>
  <li>1</li>
  <li class='special'>2</li>
  <li>3</li>
</ul>

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

在CSS中，要选中special类，只需要在选择器的开头加个西文句点( . )就可以选择该类。

ID选择器

<ul>
  <li>1</li>
  <li id='special'>2</li>
  <li>3</li>
</ul>

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

在CSS中，要选中id为special的元素，只需要在选择器的开头加个井号( # )就可以选择元素。

标签属性选择器

根据一个元素上的某个标签的属性的存在以选择元素的不同方式。

a[title] { }

或者根据一个特定值的标签属性是否存在来选择。

a[href="https://example.com"] { }

伪元素与伪类

伪类用来样式化一个元素的特定状态。例如下面的伪类会再鼠标指针悬浮到一个元素上的时候选择这个元素。

a:hover {}

伪元素选择某个元素的某个部分而不是元素自己。例如::first-line是会选择一个元素中的第一行。

运算符

运算符可以将其他的选择器组合起来。下面的示例用运算符（>）选择了<article>元素的初代子元素。

article > p { }

后代选择器

li em {
  color: red;
}

该规则将选择li内部任何em元素。它知识单纯的在两个选择器之间加上一个空格。

子代选择器

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

想要设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需要在两个选择器之间添加+号。

相邻兄弟选择器

h1 + p {
  color: yellow;
}

上面的代码为以下元素建立样式：在 <h1> 后面的 <p> 元素的内部的元素。

通用兄弟选择器

h1 ~ p {
 color: green;
}

选择h1元素之后所有同层级的p元素。

函数

虽然大多数的值时相对简单的关键字或者数值，但是也有一些可能的值以函数的形式出现。

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

上面的示例中，我要求此框的宽度为包含块宽的90%，减去30像素。

@规则

以@符号开头，后跟一个标识符，并包括知道下一个;的所有内容，或者下一个内容块。

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

上面是一个常见的@rules，它仅作用于视口大于30em的浏览器。

速记属性

一些属性，如font,background,padding,border,margin`等属性称为速记属性。这是因为他们允许在一行中设置多个属性的值。

padding: 10px 15px 15px 5px;

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

例如上面两个块的作用是等价的。

注释

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

/* Handle basic element styling */
body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
/*.special {
  color: red;
}*/

例如上面的代码，添加了一段注释，并将一段规则注释掉，也就是被禁用掉。

CSS是怎么工作的

浏览器的运行机制

下面的步骤是浏览器加载网页的简化版本，不同浏览器可能会有不同，但下面的步骤基本会出现。
css是如何工作的

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

上面只是简单的浏览器工作原理，这里将详细介绍。

关于DOM

一个DOM有一个树形结构，标记语言中的每个元素、属性及每一段文字都对应着结构树的一个节点（Node/DOM或 DOM node）。节点本身和其他的DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

上面是一个DOM案例，这是HTML被转化成DOM树的样子。

应用CSS到DOM

浏览器会解析HTML并创造DOM，然后解析CSS，浏览器处理规则非常快。

# css入门 css

支付宝捐赠

微信捐赠