.基础

在html中使用css：

让 HTML 文档能够遵守我们给它的 CSS 规则。

1.外部样式表：在文档开头链接css。

在index.html文件的相同目录下创建style.css文件。
在html文件的<head>标签插入<link rel='stylesheet' href='style.css'>(rel属性是让浏览器知道有css文档存在) 2.内部样式表：在html中的<head>标签里的<style>里写css
有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑CSS文件)，但该方法和外部样式表比起来更加低效。在一个站点里，你不得不在每个页面里重复添加相同的CSS，并且在需要更改CSS时修改每个页面文件。 3.内联样式
内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：

<body>
   <p style="color:red;">This is my first CSS example</p>
 </body>

除非你有充足的理由，否则不要这样做！ 它难以维护

在文本中使用CSS

交互式编译器进行实验。
计算机上创建一个新的文件夹,然后在文件夹中创建下面两个文件的副本。index.html:/style.css

选择器：样式化html元素

*如果需要一次选择多个选择器，中间用‘，’隔开；
CSS语言有规则来控制在发生碰撞时哪条规则将获胜--这些规则称为级联规则和专用规则

级联规则:而稍后的样式将覆盖以前的样式。
类选择器>元素选择器

改变元素的默认行为

删除默认的样式：选定元素，加一条css规则。 li{list-style-type：none；}

使用类名

你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素：给 HTML 元素加个类名（class）

选中类名，该类名里的所有内容样式都要应用 .classnamexx{} /.special{}
选中某元素里的类名 html元素.classnamexx{} /li.special{}
还是别管元素，光看类就完事了.

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

包含选择符（用空格组成的选择器） li em :选择器将选择<li>内部的任何<em>元素（<li>的后代）
相邻选择符（用+组成的选择器） h1+p:直接出现在标题后面并且与标题具有相同层级的段落样式，

根据状态确定样式

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

未访问 a:link{color:pink}
访问过 a:visited{color:green}
悬停 a: hover{text-decoration:none}

选择器和选择符一起使用

body h1+p .special{}

***

速记属性

font：

background：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

padding： border： margin：

css的运行

html加载解析并创造一个DOM-->css加载解析--->css应用到dom-->呈现
ps：遇到错误css代码--->浏览器什么也不会做，继续解析下一个CSS样式！

CSS规则组成

CSS由两个组成部分组成：属性+值；属性名为 color, 值为 blue.与值配对的属性，两者加起来，称为CSS声明。
属性值有一些可能的值以函数的形式出现。

  width: calc(90% - 30px);
 transform: rotate(0.8turn)

CSS声明块+选择器，以生成CSS规则集(或CSS规则)。

ps：在css中，属性和值都是区分大小写的。每对中的属性和值由冒号(：)分隔。

重要事项： 如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。

重要： 在CSS(和其他网络标准)中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。

*1.@规则

www.lanmper.cn/css/c22.htm…

@rules (pronounced "at-rules"). 这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。

@import 'styles2.css';  //要将额外的样式表导入主CSS样式表

@media(){}
允许您使用媒体查询来应用CSS，仅当某些条件成立
(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。

    body {
      background-color: pink;
    }

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

*2.层叠

CSS如何应用于HTML以及应用时的优先顺序。

层叠如何定义在不止一个元素的时候怎么应用css规则：有三个因素需要考虑，根据重要性排序如下，前面的更重要：

1.重要程度

!important :修改特定属性的值，能够覆盖普通规则的层叠。

p{border:none !important}  应用这个，即使优先级低，这个*属性*也使用这个值。 
.clsaa {border:10px }

注：覆盖 !important 唯一的办法就是另一个 !important 具有相同优先级 而且顺序靠后，或者更高优先级。

了解 !important 是为了在阅读别人代码的时候知道有什么作用。 但是，强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。

在一种情况下，你可能不得不使用它：当你不能编辑核心的CSS模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。

2.优先级— 它范围更小

浏览器是根据优先级来决定当多个规则``有不同选择器对应相同的元素的时候需要使用哪个规则。
*计算优先级

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

1.  **千位**： 如果声明在 [`style`] 的属性（内联样式*）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
1.  **百位**： 选择器中包含ID选择器则该位得一分。
1.  **十位**： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
1.  **个位**：选择器中包含元素、伪元素选择器则该位得一分。

**注**: 通用选择器 (`*`)，组合符 (`+`, `>`, `~`, ' ')，和否定伪类 (`:not`) 不会影响优先级。

**警告:** 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

** 一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。

3.资源顺序

如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。

简而言之

相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：

用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。
用户样式表中的常规声明(由用户设置的自定义样式)。
作者样式表中的常规声明(这些是我们web开发人员设置的样式)。
作者样式表中的!important声明
用户样式表中的!important 声明

3.优先级

4.继承

可以继承:
不能继承：widths , margins, padding, 和 borders 不会被继承。
哪些属性属于默认继承很大程度上是由常识决定的。
属性：

inherit：子元素属性和父元素相同。
initial：属性值和默认浏览器一致。如果默认浏览器样式中没有设置initial是自然继承，那么就会设置inherit
unset：将属性重置为自然值。如果属性是自然继承那么就是inherit，否则是initial
新的属性,
`revert` (en-US) 只有很少的浏览器支持。
**all**：可以用于同时将这些继承值中的一个应用于（几乎）所有属性。
    .classname{all:inherit} 将父级style应用到.classname

5.注释

/* */
当代码库变得更大时，这对于帮助您导航代码库非常有用--在代码编辑器中搜索注释可以高效地定位代码节。

6.简写

1.margin/padding/width/height：
p {
    margin:5px 6px 8px 9px  //四个值：上下左右
     margin:5px 6px 8px     //三个值：上 左右、下
     margin:5px 6px           //俩值： 上下、左右
     margin:5px             //一个值：四条边
}

2.border：
p
  {
  border:5px solid red;
  }

7.单位与取值类型

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。CSS中的单位是必须要写的，因为它没有默认单位。

a、绝对单位

1in=2.54cm=25.4mm=72pt=6pc。

各种单位的含义：

in：英寸Inches (1 英寸 = 2.54 厘米)\
cm：厘米Centimeters\
mm：毫米Millimeters\
pt：点Points，或者叫英镑 (1点 = 1/72英寸)\
pc：皮卡Picas (1 皮卡 = 12 点)

b、相对单位

px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。

a.文本取值类型

www.lanmper.cn/css/t347.ht…

b.数值数据类型

8.值定义

css属性值定义语法：用来限定css属性合法取值的专用语法，描述了哪些值是可取的css属性。·基本组成元素包括：关键字、符号、带类型的参数。

关键字：不需要引号，如auto,smaller或ease-in。/#### inherit、initial和unset
符号：/*~
带类型的参数：
- 基本类型，用一对尖括号表示：'<'与'>'，例如：用于表示角的大小，单位为度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）。
- 其他类型同样也用一对尖括号表示：'<'与'>'。其他类型分为两种：
  - 共享同一个属性名称的数个类型。在这种情况下，数据类型与属性共享同一组值。它们出现在一对引号之中，经常用于属性的缩写。
  - 不共享同一个属性名称的数个类型，它们与基本类型很相似，不同是：这种参数仅在规范中相关属性的描述处定义，而基本类型在规范中有专门定义。

2.1css(Cascading Style Sheets) 语法

.基础