W3C3剑客—CSS
万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
CSS3 作为变现层，其威力堪比整容。
未加样式和加了样式做对比，淘宝：
加上样式后
1.CSS该如何学习？
css的3种引入方式
CSS的选择器
CSS的基本样式
CSS几种布局方式
CSS响应式
网页动画（专业的必修，非专业的了解）
1.1什么是CSS？
Cascading Style Sheets （层叠样式表）
CSS2 W3C组织于1998年推出的技术规范
CSS3 早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块
1.2CSS如何使用
行内式引入，通过Style属性(不推荐使用，结构与表现高度耦合难以维护)
CSS行内式演示
1
通过内部式Style引入
123456
外部样式表引入（推荐使用，结构与表现低耦合，方便维护）
1
在html中的位置一览
CSS行内式演示
1234567891011121314151617181920
样式优先级，html从上往下加载，后边的样式会覆盖先前的样式，样式变现为就近原则。
除此之外还可以在Style内通过import导入，CSS2.1特有，使用较少，可以和link进行 替换
2.CSS选择器
标签选择器
层次选择器
id选择器（重点）
类选择器（重点）
伪类选择器（爱恨原则）
属性选择器（重点）
2.1标签选择器
标签选择器可以快速定位到html中的某一类标签。
123456789101112131415
2.2 id选择器(重点)
id 选择器，通过标签的id属性快速定位，一般id就是元素的标识，是唯一的
这是一行文字
1234567891011121314151617181920212223242526
2.3 类选择器（重点）
类选择器，通过标签的class属性进行定位，一般class属性可以付给多个元素，同一个元素也可以有多个class值
我是p1
我是p2
1234567891011121314151617181920212223242526272829303132
2.4 层次选择器
层次选择器，通过父元素来定位子元素
- 1
- 2
- 3
- 4
- 5
这是外边的span
这是p的子元素span
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
2.5 伪类选择器
伪类选择器，并不是真正的选择器，而是在原来选择器的基础上进行更精准，状态不同时的元素变化的定位，常用于超链接，表单等。（爱恨原则）
- 1
- 2
- 3
- 4
- 这是超链接
- 6
- 7
- 8
- 9
- 10
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
2.6属性选择器（重点）
通过属性或属性值来定位
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
3.文本常用样式
颜色
背景颜色
字体
字号
行距
字间距
缩进
行宽度，高度
水平对齐
阴影等
更多其他
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
12345678910111213141516171819202122232425262728293031323334353637383940414243
4.列表与链接常用样式
爱恨原则
取消下划线
列表取消默认样式
父元素li加样式
更多
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
5.背景图像应用与渐变
背景图片
1234567891011121314151617181920212223242526272829303132333435
颜色渐变
专业详细
调色渐变网站效率copy
调色渐变网站效率copy2
6.盒子模型
margin：外边距（往外挤）
boder：边框(内外边界)
padding：内边距（往里边挤）
账号
密码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
元素占用宽度 = margin+border+padding+内容宽度
6.2.圆角边框
border-radius: 0 0 0 0 ; (分别对应四个角)
border-radius: 100 ; (如果只设置一个直接作用于四个角)
border-radius: 100 50 ;（如果只设置两个则分别对应 左上右下 右上左下）
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
实际应用案例
圆形头像
123456789101112131415161718
6.3 盒子阴影
1234567891011121314151617181920
7.浮动
行内元素 (宽度由内容撑开,不会独占一行)
块元素 (宽高由内容撑开，可以设置宽高，独占一行)
行内块级元素(不会独占一行的块级元素)
12345678910111213141516171819202122232425262728293031323334353637383940414243
左、右浮动与清除浮动
我是box盒子，我是非浮动的
1、南方的八月间，骄阳似火。中午时分，太阳把树叶都晒得卷缩起来。知了扯着长声聒个不停，给闷热的天气更添上一层烦燥。
1234567891011121314151617181920212223242526272829303132333435363738
父级元素塌陷问题
解决方法：
给腹肌元素增加一个height
再套一个空的div，并清除该盒子的浮动或者加一个伪类元素after，before
如果出现内容超出边界的问题，可以使用样式 overflow: scroll; 设置为滚动条
1
2
3
4
5
6
7
8
9
10
11
12
1、南方的八月间，骄阳似火。中午时分，太阳把树叶都晒得卷缩起来。知了扯着长声聒个不停，给闷热的天气更添上一层烦燥。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
8.定位
8.1相对定位
position: relative; 基于原来的位置进行定位
top: -20px; left: 10px;right: 20px;bottom: -50px;
相对定位不会脱离标准文档流，原来位置保留
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
8.2绝对定位
基于xxx进行定位
position: absolute; 不在标准文档流中，原来位置会丢失
如果父元素没有定位则会相对于浏览器进行定位，所以一般我们把父元素设置为相对定位（子绝父相）
123456789101112131415161718192021222324252627282930313233343536
8.3固定定位
固定定位会一直定在浏览器的某一个地方
position: fixed; /固定定位/
123456789101112131415161718192021222324252627282930313233
9.Z-index与透明
z-index类似于PS中的图层
越是底层数字越小，层级向上层数字逐次增加
透明度设置(opacity)属性
还可以通过rgb的第四个参数来实现透明度
Java
1234567891011121314151617181920212223242526272829303132333435363738
10.CSS动画
插好眼了可以传送
CSS原生动画虽然可以实现，但是实现起来比较复杂，我们完全可以用JavaScript代替，但是CSS的效率会更高。
甚至一些3D动画，用JavaScript难以实现。