CSS基础

CSS

CSS全称是 Cascading Style Sheets，翻译过来就是层叠样式表，是用来为网页添加样式的代码。
例：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

以上代码是规定段落P这个元素的样式，即段落字体颜色为红色，宽度为500像素，并添加一个粗细为1像素的固定黑边框

CSS也能同时给多个元素添加同样的样式
例：

p, li, h1 {
  color: red;
}

CSS具体是什么

1. 所谓样式就是我们看到的HTML长什么样子，比如你我他都是人，人就可以称为我们的结构，但是大家头发有长短，肤色有黑白，相貌有美丑，这就是外观，也就是样式，CSS就是用来描述HTML具体长什么样子

2. 层叠指的是样式的优先级，当作用于相同元素的CSS规则产生冲突时以优先级高的为准

CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。每个CSS选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为），当两个选择器同时配置同一元素的同一属性时（比如一个设置color：red，另一个color：black），就会产生冲突，而解决冲突的方案就是CSS选择器的权重，权重高的来覆盖权重低的。

CSS的意义

把页面的结构和样式分离

以前的页面HTML和CSS是没有区分的，都是HTML，这样的后果是有很多标签实际并没有任何语义，只是表示特殊的样式，同时标签为了样式的规定的属性层出不穷，这就是内容和表现的杂糅

在新式的页面中HTML只表示结构和内容，样式部分交给CSS控制，做到了内容和表现分离，这样能够方便维护

网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的内容与显示分隔开来。这有许多好处：

1. 文件的可读性加强
2. 文件的结构更加灵活
3. 作者和读者可以自己决定文件的显示
4. 文件的结构简化了

另外，在HTML中：一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便 不同的读者可以有不同的样式，比如有的读者需要字体比较大 HTML文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息 CSS还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置

分辨率和像素

像素即px，是屏幕中最小的点。像素不是物理长度，在不同分辨率的设备上物理长度不同

    分辨率 = 屏幕X轴上像素值 * Y轴上的像素值

屏幕如果是1024×768，也就是说水平方向上有1024个像素点，垂直方向上有768个像素点

在同一台设备上，保证可视画面尺寸不变的情况下，像素点的大小，会随着分辨率的调整而改变。分辨率降低，像素点就变大，图片质量越低。分辨率降高，像素点就变小，图片也越清晰

单位

1. px：像素
2. pt：物理单位，1/72英寸，几乎没人用了
3. em：即％，是相对单位，最初是指字母M的宽度，故名em，按照默认的字体大小16px，1em = 16px，0.5em = 8px

HTML 字体大小单位 px em pt

继承特性

CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中

首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的

CSS选择器

CSS是通过不同选择器来选择不同的元素的
CSS的选择器有以下几种：

选择器
元素选择器 Element Selector	p 选中所有段落
ID 选择器 ID Selector	#notice 选中 或
类选择器 Class Selector	.success 选中 和
属性选择器 Attribute Selector	[hidden] 选中
伪类选择器 Pseudo class selector	a:hover 选中 鼠标悬停所在的

具体选择器用途和用法将放在CSS选择器一文中说明。

盒模型

我们选择的每一个元素都有对应所占据的空间和外形，其中分为外边距（margin）和内边距（padding）以及边框（border）以及宽度和高度等属性，调整这些属性将会对元素本身盒模型产生影响。

• 内边距（padding）- 围绕着内容的空间（比如围绕段落的空间）
• 边框（border）- 紧接着内边距的实体线段
• 外边距 (margin) - 围绕元素外部的空间

盒模型示意图

以上就是CSS的大致介绍，接下来我们来看看CSS的具体应用形式。

CSS的具体应用

简单示例

  
    
    
    
  
  
    
Hello CSS!
    
CSS 很 666666……
  

/* style.css */
h1 {
  padding: 10px;
  background-color: orange;
  border: 1px solid black;
}

p {
  color: purple;
}

代码效果：http://js.jirengu.com/xemihocovo/1/
在上述代码中我们给h1和p这两个元素分别添加了效果，其中我们给h1元素（段落1）添加内边距为10像素，背景颜色为橙色，以及粗细为1像素的固定黑边框的样式，给p（段落）元素添加了字体颜色为紫色的样式

CSS的工作原理

CSS工作原理

1. 我们在浏览器输入url（网页地址）之后，浏览器会向服务器发送请求，服务器会将对应的数据返还给浏览器，浏览器在获取数据后将开始加载该页面；
2. 浏览器加载并解析html文件，得到服务器返回的字符串之后进行词法解析，并将其解析成一个树状数据结构，而浏览器在解析html文件的同时也会同步向服务器发送请求获取CSS文件，并加载解析该CSS文件，使其也变成一个CSS树；
3. 浏览器在得到html树和CSS树之后将其结合，并创建一个DOM树（一个类似于树的文档结构），最后再将其进行展示。

CSS的引入方式

CSS的引入一般有三种

外部样式表引入（推荐）

1. 通过标签引入CSS

  
  
  


  
Hello CSS!

2. 通过@import引入样式，放入css中
   不要忘记分号

注意：

1. @import属于CSS语法，这种用法不能直接在html页面使用，只能在CSS文件中进行使用；
2. 使用@import时可以使用一些限制条件，例如媒体查询（手机横竖屏）；

内部样式表

  
  
  


  
Hello CSS!

内联样式

不推荐，因为如果样式很多时会无法全部写入，而且如果同一个元素很多，将需要在每个元素内都加入该样式而且改动时也要逐个修改很不方便，但在某些情况下很有用。例如需要使用JavaScript设置样式或针对每个元素设置不同的样式。

CSS 很 

*属性样式

目前已经废弃，不再使用，这是没有CSS都没有的时期的写法

参看链接：

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works