CSS基础知识

CSS基础知识

一.CSS选择器有几种- 元素选择器

• 类选择器
• id选择器
• 属性选择器（为带有 title 属性的所有元素设置样式[title]{color:red;}）
• 后代选择器（h1 p）
• 相邻后代选择器 （ul>li）
  匹配所有 ul元素中的第一个 li 元素：
• 兄弟选择器（li~a）
• 相邻兄弟选择器（li+a）
• 伪类选择器（a:hover,p:first-child）
  li:first-child表示第一个子元素的所有 p 元素
  注意：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素
• 伪元素选择器（：：befor、：：after）
• 通配符选择器（*）CSS的display属性

CSS的display属性
规定元素应该生成的框的类型；几个常用的值（具体见w3cshool官网）

none ：此元素不会被显示
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：
默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素
inherit：规定应该从父元素继承 display 属性的值。

DOM display属性设置的语法
Object.style.display=value（value的值同上属性的值）

CSS伪类
向某些选择器添加特殊的效果

:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式
:lang 向带有指定 lang 属性的元素添加样式。

CSS伪元素

:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

伪类与伪元素的区别

• css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句
  话中的第一个字母，或者是列表中的第一个元素。
• 伪类一般匹配的是元素的一些特殊状态，如hover、link等，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。
• 伪元素一般匹配的特殊的位置，比如after、before等；用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
• 有时伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

二.CSS3

CSS3 被划分为模块，其中最重要的 CSS3 模块包括：
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

下文列举对应模块常用的一些属性，不代表全部

CSS3边框

• 能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框
  border-radius 设置所有四个 border-xxx-radius 属性的简写属性
  box-shadow 向方框添加一个或多个阴影
  border-image 设置所有 border-image-xxx属性的简写属性

CSS背景

• 包含多个新的背景属性
  background-size 属性规定背景图片的尺寸

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
列：background-size:63px 100px
background-size:40% 100%

background-origin 属性规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域

background-origin:content-box

文本效果
text-shadow 可向文本应用阴影，能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

text-shadow: 5px 5px 5px #FF0000

word-wrapword-wrap 允许对长的不可分割的单词进行分割并换行到下一行

word-wrap:break-word字体

CSS3 @font-face 规则
可以使用任何喜欢的字体，把字体下载到计算机上，再引用

@font-face
{
font-family: myFirstFont;  //定义的字体的名字
src: url('xxxx.ttf'),
     url('xxxx.eot'); 
div
{
font-family:myFirstFont;  //使用
}

CSS3转换-2D

• translate() 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素

• rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

值 rotate(30deg) 把元素顺时针旋转 30 度

• scale() 通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍

• skew() 通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

• matrix() matrix() 方法把所有 2D 转换方法组合在一起;需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素

transform:matrix(0.866,0.5,-0.5,0.866,0,0)

transform 用于向元素应用2D和3D转换，每一个使用的方法前都需要添加

CSS3转换-3D

• rotateX() 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

transform: rotateX(120deg) //绕其 X 轴旋转120度

• rotateY() 通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

transform: rotateY(130deg) //绕其 Y 轴旋转130度

CSS3过渡
是元素从一种样式逐渐改变为另一种的效果
要实现这一点，必须规定两项内容：一规定希望把效果添加到哪个 CSS 属性上；二规定效果的时长（如果时长未规定，则不会有过渡效果，因为默认值是 0）
可以定义多项过渡，transition中使用逗号分隔即可

transition: width 2s  //应用于宽度属性的过渡效果，时长为 2 秒

div:hover  //规定当鼠标指针悬浮于 <div> 元素上时实现width的过渡效果
{
width:300px;
}

CSS动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

可以改变任意多的样式任意多的次数。
1.用百分比来规定变化发生的时间,等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
2.或用关键词 “from” 和 “to”，

@keyframes myfirst
{
from {background: red;}  //0%   {background: red;}
to {background: yellow;}  //100% {background: yellow;}
}
---------------------
div  ///将myfirst 绑定到div元素上
{
animation: myfirst 5s;
}

CSS3多列
能够创建多个列来对文本进行布局
column-count 属性规定元素应该被分隔的列数

div{
column-count:3  //把 div 元素中的文本分隔为三列
}

column-gap 属性规定列之间的间隔

div{
column-gap:40px //规定列之间 40 像素的间隔
}

column-rule 属性设置列之间的宽度、样式和颜色规则

div{
column-rule:3px outset #ff0000
}

CSS3用户界面
resize 属性规定是否可由用户调整元素尺寸

div
{
resize:both;  //规定 div 元素可由用户调整大小
overflow:auto;
}

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容

div
{
box-sizing:border-box; ///规定两个并排的带边框方框
}

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

div
{
outline:2px solid red;
outline-offset:15px;  ///规定边框边缘之外 15 像素处的轮廓
}