CSS3知识点精学

CSS3 被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要 CSS3 模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

---

 css引入方式

内嵌式：CSS写在style标签中，style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中。

外联式：CSS写在一个单独的.css文件中，需要通过link标签在网页中引入。通常经常需要重复使用的样式就可以分离出来，在不同页面种通过link标签引入避免耦合。我的习惯是先写在html文件中，页面写完之后再把css部分分离出来，看起来会比较整洁。

行内式：CSS写在标签的style属性中 

行内式：CSS写在标签的style属性中

---

html页面中字体也是可以设置的

常见字体系列

例如：

---

 文本水平对齐方式

属性名：text-align

取值：

注意：如果需要让文本水平居中，text-align属性给文本所在标签 （文本的父元素）设置

水平居中方法总结：

text-align:center

---

标签水平居中方法 margin：0 auto

如果需要让div、p、h（大盒子）水平居中？

        可以通过margin：0 auto；实现

注意：1.如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

           2.margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的跨度

注意区分：margin：0 auto 是让标签居中，text-align：center；是让内容居中。

---

选择器进阶

• 复合选择器
• 并集选择器
• 交集选择器
• hover伪类选择器
• Emmet语法

1.1后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2 {css}

 结果：在选择器1所找到标签的后代（儿子，孙子，重孙子...）中，找到满足选择器2的表情，设置样式

注意：

        1.后代包括：儿子，孙子，重孙子...

        2.后代选择器中，选择器与选择器之间通过空格隔开

eg：目标是给div内部的p标签设置css样式

操作：

1.2子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1 > 选择器2 {css}

 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的表情，设置样式

注意：

        1.子代只包括：儿子

        2.子代选择器中，选择器与选择器之间通过 > 隔开

eg:目标是给div中的a设置css样式，div中的p中的a不改变样式

 操作：

2.1并集选择器：，

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1 ，选择器2 {css}

 结果：找到 选择器1 和选择器2 选中的标签，设置样式

注意：

        1.并集选择器中的每组选择器之间通过，分隔

        2.并集选择器中的每组选择器可以是基础选择器或复合选择器

        3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

eg：目标是把以下标签都设置相同的css样式

操作： 或

3.1交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2 {css}

 结果：（既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式

注意：

        1.交集选择器中的选择器之间是紧挨着的，没有东西分割

        2.并集选择器中如果有标签选择器，标签选择器必须写在最前面

eg：目标是把既是p标签，又是class=“box”的标签设置css样式

 

操作：

 4.1hover伪类选择器

 作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器:hover {css}

注意：

        1.伪类选择器选中的元素的某种状态

eg：目标是当鼠标悬停在下面这个a标签上时显示指定css样式

操作：

 （任何标签都可以添加伪类，任何一个标签都可以鼠标悬停）

5.1Emmet语法

作用：通过简写语法+回车，快速生成代码

语法：

• 类似于刚刚学习的选择器的写法

 包括css样式也有很多简写的方法，比如想设置宽度400px，本来我们是要写width：400px，我们可以直接 w400+回车；还可以w400+h400+bgc：red+回车得到

快捷生成以下代码：

只需要手动写 a{导航$}*5 + 回车 即可 

---

 背景相关属性

• 背景颜色
• 背景图片
• 背景平铺
• 背景位置
• 背景相关属性连写

1.1背景颜色

属性名: background-color (bgc) //括号内为快捷写法

属性值:

•         颜色取值:关键字、rgb表示法、rgba表示法、十六进制......

注意点:

• 背景颜色默认值是透明: rgba(O,0,0,0). transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

 可以借助颜色生成网站，构造更复杂的渐变色

ColorSpace - CSS Gradient Color Generator (mycolor.space)

 2.1背景图片

 背景图的好处之一是可以在图片上写文字。

2.3背景平铺

属性名：background-repeat（bgr）

属性值：

2.4背景位置

属性名：background-position（bgp）

注意：方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

 图片位置的写法也与之类似，是设置position属性，拿我自己项目里登录页面四个角的图片装饰举例：

5.1背景相关属性连写

例如：

区分img标签和背景图片 

一般来说 重要的图片使用img标签，装饰性的图片使用背景图片。

---

元素显示模式 （IMPORTANT！）

——块级元素

——行内元素

——行内块元素

——元素显示模式转换

1。块级元素

显示特点：

        1.独占一行（一行只能显示一个）

        2.宽度默认是父元素的宽度，高度默认由内容撑开

        3.可以设置宽高

代表标签：

• div、p、h系列、ul、li、dl、dd、dt、form、header、nav、footer......

2。行内元素

显示特点：

        1.一行可以显示多个

        2.宽度和高度默认由内容撑开,尺寸和内容的大小是相同的

        3.不可以设置宽高

代表标签：

•  a、span、b、u、i、s、strong、ins、em、del......

3。行内块元素

显示特点：

        1.一行可以显示多个

        3.可以设置宽高

代表标签：

• input、textarea、button、select......
• 特殊情况：iimg标签由行内块元素特点，但是Chrome调试工具中显示结果是inline

4。元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

 比如常见的 ，我们有时候需要两个div块并列放置，就可以通过设置display：inline-block转换成行内块元素，实现效果

 

 我们也可以再转为行内块

 效果就会变成

 再来一个：span（行内元素）转行内块

 效果变为：

如果是转为块级元素

 效果为：

 总结

 注意：

---

CSS特性

1.继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性（文字控制属性都可以继承，不是控制文字的都不能继承）

1.color

2.font-style、font-weight、font-size、font-family

3.text-indent、text-align

4.line-height

5. ......

注意：可以通过调试工具判断是否可以继承

eg：

设置css样式：

（调试工具中会写明来源，这里的inherited from div 是选中span这一行显示的字段，就是说 继承自div的css样式） 

效果是div中的文字，和div中的span内的文字都会变成红色

这样子这里就体现了css样式的继承性 

（再次提示：文字控制属性都可以继承，不是控制文字的都不能继承）

继承失效的情况：

如果元素有浏览器默认样式，此时继承性仍然存在，但是会优先显示浏览器默认的样式。

黑色是默认的，会优先继承父级的，但如果自己有设置样式，就会优先自己的样式

就比如div中的a标签，不会继承div的颜色样式；div中的h1标签，不会继承div的字体大小样式

2.层叠性

特性：

        1.给同一个标签设置不同的样式 -》 此时样式会层叠叠加 -》 会沟通作用再标签上

        2.给同一个标签设置相同的样式 -》 此时样式会层叠覆盖 - 》 最终写在最后的样式会生效

注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

---

案例：实现一个导航效果

且悬停时背景变为橙色 

思路是：1.首先 导航需要进行页面跳转，即由a标签来实现； 

               2.取消a标签子代下划线，标签宽度100px，高度50px；

               3.会发现高度50px设置无效，是因为a标签是行内元素，所以要使高度可设置，且能够并列展示a标签，需要将a标签转换成行内块元素，即设置display：inline-block；

                4.文字颜色默认为黑色，需要设置文字颜色为白色；

                5.设置文字水平和垂直居中，水平居中即设置a标签内容居中，用text-align：center（快捷键是tac+回车，非常方便），水平居中则是通过设置行内高度为标签高度一致50px来实现，即添加属性line-height：50px；

                 6.最后还有一个悬停效果，a:hover{设置背景颜色为橙色}

代码实现就是以下：

这样子就实现了一个简单的导航，学会了css之后实现起来其实非常简单。