关于WEB标准

WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由四部分组成：内容（Content）、结构（Structure）、表现（Presentation）和行为（Behavior）。

1）内容：就是制作者放在页面内真正想要让访问者浏览的东西，如：图片、文本、多媒体等（内容为王）

2）结构：使内容更加更加具有逻辑性与易用性，更清晰易懂

3）表现：用于修饰内容的外观的样式，称为表现，使网页更加美观

4）行为：网页中的交互及操作效果，主要通过脚本语言完成事件+动作

对应的标准有三方面：

结构化标准语言主要包括HTML、XHTML和XML，

表现标准语言主要包括CSS，

行为标准主要包括对象模型 W3C DOM、JavaScript、ActionScript等

WEB标准的目的：

创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示统一的信息内容。

什么是CSS

CSS是Cascading Style Sheets的简写，即层叠样式表，简称样式表。

CSS的主要作用

1.遵循W3C标准，符合WEB2.0标准。
2.减少重复格式化，减少网页体积，加快下载和访问速度。
3.符合内容与表现形式分离的原则，方便于搜索引擎抓取到有用的内容。
4.便于更新和维护，成千上万的网页只需要修改CSS便可以更改显示外观。
5.浏览器干扰相对较小，实现一些HTML格式化不能实现的高级功能。

CSS的基本语法

CSS的定义是由三个部分构成：选择器（selector），属性（properties）和属性的取值（value）

选择器名称
{属性名称1：属性的值1；属性名称1：属性的值1；……
}

注意事项：

1.在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。
在浏览器中，注释是不显示的，CSS注释以"/*" 开头，以"*/" 结尾。
2.定义多个值时，浏览器按照从前向后顺序选择属性值。
如果第1个值有效，则尝试使用，如果无效，则使用第2个，依次类推。 如：font-family: 'arial black', '微软雅黑';

CSS样式一般放到HTML的head标签中，写在成对的<style>标签中，标签可以设置一个type属性并设置值为text/css，目的是告诉浏览器<style>标签中的内容是css样式。比如：以下样式定义了一个新闻标题的样式，分别对字体、字号、粗体字进行了定义。

<html><head>…..<style type="text/css">.NewsTitle{font-family: "微软雅黑";font-weight: bold;font-size: 24px;}</style></head>……
</html>

CSS的三种引用方式

使用CSS有三种方式：内联式CSS、内部式CSS 、外链式CSS

内联式CSS

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>新闻网页</title></head><body><p style="font-family: '微软雅黑'; font-weight: bold; font-size: 24px; ">新闻标题</p>新闻正文</body>
</html>

内部式CSS

在HTML文档的<HEAD>标记中插入一对<STYLE>...</STYLE>标签。外链式CSS

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.NewsTitle{font-family: "微软雅黑";font-weight: bold;font-size: 24px;}</style></head><body><p class="NewsTitle">新闻标题</p>新闻正文</body>
</html>

外链式CSS

先建立外部样式表文件（*.css），然后在HTML中使用的link标签将其引入到网页中。外部news.css文件

.NewsTitle
{font-family: "微软雅黑";font-weight: bold;font-size: 24px;
}

新闻网页文件news.html文件

<html><head><meta charset="UTF-8"><title>新闻网页</title><link rel="stylesheet" type="text/css" href="news.css"/></head><body><p class="NewsTitle">新闻标题</p>新闻正文</body>
</html>

CSS选择器的类型

在CSS 中，选择器是一种匹配模式，用于选择需要添加样式的目标对象。

注：行内样式不需要用选择器，内部或外部CSS需要用选择器。

选择器的语法

基本格式如下：

selector {property: value}
选择器 {属性：值}选择器名称
{属性名称1：属性的值1；属性名称2：属性的值2；属性名称3：属性的值3；……
}

CSS3

CSS3是CSS规范的最新版，是css2.1的升级版本，弥补了CSS2很多不足之处。CSS层叠样式表告诉浏览器如何渲染你的Web页面。

CSS3与HTML5关系

Html5是新一代HTML标准；

Css3是新一代Css标准；

其实虽然两者都是最新标准，但是并没有直接的关系，HTML5用来进行网页的结构编写，CSS3是网页的样式。

如果非要让两者发生关系： “相辅相成”。

两者可以随意组合比如：html4+css3 html5+css2 html5+css3。

CSS3兼容性

CSS3是由W3C制定的标准，浏览器对CSS3进行功能实现，所以对于某些同样的样式在不同的浏览器运行结果会不一致，兼容性问题随之产生。

一般支持HTML5的浏览器，都支持CSS3；通过CSS3画“机器猫”的效果检查浏览器是否对CSS3良好支持；

目前浏览器支持程度一般，有时需要添加私有前缀。

-webkit-   以webkit做内核的浏览器
-ms-      IE
-moz-     火狐
-o-      opera
不加则为标准属性，一般放最后（有前缀的兼容效果更好）兼容查询：http://caniuse.com/

环境&手册

由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。

1、Chrome浏览器 version 50+
2、Firefox浏览器 firefox 48+
3、IE  (暂时忽略)学会使用工具，可以让我们事半功倍。
[]      表示全部可选项
||      表示或者
|       表示多选一
？        表示0个或者1个
*       表示0个或者多个
{}      表示范围

基本选择器

类选择器

所有的HTML标签都有class属性，为这个class设定一个值，然后就可以使用类选择器来匹配这一个值。并对其应用样式。

作用：选择指定了class属性值的标签

语法：

.类的值{ 样式表 }

示例：

注意：使用类选择器必须在值的前面加一个点符号（.）

ID选择器

所有的HTML标签都有一个id属性

我们可以为这个id设定一个值，然后再写选择器来匹配这一个值

作用：选择指定的ID属性值的标签

语法：

#ID的值{ 样式表 }

id使用的 # ，class 使用的是 .

通常id是唯一的（只能够有一个元素来匹配）

标签(元素)选择器

必须是HTML语法中固有的标签，而不能使自己定义的名称。

作用：选择HTML网页中所有指定的标签，并对其应用样式

语法：

标签{ 样式表 }

通用选择器

* 星号选择器，也称为通用选择器

作用：选择HTML页面上所有的元素

语法：

*{ 样式表 }

通用选择器一般我们不会使用，因为它会对页面上所有的元素的样式进行渲染，这样就会使页面的渲染速度变慢。

层次选择器

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系。

语法如下：

包含选择器E1 E2（后代关系）

作用：选择所有被E1包含的E2。

语法：

E1 E2

示例：

table td { font-size:14px; }
div .sub a { font-size:14px; }

子选择器 E1>E2（父子关系）

作用：选择所有作为E1子对象的E2。

语法：

E1 > E2

示例：

body > p { font-size:14px; }

注意：子选择器与包含选择器有区别，子选择器只选中下一代，包含选择器可以选中所有的后代（不限层级）。

选择器分组 E1,E2,E3（并列关系）

作用：将同样的样式应用于多个选择器，可以将选择符以逗号分隔的方式并为组。

语法：

E1,E2,E3

示例：

.td1,div a,body { font-size:14px; }

相邻选择器E1+E2（邻居关系）

选择紧贴在E1元素之后E2元素。相邻选择符只会命中符合条件的相邻的兄弟元素。

示例：

<style>
p + p {color: #f00;
}
</style>
<div class="test"><h3>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p>
</div>说明：如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色

兄弟选择器E1~E2（兄弟关系）

选择E1元素后面的所有兄弟元素E2。

与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

伪类选择器

伪类选择器对于大家来说最熟悉的莫过于“：link”、“：visited”、“：hover”、“：active”。CSS3的伪类选择器可以分成六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定为类选择器。

伪类选择器语法如下：

E:伪类{property：value}

动态伪类选择器

作用：<a>标记，超链接有4种不同的状态：未访问链接(link)、鼠标悬停状态(hover)、已访问链接(visited)、当前点击的活动链接(active)。CSS允许对于元素的不同状态，定义不同的格式化信息。

E:link 未访问的链接

E:visited 已访问的链接

E:hover 鼠标悬停状态

E:active 选定的激活状态

/* 按规则的写法 */
a:link{color:black;text-decoration: none;}
a:visited{color:black;text-decoration: none;}
a:hover{color:red;text-decoration: underline;font-size:30px;}
a:active{color:black;text-decoration: none;}/* 通常我们是这样写的：*/
a:link,a:visited{color:black;text-decoration: none;}
a:hover{color:red;text-decoration: underline;font-size:30px;}/* 或者：将所有的a标签的状态都修改成下面这样 */
a{color:black;text-decoration: none;}/* 当鼠标称上来的状态我们进行单独的修改 */
a:hover{color:red;text-decoration: underline;font-size:30px;}

注意：

1）:active 这个伪类现在已经不常用了。
2）hover状态必须写在最后
3）Link visited hover active

a.red:link class等于red的a元素

a.red:visited class等于red的a元素

a.red:active class等于red的a元素

a.red:hover class等于red的a元素

简化：

a.red:link, a.red:visited

a.red:hover

最精简：

.red

.red:hover

实例如下：

<style type="text/css">
.red
{
color:#666666;
text-decoration: none;
}
.red:hover
{
color:#ff3300;
text-decoration: underline;
}
</style>
<a href="# " class="red">我是超链接的文本</a>

E:focus 焦点

设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。

实例如下：

input:focus {background: #f6f6f6;color: #f60;border: 1px solid #f60;outline: none;}

E:after和E:before

E:after 选择器在被选元素的内容后面插入内容。

E:before 选择器在被选元素的内容前面插入内容。

通常使用 content 属性配合，来指定要插入的内容。

<style type="text/css">p:before{font-size: 18px;color: red;font-weight: bold;content: "以下是歌词：";}p:after{font-weight: bold;content: '----歌词结束了。';}</style><p>歌词的内容，歌词的内容，歌词的内容，歌词的内容，歌词的内容，歌词的内容，歌词的内容</p>

目标伪类选择器

目标伪类选择器“：target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI中某个标志符的目标元素。URI中的标识符通常会包含一个#号，后面带有一个标识符名称，例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的，:target伪类选择器选取链接的目标元素，然后供定义样式。

E:target { sRules }

div{background:#ccc;width:300px;height:100px;display:none;}
div:target{color:#f00;border:1px solid #f00;display:block;}Html:
<a href="#box1">网站首页1</a><a href="#box2">网站首页2</a><a href="#box3">网站首页3</a>
<div id="box1">内容1</div>
<div id="box2">内容2</div>
<div id="box3">内容3</div>

结构伪类选择器

结构伪类选择器可以根据元素在文档树中的某些特性（如相对位置）定位到它们。也就是，通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或类名的定义，帮助你保持代码干净和整洁。

否定伪类选择器

.demo li:not(:last-child) {border-bottom: 1px solid #ddd;
}

伪元素

CSS3中常见伪元素有“::first-letter”、“::first-line”、“::before”和“::after”，另外伪元素还增加了一个“::selection”。

老版本使用一个“：”显示，在新版本中双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。

::first-letter
“::first-letter”用来选择文本块的第一个字母。::first-line
“::first-line”用来匹配元素的第一行文本。::before和::after（重点中的重点）
“::before”和“::after”不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。::placeholder
::placeholder 伪元素用于控制表单输入框提示符的外观兼容语法：
input::-webkit-input-placeholder  // chrome
input:-ms-input-placeholder // IE10+
input:-moz-placeholder   // Firefox4-18
input::-moz-placeholder  // Firefox19+::selection
“::selection”是用来匹配鼠标选中的文本。

属性选择器

E1[attr]

选择具有attr属性的E1

示例：

/* 所有具有title属性的div标签 */
div[title] { color: blue; }

E1[attr=value]

选择具有attr属性且属性值等于value的E1

示例：

span[class=demo] { color: red; }

CSS的继承与优先级

CSS的继承特性

HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。

HTML中，<body>是其他元素的容器，是其他元素的最外层元素，所以<body>元素中定义的样式将影响其他所有元素的显示格式。

能被继承的CSS属性：

    文本相关的属性是继承的text-align、color、text-indent、font-family、font-sizefont-style、font-weight、 letter-spacing、word-spacingtext-transform、line-height等列表相关的属性是继承的list-style、 list-style-image、list-style-position、list-style-type

演示：

ul{
list-style-type: none;
}
/* 没有定义时内外层的列表都不显示符号 */
#inner li{
list-style-type: circle;
}<ul id="out">
<li>列表内容1</li>
<li>列表内容2</li><li>列表内容3</li><li>列表内容4</li><li>列表内容5</li><ul id="inner"><li>内层列表1</li><li>内层列表2</li><li>内层列表3</li><li>内层列表4</li></ul>
</ul>

CSS的优先级

CSS样式是有优先级的，遵循顺序：行内样式 > id选择器 > 类选择器 > 标签选择器在选择器优先级相同的情况下，我们参照就近原则选择器权值计算方法在css当中有多种选择器，它们的权值是不同的,总权值越高,优先显示.
权值算法:①　行内样式值为:1000
②　ID选择器为:100
③　类选择器为:10
④　标签和伪元素选择器为:1示例:
#mainbox .title p{}  权值为:111
#content .newsbox .title ul li  权值为:122

【重学前端】CSS（一）相关推荐

重学前端第一阶段完钢琴项目(document.querySelector js改变css样式的3种方式思路成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
【笔记】重学前端-winter
本文为:winter 发布在极客时间 [重学前端]系列课程的的笔记和总结支持正版哦: https://time.geekbang.org/col... 导语如果深入进去了解,你会发现,表面上看他们 ...
重学前端学习笔记（二十二）--选择器的机制
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端学习笔记（十三）--浏览器工作解析（三）
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端-总结：前言，从今天起，重新理解前端
前言大家好,最近在极客邦克购买一门重学前端的课程,在博客进行总结,将一些知识分享出来. 前端发展史:从青铜到黄金时代 2006 年开始,那会儿前端还处于史前的"青铜时代",甚至网 ...
47、那些你与“重学前端”的不解之缘
写在前面的话不知不觉,专栏已经更新了一半有余了.在两个月的时间里,我收到了很多同学的留言,很开心可以跟大家保持交流,也很惊喜见证了大家的成长. 在整个学习过程中,你有没有一些学习感悟呢,有哪些新的学 ...
重学前端-学习笔记-JavaScript对象
说明重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
判断字符串正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
重学前端学习笔记（八）--JavaScript中的原型和类
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...

【重学前端】CSS（一）