CSS3学习笔记（很详细）

一、CSS3简述

web发展历史

• ajax在当前页面加载数据
• HTML5 更新了部分方法和标签
• CSS3 3是版本号 是CSS2的升级版

css3兼容

• blink内核 大部分国产浏览器最新版
• -webkit-兼容Chrome和Safari （以chorme浏览器为主）
• -moz-兼容Firefox
• -ms-兼容IE
• -o-兼容opera

css3新增选择器

二、 选择器

1.元素选择器

• 通配选择器 * 选定所有对象 eg：给所有对象的颜色设置为红色

*{
	color:red;
}

• 类型选择器E 选定特定类型的元素

p{
 font-size:20px;
 }

• ID选择器 E#id 选择具有id属性且值为attr的元素

p#content{
	dont-size=20px;
	}
<p id="content">正文</p>

• 类选择器 E.class

.title {
	font-size: 20px;
}
<h1 class="title">标题</h1>

• 多类选择器

.content.note {
	font-size: 30px;
}
<p class="content note">多类选择符的使用</p>

2.关系选择器

• 相邻选择符 E+F

 .list + li {
      color: red;
      }

• 兄弟选择符 E~F

.list ~ li {
      background: blue;
      }

• 包含选择符 E F

.list li {
      background: blue;
      }

• 子类选择符 E>F

.list > li {
      background: blue;
      }

3.属性选择器

• E[attr]E 元素 attr属性

li[name]{
      color: blue;

• E[attr=‘val’] 选择带有attr属性并且值为val的元素

li[name='aa']{
      color: brown;
    }

• E[attr~=‘val’]选择具有attr属性并且属性的值符合val的元素

li[class~='aa']{
      color: pink;
    }

• E[attr^=‘val’]选择具有attr属性并且属性值以val开头的元素

li[class^='aa']{
      color: red;
    }

• E[attr$=‘val’]选择具有attr属性并且属性值以val结尾的元素，属性有多个值，要求最后一个属性值以val截止

li[class$='a']{
      color: brown;
    }

• E[attr*=‘val’]选择带有attr属性并且属性值里包含val的元素

li[class*='a']{
      color: cadetblue;
    }

• E[attr|=‘val’]选择必须以attr开头，或者以attr开头的并且用连接符-隔开的元素eg. attr-xxx

li[class|='aa']{
      color: coral;
    } 

4.伪类选择器

• E:focus 当元素获取焦点时的样式

input:focus{
      background: pink;
    }

• E:not(s) 选中E中不含有s选择器的元素

li:not(.list){
      background: coral;
    }

• E:first-child 选中E 要求：E需要有一个父元素，并且E是父元素的第一个子元素 应用举例：给所有元素加上边框 去掉以一个元素的上边框

 li:first-child{
      background: coral;
    } 

• E:last-child 选中E 要求：E需要有一个父元素，并且E是父元素的最后一个子元素

li:last-child{
      background: peru;
    }

• E:only-child 选中E 要求： E是父元素中的唯一子元素

li:only-child{
      background: red;
}

• E:nth-child(n) 选择父元素中第n个子元素 选中奇数元素 (2n-1) 选中偶数(2n)

	li:nth-child(2n){
      color: blue;
    }
    li:nth-child(2n-1){
      color: peru;
    } 

• E:nth-last-child(n) 选择父元素中倒数第n个子元素

li:nth-last-child(1){
      background: pink;
    } 

• E:first-of-type 找到父元素中第一个E 元素

p:first-of-type{
      color: red;
    } 

• E:last-of-type 找到父元素中最后一个E 元素

p:last-of-type{
      color: blue;
    }

• E:only-of-type 找到父元素中唯一这种类型的元素

span:only-of-type{
      color: red;
    }

• E:nth-of-type 找到父元素中第n个该类型的元素

span:nth-of-type{
      color: red;
    }

• E:empty 查找空的E元素

div:empty{
      width: 200px;
      height: 200px;
      background: red;
    } 

• E:checked 用于表单元素被选中时的样式 仅用于单选框radio复选框checkbox disabled 该选项不可修改

input:checked + span{
      background: red;
    }

• E:enabled 可以修改的元素

input:enabled{
      background: red;
    }

• E:disabled 不可以修改的元素

input:disabled{
      background: red;
    }

5.伪元素选择器

• 用途 购物网站300元 的yuan
• E::after 在E 中插入最后一个子元素| content 设置元素内容| display 设置元素展示样式

div::after{
     . /* content 元素内容 */
      /* content: '元'; */
      /* 设置元素展示方式 */
      /* display: inline-block; */
      /* font-size: 12px; */
      /* color: red; */
    }

• E::before 在E 的开头加入一个元素 |content设置元素内容| display 设置元素展示样式

div::before{
      content: '¥';
      display: inline;
      color: blue;
    }

• E::placeholder 表单中默认文案的样式 eg请输入用户名

input::placeholder{
      color: pink;
    }

• E::selection 设置对象被选中时的样式 仅包含background-color\color\text-shadow

div::selection{
      background: yellow;
      color: violet;
    }

p::selection{background:#000;color:#f00;}
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>

三、字体与颜色

网络字体

• @font-face

单行文本溢出隐藏

• 强制所有文本在一行显示
• white-space:nowrap;
• 溢出隐藏
• overflow: hidden;
• 文本溢出显示…
• text-overflow:ellipsis

overflow

• overflow:hidden;溢出隐藏

white-space

• white-space:pre-line 与normal的值一致，但会保留文本输入使得换行
• white-space:pre 保留输入时的空格回车换行
• white-space:pre-wraper保留输入时的空格 回车换行 超出边界会换行显示
• white-space:nowrap强制文本一行显示

text-overflow

• 文本超出边界时的剪裁方式 需要配合white-space和overflow一起使用
• text-overflow:clip 剪裁
• text-overflow:ellipsis 显示…

text-shadow

• 给文字加阴影
• 第一个值：水平位置偏移程度 负数左移 正数右移
• 第二个值：垂直位置偏移程度 负数上移 正数下移
• 第三个值：阴影模糊程度 只能是正数 数值越大 阴影程度越大
• 第四个值：阴影颜色

colorname

• color:red;
• back-ground:blue;
• transparent透明

HEX

• #000000 黑
• #ffffff 白

RGB

• red green blue
• 0-255

RGBA

• red green blue alpha(透明度)
• RGB数值范围：0-255
• A数值范围：0-1
• background-color:rgba(0,0,255,0.5)

兄弟萌，觉得有用就点个赞叭