css就是一种先选择html元素，然后设定选中元素css属性的机制。
css选择符合要应用的样式构成一条css规则。

为文档添加样式的3种方法：

1.行内样式，直接写在特定标签的style属性中；
2.嵌入样式，在head元素中嵌入<style type="text/css"></style>，将css规则放入<style>和</style>中；
3.链接样式，在<head>元素中使用外部的样式表，如：
<link href="1.css" rel="stylesheet" type="text/css" />

3种css样式的优先级：
行内样式 > 嵌入样式 > 链接样式

css规则命名惯例：

css规则由选择符和声明2部分组成。选择符用于指定元素，声明又由2部分组成：属性和值。如果选择符由多个元素组成，则用逗号隔开。如果有多条声明，则用分号隔开。简单例子：
p,h1 {
    color:red;
    font-size:12px;
}

用于选择特定元素的选择符分为3种：
1.上下文选择符。基于祖先或同胞元素选择一个元素：
a.祖先选择符。用空格符隔开，用于选定某个祖先元素下的元素。如我们需要只改变<aside>元素中的<p>元素：
aside p {
    color:green;
}
b.子选择符。标签2必须是标签1的子元素：
标签1 > 标签2
c.临近同胞选择符。标签2必须紧跟在其同胞标签1的后面：
标签1 + 标签2
d.一般同胞选择符。标签2必须跟（不一定紧跟）在其同胞标签1后面：
标签1 ~ 标签2
e.通用选择符。*是一个通配符，可以匹配任何元素。

2.ID和类选择符。只要在html中为元素添加了id和class属性，就可以在css选择符中使用ID和类名，直接选中特定区域。ID和class有点不同，ID用来在页面中唯一地标识一个元素，类用来标识一组具有某些相同特征的元素。
a.类选择符：
.类名
b.ID选择符：
#id属性值

3.属性选择符。通过元素的属性来定位元素。
a.属性名选择符。选择带有该属性名的标签名：
标签名[属性名]
b.属性值选择符。选择带有值为属性值的属性名的标签名。
标签名[属性名="属性值"]

伪类：
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标签上。伪类有2种：
UI伪类（在html元素处于某种状态，如鼠标悬停时，为该元素应用CSS样式）；
结构化伪类（标记中存在某种结构上的关系时，如某个元素是一组元素中的第一个或最后一个，为相应元素应用CSS样式）。

UI伪类：
1.链接伪类：
a:link（默认状态）
a:visited（用户此前点击过的链接）
a:hover（鼠标悬停）
a:active（链接正在被点击，鼠标还没有释放）
2.focus伪类：
input:focus（获得焦点）
3.target伪类：
如果用户点击一个指向页面中其他元素的链接，则那个元素就是target，可以用:target伪类选中它：
#cankao:target

结构化伪类：
1.:first-child和:last-child（第一个和最后一个子元素）
2.:nth-child(n) （第n个子元素）

伪元素：
伪元素就是文档中若有实无的元素。
1.::first-letter（首字符）
2.::first-line（首行）
3.::before和::after（可用于在特定元素前面或后面添加特殊文字内容），如：
<p class="age">25</p>
p.age::before {content:"我的年龄是："}
最后浏览器显示出的内容是：
我的年龄是：25

css应用机制：
1.继承：
css中的元素会继承其祖先元素的css样式。
2.特指：
特指度表示一条规则有多明确。一条规则的特指度，由它的选择符中包含多少个标签、类名和ID决定。计算方式：
计算I(id)-C(class)-E(element)3个值，组成一个3位数，数值大的胜出。也就是说，id的权重大于class大于元素。
3.层叠：
层叠就是层叠样式表中的层叠，它是css的核心机制：
a.包含id的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符（详见特指度的计算）；
b.如果几个不同来源都为同一个标签同一个属性定义了样式，行内样式胜过嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则a胜过规则b。也就是说，如果选择符的特指度更高，就算是后声明的，也会胜出。
c.设定的样式胜过继承的样式，此时不用考虑特定度。

个人对css应用机制的理解：
a.继承得到的永远最小，不考虑特指度；
b.后设定的大于先设定的；
c.在所有设定的css中，特指度完爆一切，优先级最高。

css读书笔记2：css工作原理的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. 读书笔记-NIO的工作方式

    读书笔记-NIO的工作方式 1.BIO是阻塞IO,一旦阻塞线程将失去对CPU的使用权,当前的网络IO有一些解决办法:1)一个客户端对应一个处理线程:2)采用线程池.但也会出问题. 2.NIO的关键类C ...

  3. 一篇笔记整理JVM工作原理

    首先要了解的 >>数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了 ...

  4. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  5. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  6. Android学习笔记View的工作原理

    自定义View,也可以称为自定义控件,通过自定义View可以使得控件实现各种定制的效果. 实现自定义View,需要掌握View的底层工作原理,比如View的测量过程.布局流程以及绘制流程,除此之外,还 ...

  7. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  8. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  9. 读书笔记《CSS权威指南》

    阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...

随机推荐

  1. spark资料

    http://spark.apache.org/docs/latest/programming-guide.html#rdd-operations http://m.blog.csdn.net/art ...

  2. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  3. Xcode插件管理以及Xcode7 升级

    一,Xcode插件管理工具 Alcatraz: mkdir -p ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins; cur ...

  4. 如何用linux远程登录windows计算机

    大家可能试过用windows远程登录另一个windows pc机,今天大家将会学到如何用 linux远程登录你的windows系统. 首先大家要做到得救是将自己linux和windows操作机的IP地 ...

  5. Map Columns From Different Tables and Create Insert and Update Statements in Oracle Forms

    This is one of my most needed tool to create Insert and Update statements using select or alias from ...

  6. [UVa1210]Sum of Consecutive Prime Numbers（前缀和，打表）

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  7. JAVA开发--游戏24点

    也比较简单,写的不好,代码里用到了LOOKANDFELL,QUAQUA8.0的包 package com.Game24; import java.awt.Container; import java. ...

  8. sql默认启动密码

    首先启动sqlplus输入用户名:sqlplus / as sysdba密码空缺如果用户被锁定,记得加上SQL> alter user dbsnmp account unlock; User a ...

  9. s表达式和json表达式

    s表达式 + 1 2 3普通表达式 1+2+3json表达式{ +:[1, 2, 3]}优点,一个运算符,无限个参数 s表达式 * (+ 1 2) 3普通表达式 1+(2*3)json表达式{ *:[ ...

  10. win8和ubuntu双系统安装

    做了一个windows和Ubuntu双系统,参考了一些文章.网上资料不少,我就不重复了. 虽然没什么难度,但是有些细节在装的时候需要注意.不然造成资料丢失,系统崩溃,你就得不偿失,需要折腾花费较长的时 ...