秋季的blog

css选择器

通用选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距。

* {
    margin: 0 auto; 设置一个元素所有外边距的宽度
    padding: 0; 内边距
}

标签选择器

标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签。

1
2
3

p {
    color: blue;
}

ID选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号#，后面紧跟 ID 属性的值。

1
2
3

#nav {
    color: red;
}

类选择器

根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值。

.black {
    color: black;
}
p.black {
    color: black;
}

.info {
    font-weight:bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}
多类选择器

后代选择器

1
2
3

ul li a {
    text-decoration: none;
}

background 背景

background-color

设置元素的背景颜色；

值	描述
color_name	使用具体颜色名称为元素设置背景颜色（例如 red）
hex_number	使用十六进制码为元素设置背景颜色（例如 #ff0000）
rgb_number	使用 rgb() 函数为元素设置背景颜色（例如 rgb(255,0,0)）
transparent	默认值，设置背景颜色为透明，大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色，或者不希望用户对浏览器的设置（比如开启夜间模式、护眼模式）影响到您的设计，那么就可以使用 transparent 来将颜色设置为透明的
inherit	从父元素继承对背景颜色的设置

background-image

设置元素的背景图像；

值	描述
url(‘URL’)	指向图像的路径，可以将 url() 看作是一个函数，括号中的 URL 为图像的具体路径
none	默认值，不显示背景图像
inherit	从父元素继承背景图像的设置

background-repeat

控制背景图像是否重复；

值	描述
repeat	默认值，背景图像将在垂直方向和水平方向上重复
repeat-x	背景图像仅在水平方向上重复
repeat-y	背景图像仅在垂直方向上重复
no-repeat	背景图像仅显示一次，不在任何方向上重复
inherit	从父元素继承 background-repeat 属性的设置

background-attachment

控制背景图像是否跟随窗口滚动；

值	描述
scroll	默认值，背景图像随着页面元素的滚动而移动
fixed	当页面的其余部分滚动时，背景图像固定不动
inherit	从父元素继承 background-attachment 属性的设置

background-size

设置背景图像的尺寸；

值	描述
xpos ypos	使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
x% y%	使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
cover	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示
contain	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域

background-position

设置背景图像的起始位置

值	描述
left top（左上）、 left center（左中）、 left bottom（左下）、 right top（右上）、 right center（右中）、 right bottom（右下）、 center top（中上）、 center center（居中）、 center bottom（中下）	使用一些关键词表示背景图像的位置，如果您仅设置第一个关键词，那么第二个将默认为 center
x% y%	使用百分比表示背景图像距离元素左上角的距离，x% 为水平方向，y% 为垂直方向，左上角为 0% 0%，右下角是 100% 100%，如果您仅设置第一个值，那么另一个值将是 50%，默认值为 0% 0%
xpos ypos	使用像素（px）或者其它 CSS 单位表示背景图像距离元素左上角的距离，xpos 为水平方向，ypos 为垂直方向，左上角为 0px 0px，右下角视元素的尺寸而定，百分比和单位的形式可以混用，如果您仅设置第一个值，那么另一个值将默认为 50%

CSS字体样式（font）

font-family：设置字体；
font-style：设置字体的风格，例如倾斜、斜体等；
font-weight：设置字体粗细；
font-size：设置字体尺寸；
font-variant：将小写字母转换为小型大写字母；
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
font：字体属性的缩写，可以在一个声明中设置多个字体属性。

CSS文本格式化

text-align：设置文本的水平对齐方式；
text-decoration：设置文本的装饰；
text-transform：设置文本中英文的大小写转换方式；
text-indent：设置文本的缩进方式；
line-height：设置行高；
letter-spacing：设置字符间距；
word-spacing：设置单词与单词之间的间距（对中文无效）；
text-shadow：设置文本阴影；
vertical-align：设置文本的垂直对齐方式；
white-space：设置文本中空白的处理方式；
direction：设置文本方向。

css链接

链接有四种不同的状态，分别是 link、visited、active 和 hover。

可以通过以下伪类选择器来为链接的四种状态设置不同的样式：

:link：定义普通或未访问链接的样式；
:visited：定义已经访问过链接的样式；
:hover：定义当鼠标经过或悬停在链接上时的样式；
:active：定义点击链接时的样式。

边框

CSS 中的边框是围绕着元素内容和内边距的一条或多条线段，您可以自定义这些线段的样式、宽度以及颜色。您可以通过下面几个属性分别定义边框的样式、宽度和颜色：

border-style：设置边框的样式，例如实线、虚线等；
border-width：设置边框的宽度（厚度）；
border-color：设置边框的颜色；
border：上面三个边框属性的缩写。

列表

CSS 中也提供了几种专门用来设置和格式化列表的属性，如下所示：

list-style-type：设置列表项前面标记的形状（外观）；
list-style-position：设置标记和列表中文本之间的距离；
list-style-image：使用图像代替默认的标记；
list-style：统一设置上面的三个属性。

响应式布局

要实现响应式布局，常用的方式有以下几种：

使用 CSS 中的媒体查询（最简单）；
使用 JavaScript（使用成本比较高）；
使用第三方开源框架（例如 bootstrap，可以很好的支持各种浏览器）。

CSS resize（调整元素大小）

该属性允许用户通过拖动的方式来自由缩放元素的尺寸。

语法说明如下：

none：用户无法调整元素的尺寸；
both：用户可调整元素的高度和宽度；
horizontal：用户可调整元素的宽度；
vertical：用户可调整元素的高度。

在使用 resize 属性时还需要注意以下几点：

单独设置 resize 属性是无效的，resize 属性需要与 overflow 属性结合使用才有效，并且 overflow 属性的值需要设置为 auto、hidden 或 scroll；
并不是所有的元素都可以设置 resize 属性，比如 img 和 table 属性就没办法使用 resize 属性。

<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            border: 1px solid;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>通过 resize 属性您可以调整元素在水平和垂直方向的大小</div>
</body>
</html>

CSS flex布局（弹性布局/弹性盒子）

可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。

1) flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

值	描述
row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

2) flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

值	描述
nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

3) justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

4) align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

5) order

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下：

1	order: number;

其中 number 就是项目在容器中的位置，默认值为 0。

CSS box-sizing：改变盒子模型

box-sizing 属性来改变默认的盒子模型，通过 box-sizing 属性可以将元素的内边距和外边距在元素内容区内绘制，以使元素呈现的宽度和高度与设置的宽度和高度相同。

box-sizing 属性的可选值如下：

值	描述
content-box	默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box	在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度
inherit	从父元素继承 box-sizing 属性的值。

CSS column（多列布局）

CSS3 中提供了一系列实现多列布局的属性，如下表所示：

属性	说明
column-count	指定元素应该分为几列
column-fill	指定如何填充每个列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写形式
column-rule-color	指定列与列之间边框的颜色
column-rule-style	指定列与列之间边框的样式
column-rule-width	指定列与列之间边框的宽度
column-span	指定元素应该横跨多少列
column-width	指定列的宽度
columns	column-width 与 column-count 属性的简写属性

CSS transition（过渡效果）

可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画。

CSS 中提供了 5 个有关过渡的属性，如下所示：

transition-property：设置元素中参与过渡的属性；
transition-duration：设置元素过渡的持续时间；
transition-timing-function：设置元素过渡的动画类型；
transition-delay：设置过渡效果延迟的时间，默认为 0；
transition：简写属性，用于同时设置上面的四个过渡属性。

要成功实现过渡效果，必须定义以下两项内容：

元素中参数与过渡效果的属性；
过渡效果持续的时间。

transition-property

transition-property 属性用来设置元素中参与过渡的属性名称，语法格式如下：

transition-property: none | all | property;

参数说明如下：

none：表示没有属性参与过渡效果；
all：表示所有属性都参与过渡效果；
property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

CSS动画（animation）

@keyframes 规则

要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下：

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
// 或者
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

语法说明如下：

animationName：表示动画的名称；
from：定义动画的开头，相当于 0%；
percentage：定义动画的各个阶段，为百分比值，可以添加多个；
to：定义动画的结尾，相当于 100%；
properties：不同的样式属性名称，例如 color、left、width 等等。

@keyframes ball {
    0% { top: 0px; left: 0px;}
    25% { top: 0px; left: 350px;}
    50% { top: 200px; left: 350px;}
    75% { top: 200px; left: 0px;}
    100% { top: 0px; left: 0px;} 
}

要将动画应用到指定的 HTML 元素需要借助 CSS 属性，CSS 中提供了如下所示的动画属性：

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

animation-name

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes ball {
            0% { top: 0px; left: 0px;}
            25% { top: 0px; left: 350px;}
            50% { top: 200px; left: 350px;}
            75% { top: 200px; left: 0px;}
            100% { top: 0px; left: 0px;} 
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
            animation-name: ball;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注意：要想让动画成功播放，您还需要定义 animation-duration 属性，否则会因为 animation-duration 属性的默认值为 0，导致动画并不会播放。

CSS阴影效果

1. text-shadow

使用 CSS 的 text-shadow 属性我们可以为文本设置阴影效果，属性的语法格式如下：

1	text-shadow: offset-x offset-y blur color;

语法说明如下：

offset-x：必填参数，设置阴影的水平偏移量，可以为负值；
offset-y：必填参数，设置阴影的垂直偏移量，可以为负值；
blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
color：可选参数，设置阴影的颜色，如果省略或未指定该值，则采用 color 属性的值。

2. box-shadow

使用 CSS 的 box-shadow 属性我们可以为 HTML 元素设置阴影效果，属性的语法格式如下：

1	box-shadow: h-shadow v-shadow blur spread color inset;

语法说明如下：

h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；
v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；
blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
spread：可选参数，设置阴影的尺寸；
color：可选参数，设置阴影的颜色；
inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。

提示：与 text-shadow 属性相似，box-shadow 属性也可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推。

CSS渐变色

线性渐变

线性渐变指的是颜色沿一条直线进行渐变（例如右上到下，从左到右等），要创建线性渐变，您至少需要定义两个色标（色标指的是想要平滑过渡的颜色），若要创建更加复杂的渐变效果，则需要定义更多的色标。创建线性渐变的基本语法如下：

1	linear-gradient(direction, color-stop1, color-stop2, ...);

参数说明如下：

direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向，例如：
- to left：表示从右到左，相当于 270deg；
- to right：表示从左到右，相当于 90deg；
- to top：表示从下到上，相当于 0deg；
- to bottom：默认值，表示从上到下，相当于 180deg；
- to right bottom：表示从左上到右下；
- to right top：表示从左下到右上；
- to left bottom：表示从右上到左下；
- to left top：表示从右下到左上。
color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 50px;
            float: left;
            margin: 10px;
        }
        .one {
            background: linear-gradient(to right bottom, red, blue 70px);
        }
        .two {
            background: linear-gradient(190deg, #000, #FFF);
        }
        .three {
            background: linear-gradient(red, green, blue);
        }
        .four {
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>