CSS3第一天笔记

CSS第一天

如同人类的的进化一样，CSS3 是CSS2 的“进化”版本， 在CSS2 基础上， 增强或新增了许多特性， 弥补了CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。 CSS3 的现状
1、浏览器支持程度差，需要添加私有前缀
2、移动端支持优于PC 端
3、不断改进中
4、应用相对广泛
如何对待
1、坚持渐进增强原则
2、考虑用户群体
3、遵照产品的方案
4、听Boss 的
统一环境
由于CSS3 兼容性问题的普遍存在，为了避免因兼容性带来的 干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说 明兼容性的问题。
1、Chrome 浏览器 version 46+
2、Firefox 浏览器 firefox 42+
如何使用手册
学会使用工具，可以让我们事半功倍。
[] 表示全部可选项 padding
|| 表示或者
| 表示多选一
？ 表示 0 个或者 1 个
* 表示 0 个或者多个
* {} 表示范围
* 学会查看手册，培养自主学习能力。
选择器
CSS3 新增了许多灵活查找元素的方法，极大的提高了查找元 素的效率和精准度。CSS3 选择器与jQuery 中所提供的绝大部分选 择器兼容。
属性选择器
其特点是通过属性来选择元素，具体有以下 5 种形式：
1、E[attr] 表示存在attr 属性即可； div[class]
2、E[attr=val] 表示属性值完全等于val； div[class=mydemo]
3、E[attr*=val] 表示的属性值里包含val 字符并且在 “任意”位置；div[class*=mydemo]
4、E[attr^=val] 表示的属性值里包含val 字符并且在 “开始”位置； div[class^=mydemo]
5、E[attr$=val]表示的属性值里包含val字符并且在“结束”位置；div[class$=demos]
伪类选择器
E:nth-child(n) 第n 个子元素，计算方法是E 元素的全部兄弟元素；
div>ul>li:nth-child(3){
color: deeppink;
}
第三个元素
E nth-last-child(n) 同E nth-child(n) 相似，只是倒着计算；
div>ul>li:last-child(2){
color: deeppink;
除了以前学过的:link、:active、:visited、:hover，CSS3 又新增了其它的伪类选择器。
1、以某元素相对于其父元素或兄弟元素的位置来获取无素的 结构伪类。重点理解通过E 来确定元素的父元素。
E:first-child 第一个子元素
E:last-child 最后一个子元素
}
n 遵循线性变化，其取值 0、1、2、3、4、… 但是当 n<=0 时，选取无效。选中所有的奇数的li
li:nth-child(2n-1){ color: red;}
选中所有的 7 的倍数的li
li:nth-child(7n){ color: red;}
选中前面五个
li:nth-child(-1n+5){ color: red;}
选中后面五个
li:nth-last-child(-1n+5){ color: red;}
所有的偶数
li:nth-child(even){ color:red}
所有的奇数
li:nth-child(odd){ color:blue;}
n 可是多种形式：nth-child(2n)、nth-child(2n+1)、 nth-child(-1n+5)等；
E:empty 选中没有任何子节点的E 元素；（使用不是非 常广泛） 没有任何的子元素，包括空格.
2、目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被 选中；

<li><a href="#title1">CSS (层叠样式表)</a></li>
 <h2 id="title1">CSS (层叠样式表)</h2> 
 h2:target{color:red;}
  伪元素选择器 重点：E::before、E::after 是一个行内元素，需要转换成块元素
 E:after、E:before 在旧版本里是伪类，在新版本里是 伪元素，新版本下 

E:after、E:before 会被自动识别为E::after、 E::before，按伪元素来对待，这样做的目的是用来做兼容处 理。
E:after、E:before 后面的练习中会反复用到，目前只 需要有个大致了解
E::first-letter 文本的第一个字母或字（如中文、日 文、韩文等）；
案例：首字下沉
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
":" 与 “::” 区别在于区分伪类和伪元素关于before 和after
CSS2 中 E:before 或者E:after，是属于伪类的，并且 没有伪元素的概念
CSS3 中 提出伪元素的概念 E::before 和E::after，并 且归属到了伪元素当中，伪类里就不再存在E:before 或者 E:after 伪类;
Red、Green、Blue、Alpha 即RGBA
Hue、Saturation、Lightness、Alpha 即HSLA
R、G、B 取值范围 0~255
H 色调 取值范围 0~360，0/360 表示红色、120 表示绿色、
240 表示蓝色 S 饱和度 取值范围 0%~100%
L 亮度 取值范围 0%~100%
A 透明度 取值范围 0~1
关于透明度：
1:opacity 设置透明度，只能针对整个盒子设置透明度. 2:子盒子会继承父盒子的透明度.

 .out{width: 200px; height: 200px; background: green;
  border: 1px solid darkgreen; margin: 40px auto;
   opacity: 0.3;
    }

子盒子也出现透明

 .out .inner{ 
 width: 100px; height: 100px; 
 background-color: yellow;
  }

3:background-color: transparent; 完全透明，不可调节透 明度.
4:使用rgba 来控制颜色，相对opacity ，不具有继承性.
文本 (shadow 阴影)
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明 度）。
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值； 代码演示：
/* 3px 水平偏移量. 正值向右 负值向左*/
/* 5px 水垂直偏移量. 正值向下 负值向上*/
/* 5px 模糊度 模糊度不能为负值 值越大越模糊*/
/* #ccc 设置对象阴影的颜色. 可以有多个影子.

ul>li{
margin: 20px;
font-size: 24px;
}
ul>li:nth-child(1){
        text-shadow: 5px 5px 2px #ccc;
 }
ul>li:nth-child(2) {
text-shadow: -5px -5px 2px #ccc;
}
ul>li:nth-child(3){
      text-shadow: 5px 5px 2px #ccc, -5px -5px 2px
      #ccc;
      }

案例：


效果图·

给图片添加阴影

效果图

浮雕文字.
/设置背景色
./ body {
background-color: gray;
font: bold 6em “microsoft yahei”;
}
div {
margin: 30px;
color: #808080; text-align: center; }
/*设置水平向左 1px 向上 1 px 向右 1px 向下 1px */

.to{
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; 
}
.ao{
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; 
}

效果图·

盒模型 CSS3 中可以通过box-sizing 来指定盒模型，即可指定为 content-box、border-box， 这样我们计算盒子大小的方式就发生了改变。
box-sizing 有两个值:content-box border-box 可以分成两种情况：
content-box:对象的实际宽度等于设置的width 值和border、
padding 之和
border-box： 对象的实际宽度就等于设置的width 值，即使定义有
border 和padding 也不会改变对象的实际宽度，即 ( Element width = width ) 我 们把这种方式叫做盒模型 兼容性比较好