学习CSS3

CSS 于 1996 年由 W3C 组织制定，最新的版本为 CSS3，主要用于美化网页。CSS 是对页面内容数据和显示风格分离思想的一种体现，通过建立定义样式的 CSS 文件，让 HTML 文件调用 CSS 文件所定义的样式，如果需要修改 HTML 中的部分显示风格，只要修改对应的 CSS 文件即可，极大地提高了工作效率。

css语法结构

CSS 由两部分组成：选择器及一条或多条声明。选择器用于选中用户需要改变样式的 HTML 元素，选择器的声明部分由大括号包裹，每条声明由一个属性和一个属性值组成。属性是需要对元素进行设置的样式属性，属性和属性值用冒号分开，多个属性之间用分号分隔。基本语法如下：

选择器 {

        属性 : 属性值;

        [属性:属性值; …]

}

实例代码：

h1{

        color : red ;

}

使用css注意事项：

1）CSS 是大小写不敏感的，但规范的写法是全部小写。

2）规范性要求，每一行只写一个声明。

3）规范性要求，每个声明后边需要添加分号作为结束符。

4）所有符号均为英文，切勿使用中文符号。

5）注意代码的缩进，用 HBuider 编写代码会有提示，避免拼写错误。

css注释

为样式表添加注释有助于标记样式的作用范围以及复杂样式的作用等，便于进行后期的维护。CSS 添加注释的方式为/*……*/。

        /*设置 h1 标签的样式*/
        h1 {
            /*设置字体颜色为红色*/
            color: red;
        }

CSS 代码作为网页的独立的模块存在，要将编写好的 CSS 应用于 HTML 标签，使其产生效果，必须将其与 HTML 标签关联。具体关联方式有三种：行内样式表、内部样式表和外部样式表。

关联方式：

行内样式表

行内样式表，顾名思义，就是将 CSS 代码放置在 HTML 代码内部，作为 HTML 标签的属性存在，HTML 代码与 CSS 代码处于同一行中。特点：

1）将 CSS 代码与 HTML 代码糅合在一起，不符合 W3C 关于“内容与表现分离”的基本规范，不利于后期维护。

2）可以单独定义某个元素的样式，灵活方便。

3）优先级最高，但是不推荐使用，仅在测试时可以采用

 <h1 style="color: red;">你好</h1>
 <!-- 把h1内容添加颜色为红色 -->

内部样式表

内部样式表也称为内嵌样式表，是指 CSS 代码内嵌到 HTML 代码中，二者处于同一个

文件中，通常 CSS 代码放置在 HTML 代码的<head>标签内部。

特点:

1）写在标签中，一定程度地将 CSS 代码与 HTML 代码进行了分离，但是分离不够彻底，无法应用于其他 HTML 文件，实现样式复用。

2）优先级低于行内样式表。

<head>
    <meta charset="utf-8" />
    <title>表格的基本结构</title>
    <style>
        /*设置 h1 标签的样式*/
        h1 {
            /*设置字体颜色为红色*/
            color: red;
        }
    </style>
</head>

外部样式表

外部样式表是指 CSS 代码完全独立出来，单独放置在扩展名为.css 的文件中，在 HTML文件中，将 CSS 文件引入进来，形成关联。特点：

1）与内部样式表一样，写在标签中，实现了 CSS 代码与 HTML 代码的彻底分离，方便样式复用与后期维护，符合 W3C 规范。

2）优先级要低于内部样式表。

3）后续开发中推荐使用此种方式。

<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

2，css选择器

CSS 选择器是指 CSS 选择要修饰的元素，对指定元素进行修饰美化。简单的选择器可以对给定类型的所有元素进行格式化，复杂一些的选择器可以根据元素的上下文、状态等来应用样式。

通用选择器

写法：*{}。

作用：选中页面中的所有标签，一般用于定义最通用的属性，设置默认值。

优先级：最低，低于所有选择器。

        * {
            padding: 0px;
            margin: 0px;
            font-family: "微软雅黑", sans-serif;
            font-size: 12px;
        }

标签选择器

写法： HTML 标签名{样式属性:样式属性值;……}。

作用：选中页面中所有的对应标签，当需要对某类标签进行统一设置样式时采用。

优先级：高于通用选择器。

代码含义：选择所有<div>标签，并给标签设置宽度、高度、背景色等样式属性，当页

面包含有多个<div>标签时，都会被选中。

        div {
            padding: 0px;
            margin: 0px;
        }

类选择器

写法：.类名称{}。

调用：在需要改变样式的标签上，使用 class="选择器名称" 调用对应选择器。

作用：修改所有调用选择器的标签。

优先级：高于标签选择器。

<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <style>
        .first {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
    <h1 class="first">你好</h1>
</body>

id选择器

写法：#id 名称{}。

作用：在需要改变样式的标签上，使用 id="选择器名称" 调用对应选择器。

优先级：大于类选择器。

注意事项如下：

1）id 是唯一的，同一页面不能出现多个相同的 id 定义。

2）id 名称要求与类选择器相同。

3）通常当页面中有唯一样式时，采用 id 选择器。

<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <style>
        #first {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
    <h1 id="first">你好</h1>
</body>

后代选择器与子代选择器

1．后代选择器

写法：选择器 1 选择器 2 选择器 3……{ } ，每个选择器之间用空格分隔。

div .li{
    color: yellow;
}

div . li { } 表示选中的元素包括 div 里面的 class="li"的元素，其中 class="li"的元素可以是 div 的子代，也可以是 div 的后代，也就是孙代及往后。

2．子代选择器

写法：选择器 1>选择器 2>选择器 3……{} ，每个选择器之间用大于号分隔。

div>ul{
    color: blue;
}

div>ul{}表示 ul 必须是 div 的直接子代，孙代以后不选中。

交集选择器与并集选择器

1．交集选择器

写法：选择器 1 选择器 2……{} ，选择器之间没有分隔符。

list#li{
    color: red;
}

.list#li{} 元素必须同时具备 class="list"并且 id="li"样式才能生效。

2．并集选择器

写法：选择器 1,选择器 2,……{} ，选择器之间用逗号分隔。

.li,#li{
    color: red;
}

.li,#li{} 元素只要具备 class="li"或者 id="li"，样式即可生效。

伪类选择器

写法：选择器名称:伪类状态{}。

a:hover{
    color: red;
}

常见的伪类状态如下：

link：未访问状态。

visited：已访问状态。

hover：鼠标指向时，即悬停在元素上方时。

active：激活选定状态（鼠标点下去没松开）。

focus：获得焦点时（input 常用）。

超链接多种伪类共存时的顺序如下：link→visited→hover→active

选择器的命名规则及优先级

1．选择器的命名规则

1）只能由字母、数字、下画线组成，不能有其他任何特殊字符。

2）开头不能是数字，即只能以字母、下画线开头。

2．选择器的优先级

1）第一原则“近者优先”，最内层选择器永远比外层优先。例如：div ul li > div #ul，li 在 ul 内层，所以 li 标签选择器能覆盖外层 id 选择器。

2）当作用在同一层时，可以根据选择器优先级权重进行计算。标签选择器优先级为 1，class 选择器优先级为 10，id 选择器优先级为 100。例如：div #li > div ul .li > div ul li，优先级权重依次为：1+100 > 1+1+10 > 1+1+1。

3）当优先级权重完全相同时，写在后面的选择器会覆盖前面的选择器。

div li{ color:red; }
div li{ color:blue; } /* 完全相同的选择器，写在后面的生效 */

4）除以上原则外，CSS 中还有一个特殊样式规则!important。 !important 的作用是将当前 CSS 语句提升到最高权重，即可以覆盖任何选择器的 CSS 语句。但是并不推荐使用!important，因为它会使你的页面难以修改调试。

div li{
    color:red !important ; /* 使用!important 会将此行语句提升到最高权限 */
}

二，css常用属性

1，css常用文本属性

CSS 的文本属性，使用 CSS 属性不仅可以控制文字的大小、颜色和字体等，还可以设置整个段落的行高、对齐方式等属性，大大提高网页的可读性。

字体，字号，与颜色属性

字体：

（1）font-family：字体族，设置字体

（2）font-style：设置字体样式

（3）font：缩写形式

字号：

（1）font-weight：设置字体粗细

（2）font-size：设置字体大小

字体颜色：

（1）color：设置字体颜色

（2）opacity：设置透明度

注意：使用 opacity 时当前元素以及子元素均会透明；而使用 rgba 调整时，只会使当前元素透明，不会改变子元素透明度。

文本属性

line-height 设置行高

属性值表达方式有以下 3 种。

1）像素单位，如 48px。

2）纯数值，表示正常行高的倍数。

3）百分数，表示正常行高的百分数。

line-height 有一个典型应用，就是可以调整元素中文本垂直居中，设置方式为让控件的 height 等于控件的 line-height。

text-align

设置块级元素中文字的水平对齐方式，属性值有 left、center、right

letter-spacing

设置字符间距，即字与字之间的间距，属性值通常为**px。

text-decoration

文本修饰属性，常用属性值有四个，分别为下画线 underline、删除线 line-through、上画线 overline、不做修饰 none。

overflow（overflow-x 和 overflow-y）

控制超出范围文本的显示方式，常用属性值有以下三个。

1）auto：根据文字多少自动显示滚动条。

2）scroll：始终显示滚动条。

3）hidden：超出范围文本隐藏，可以通过 overflow-x 和 overflow-y 分别设置水平垂直方向的隐藏。

text-overflow

设置多余文字的显示方式，常用属性值有两个。

1）clip：裁剪文本；

2）ellipsis：使用省略号代替多余文字。

white-space

设置元素内的空白符怎样处理。常见属性值如下：

1）normal：默认，空白会被浏览器忽略。

2）nowrap：设置中文行末不断行显示。

3）pre：空白会被浏览器保留。作用类似 HTML 中的<pre>

text-shadow

文本阴影，有 4 个属性值。

1）水平阴影距离：必写，数值越大，阴影右移。

2）垂直阴影距离：必写，数值越大，阴影下移。

3）阴影模糊距离：可写，数值越大，阴影越模糊。默认为 0，不模糊。

4）阴影颜色：可写，默认为黑色。

text-indent

首行缩进，可以使用像素值调整段落文字的首行缩进大小。

text-stroke

设置文字描边，需要注意的是 text-stroke 只能在 webkit 内核浏览器中使用，所以必须使用“-webkit-”前缀，共接收两个属性值分别为描边的粗细，描边的颜色。

2，css常用背景属性

网页可以用颜色当背景，也可以用图片当背景，选择合适的颜色或背景可以使网页的风格趋近统一，同时让网页更加美观。

背景颜色属性

background-color:red;

background-color:#66CCFF;

background-color:RGBA(255,255,0,0.5);

背景图像属性

background-image

设置背景图像，背景图和背景色同时存在时，背景图会覆盖背景色。

background-image: url(图片地址的相对路径);

background-repeat

当背景图大小小于元素实际区域大小时，会默认将背景图进行平铺展示。可以使用 background-repeat 设置背景图平铺方式。可选属性值有四个：

1）no-repeat：不平铺。

2）repeat：平铺（默认）。

3）repeat-x：水平方向平铺。

4）repeat-y：垂直方向平铺。

background-size

设置背景图大小，可以分为两种方式设置。指定宽度和高度和等比缩放；

background-position

设置背景图像的起始位置。属性值有两种写法，第一种使用指定位置关键字；第二种是使用数值。

1）指定位置关键字：属性值有 left、right、top、bottom 和 center。当只写一个属性值时，另一个默认为 center。

2）使用数值：两个值，分别表示水平位置和垂直位置，可以采用像素值或百分比形式。

注意：在水平方向上，正数右移，负数左移；在竖直方向上，正数下移，负数上移，可以概括为左负右正，上负下正。

3）当使用百分数时，一般只能是正数。百分数表示去掉图片的大小后，元素中剩余空白距离的分布比例。例如，background-position：30%; 代表水平方向去掉图片的宽度后，元素剩余区域宽度以 3:7 显示。

background-origin

设置背景图的定位方式。属性值有三个：

1）border-box：从边框外缘开始。

2）padding-box：从边框内缘开始。

3）content-box：从文字内容区开始。

background

背景的简写属性，在一个声明中设置所有的背景属性。当使用简写属性时，属性值的顺序如下所示：

 background-color

 background-image

 background-repeat

 background-attachment

 background-position

3，css其他常用属性

列表常用属性

list-style：none，circle，square...

超链接样式属性

a:link {color:#FF0000;} /* 未被访问的链接 */

a:visited {color:#00FF00;} /* 已被访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;} /* 正在被单击的链接 */

三，CSS3新增属性与选择器

1，CSS3 的过渡与变换

在 CSS3 未出现之前，如果希望标签元素实现从一种样式转变为另一种样式，使网页显得更加动感，提供更好的客户体验，则需要借助 Flash 或者 JavaScript，而 CSS3 新出现的两个属性 transition（过渡）与 transform（变换）可以轻松实现效果。

transition：过渡属性

常用的写法是简写属性 transition，可以直接在这一个属性中设置其他四个属性，属性值的顺序一般为 property、duration、timing-function、delay。

transition: all .3s ease 2s;

示例代码的含义是：执行元素所有属性的过渡效果，过渡时间为 0.3s，过渡速度是逐渐变慢，并且在触发过渡效果后延迟 2s 执行过渡效果。

transform：变换属性

通过使用变换属性可以对元素进行旋转、拉伸、翻转、缩放等操作。变换属性分为 2D 变换与 3D 变换，通常与过渡属性搭配使用，来完成一些简单的动画效果。常见的变换属性有两个：

1）transform：定义元素向 2D 或 3D 变换。

2）transform-origin：改变转换元素的位置。

transform-origin 设置旋转元素的基点位置，2D 转换元素可以改变元素的 X 轴和 Y 轴；对于 3D 转换元素还可以更改元素的 Z 轴。 transform-origin 的属性值有三个：

1）x-axis，可以使用的值有：left、right、center、**px、百分比。

2）y-axis，可以使用的值有：left、right、center、**px、百分比。

3）z-axis，可以使用的值有：**px。

2，CSS3 动画

CSS3 动画是指使用 CSS 代码让网页中的元素运动起来形成的动画。CSS3 的动画功能可以在许多网页中取代动画图片、Flash 动画以及 JavaScript 动画等，使网页变得更加炫丽丰富。

CSS3 动画的@keyframes 和 animation

上节讲到的过渡和变换其实也是一种动画，只是动了一次的动画，而动画属性可以看成是多次过渡和变换的组合，同时可以设置播放次数，具有控制播放和暂停等功能。

使用@keyframes 创建关键帧动画

@keyframes 用于创建动画。在 @keyframes 中设置 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes 动画名称{

        阶段 1{CSS 样式}

        阶段 2{CSS 样式}

        阶段 3{CSS 样式}

}

动画中阶段的写法有两种方式：

1）每个阶段用百分比表示，从 0%到 100%（起止必须设置，即 0%和 100%）。

2）使用 from 和 to 表示从某阶段到某阶段。

    <style type="text/css">
        /* 使用 0%到 100%表示（起止必须设置，即 0%和 100%）*/
        @keyframes myFrame1 {
            0% {
                top: 0px;
            }

            30% {
                top: 50px;
            }

            100% {
                top: 100px;
            }
        }

        /* 使用 from-to 直接表示开始结尾，样式会匀速变化*/
        @keyframes myFrame2 {
            from {
                top: 0px;
            }

            to {
                top: 100px;
            }
        }
    </style>

使用 animation 调用关键帧动画

创建好一个动画后，需要在 CSS 选择器中使用 animation 动画属性，调用声明好的关键帧动画。动画属性中必须有动画名称和时长，否则动画不生效

div{
    /* 让 div 调用 myFrame1 这个关键帧动画，5s 完成所有动画效果*/
    animation: myFrame1 5s;
}

CSS3 animation 动画属性

animation

除 animation-play-state 之外的所有动画属性的简写属性，可以设置多个动画，每个动画

之间用空格分隔。

animation-name

规定 @keyframes 动画的名称。

animation-duration

规定完成一个动画所需的秒或毫秒，默认是 0。

animation-timing-function

规定动画的速度曲线。常用属性值有以下五个。

1）linear：动画从头到尾的速度是相同的。

2）ease：默认值，动画以低速开始，然后加快，在结束前开始变慢。

3）ease-in：动画以低速开始，然后逐渐加快至匀速直到结束。

4）ease-out：动画以匀速开始到低速结束。

5）ease-in-out：动画以低速开始和结束。

animation-delay

规定动画何时开始，默认是 0。

animation-iteration-count

规定动画被播放的次数，默认是 1。使用 infinite 表示无限次播放。

animation-direction

规定动画在下一次循环中是否轮流反向播放。属性值有两个。

1）normal：默认值，动画正常播放。

2）alternate：动画轮流反向播放。

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /* 通过设置单个属性的属性值进行修改*/
        #div1 {
            animation-name: frame1;
            /*调用关键帧名称*/
            animation-duration: 3s;
            /*关键帧执行时间*/
            animation-timing-function: ease;
            /*使用 ease 效果渐变*/
            animation-iteration-count: infinite;
            /*动画播放无限次*/
        }

        /* 使用 animation 的缩写形式进行设置*/
        #div2 {
            animation: frame1 3s ease infinite;
            /*动画与 div1 所述完全相同*/
        }

        @keyframes frame1 {
            from {
                width: 100px;
            }

            to {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div id="div1">
        这是一个 div1
    </div>
    <div id="div2">
        这是一个 div2
    </div>
</body>

</html>

3，CSS3 其他常用属性

CSS3 渐变效果

渐变包括线性渐变和径向渐变，有四个属性可以设置：

1）linear-gradient：用线性渐变创建图像。

2）radial-gradient：用径向渐变创建图像。

3）repeating-linear-gradient：用重复的线性渐变创建图像。

4）repeating-radial-gradient：用重复的径向渐变创建图像。

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        #grad1 {
            height: 200px;
            background: linear-gradient(to bottom, red, blue);
            /*线性渐变语句*/

        }
    </style>

<body>
    <div id="grad1"></div>
</body>
</html>

运行效果如下：

CSS3 多列属性

通过使用 CSS3 的多列属性可以将文本内容分成多列，就像报纸一样的布局。接下来学

习常见的几个多列属性。

columns

列的宽度与列数的简写属性。

column-count

规定元素被分隔的列数。属性值可以设为 auto，由其他属性决定列数，如 columnwidth，或自定义列数。

column-width

规定每个列的宽度。属性值可以为带像素单位的数值或 auto。

column-rule

设置每个列之间边框的宽度、样式和颜色，为简写属性。

column-rule-width

规定两列间边框的宽度。可选属性值有四个，分别为 thin（细边框）、medium（中等边

框）、thick（粗边框），还有自定义边框宽度**px。

column-rule-style

规定两列间边框的样式。常见属性值有六个，分别为 none（无样式）、hidden（隐藏样

式）、dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）。

column-rule-color

规定两列间边框的颜色。

column-gap

设置每个列之间的距离。属性值可设为 normal（W3C 建议的值是 1em）或带像素单位

的数值。

<!DOCTYPE html>
<html>

<head>
    <style>
        .column {
            column-count: 3;
            column-rule: dotted 5px red;
        }
    </style>
</head>

<body>
    <div class="column">盼望着，盼望着，东风来了，春天的脚步近了。
        一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
        小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
        桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。
        “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
        雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
    </div>
</body>


</html>

运行效果如下：