CSS3基础入门01

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS3 基础入门 01
- 前言
- 主流浏览器和浏览器前缀
- css3 选择器
- CSS3 文本属性
  - 文字阴影:
  - 文本换行:
  - font-face
  - 字体图标
- CSS3 背景属性
  - Background-origin 背景原点
  - Background-clip 背景裁切
  - Background-size 背景尺寸
  - 多背景设置
- CSS3 颜色特性
  - rgba
  - opacity
  - HSL和HSLA

CSS3 基础入门 01

前言

相对于 css2 来说， css3 更新了很多的内容，其中包括 选择器 、 颜色 、 阴影 、 背景 、 文本 、 边框 、 新的布局方案 、 2d 、 3d 、 动画 等等。

而如果想要学习 css3 的诸多部分，不妨按照 选择器 、 布局 、 样式 等分类来学。

主流浏览器和浏览器前缀

目前来讲，主流浏览器包括 谷歌浏览器 、 火狐浏览器 、 safari浏览器 、 opera浏览器 和 ie浏览器 。

而五大浏览器又对应着不同的内核：

•Trident    IE

•Gecko      firefox

•Presto     opera

•Webkit    （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）

•Blink         (由Google和Opera Software开发的浏览器排版引擎)

浏览器内核是每一个浏览器的核心，浏览器的性能和功能都依托于内核来实现。

在我们使用某些css3的属性的时候，是需要加上浏览器内核前缀的，例如 -webkit-border-radius:10px; 。

如果在开发过程中，需要大量的写浏览器前缀，可以通过编辑器的插件或者通过在线的平台进行前缀补全。

自动补全浏览器前缀:http://autoprefixer.github.io

css3 选择器

在 css3 中，主要新增加了 属性选择器 和 伪类选择器 ，通过这些选择器，我们能够很方便的进行样式的选取。

属性选择器:

E[attr] 选择具有某个属性的元素
E[attr=value] 选择某个属性等于指定值的元素
E[attr^=value] 选择某个属性值以value开始的元素
E[attr$=value] 选择某个属性值以value结尾的元素
E[attr*=value] 选择某个属性值中包含value的元素
E[attr~=value] 属性列表中包含有value
E[attr|="value"] 指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

下面是关于上述选择器的具体案例：

E[attr] 选择具有某个属性的元素

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div>

        test

    </div>

</body>

</html>

E[attr=value] 选择某个属性等于指定值的元素

示例:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class='d1'] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div class="d1">

        test

    </div>

</body>

</html>

E[attr^=value] 选择某个属性值以value开始的元素.

示例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class^='te'] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div class="ta">

        test

    </div>

</body>

</html>

E[attr$=value] 选择某个属性值以value结尾的元素

示例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class$='st'] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div class="ta">

        test

    </div>

</body>

</html>

E[attr*=value] 选择某个属性值中包含value的元素

示例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class*='pl'] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div class="ta pl">

        test

    </div>

</body>

</html>

E[attr~=value] 属性列表中包含有value

示例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class~='pl'] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div class="ta pl">

        test

    </div>

</body>

</html>

E[attr|="value"] 指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn)

示例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

    <style>

        div[class|='pl'] {

            color:red;

        }

    </style>

</head>

<body>

    <div class="test">

        hello,world

    </div>

    <div class="pl-haha">

        test

    </div>

</body>

</html>

综合示例：

上面用到了百度文库的精灵图。http://static.wenku.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_a372731.png)

伪类选择器：

结构伪类选择器

X:first-child 匹配子集的第一个元素。IE7就可以支持

X:last-child匹配父元素中最后一个X元素

X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X

X:only-of-type匹配属于同类型中唯一兄弟元素的X

X:first-of-type匹配同级兄弟元素中的第一个X元素

X:nth-last-child(n)从最后一个开始算索引。

X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X

X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

X:empty匹配没有任何子元素（包括包含文本）的元素X

目标伪类选择器

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

demo1:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div:target  {

            color: red;

        }

    </style>

</head>

<body>

<a href="#change">click me !</a>

<div id="change">change red...</div>

</body>

</html>

demo2:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            width: 300px;

            height: 300px;

            /*border:1px solid red;*/

        }

        a {

            display: block;

            width: 100%;

            height: 30px;

            border-bottom:1px solid red;

            line-height: 30px;

            text-align: center;

        }

        .main {

            width: 100%;

            height: 0;

            border:1px solid blue;

            overflow: hidden;

            transition:1s;

        }

        div:target {

            height: 270px;

        }

    </style>

</head>

<body>

    <div class="box">

        <a href="#changeheight">click here!</a>

        <div class="main" id="changeheight">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur dolor ea magnam obcaecati quaerat voluptate. Accusamus alias, animi asperiores dicta dignissimos eaque esse, ipsa nulla, reprehenderit sequi sit voluptatem.

        </div>

    </div>

</body>

</html>

UI元素状态伪类选择器

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

E:selection 匹配E元素中被用户选中或处于高亮状态的部分

demo:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        input:enabled {

            border:1px solid red;

        }

        input:disabled {

            border:1px solid blue;

        }

        input:checked + span{

            color:red;

        }

        textarea::selection {

            color: blue;

        }

    </style>

</head>

<body>

<form action="">

    <input type="text">

    <input type="text" disabled>

    <input type="radio" name="sex" ><span>男</span>

    <textarea name="" id="" cols="30" rows="10">

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis commodi culpa expedita, nobis nulla numquam placeat sit veniam. A accusantium eius, id laboriosam natus nesciunt placeat qui quo reprehenderit.

    </textarea>

</form>

</body>

</html>

否定伪类选择器

E:not(s) （IE6-8浏览器不支持:not()选择器。）

demo:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div:not(.d1){

            color:red;

        }

    </style>

</head>

<body>

<div class="d1">hi!I'm d1 box</div>

<div class="d2">hi!I'm d2 box</div>

<div class="d3">hi!I'm d3 box</div>

</body>

</html>

动态伪类选择器

E:link

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:hover

用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

E:active

用户行为选择器

选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点
```
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        input:focus {

            color:red;

        }

    </style>

</head>

<body>

<input type="text" value="hahah">

</body>

</html>
```

在 css2 + css3 中存在很多的选择器，我们在使用的时候只需要根据实际的使用情况来进行选择即可。

CSS3 文本属性

文字阴影:

text-shadow:h-shadow(水平阴影的位置。允许负值。) v-shadow(垂直阴影的位置。允许负值。) blur(模糊的距离。) color(阴影的颜色);

text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

demo1:

demo2:

demo3:

效果展示：

文本换行:

word-wrap

属性值：

normal

说明：只在允许的断字点换行（浏览器保持默认处理）

break-word

说明：属性允许长单词或 URL 地址换行到下一行。

属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            width: 100px;

            height: 40px;

            border:1px solid red;

            word-wrap: break-word;/*开启之后可以进行换行*/

        }

    </style>

</head>

<body>

    <div class="box">

        aaaaaasaaaaaaaaaaaaa

    </div>

</body>

</html>

word-break

属性值：

break-all

说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句

Keep-all

说明：文本不会换行，只能在半角空格或连字符处换行。

demo:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            width: 100px;

            height: 40px;

            border:1px solid red;

            word-break: break-all;

        }

    </style>

</head>

<body>

    <div class="box">

        aaaaaasaaaaaaaaaaaaa

    </div>

</body>

</html>

font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）.

语法规则

@font-face语法说明：

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

demo:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        @font-face {

            font-family: "zhangsan";

            src: url("./SourceHanSansCN-Heavy.otf");

        }

        div {

            font-family: "zhangsan";

            color:red;

        }

    </style>

</head>

<body>

    <div>hello,world</div>

</body>

</html>

字体图标

我们在实际开发过程中，经常需要在网页当中涉及到一些图标，我们除了使用雪碧图的形式以外，还可以采用 字体图标 的形式来设置这些图标。

常见的第三方图标网站：

Font Awesome http://www.fontawesome.com.cn/
IconFont https://www.iconfont.cn/
Themify Icons https://themify.me/themify-icons
Material Design Iconic Font https://zavoloklom.github.io/material-design-iconic-font/index.html
Weather Icons https://erikflowers.github.io/weather-icons/
icomoon https://icomoon.io/app/#/select

上面的字体图标库都有着各自的特色，在应用的过程中，可以根据自己的实际开发需要来进行选择。

CSS3 背景属性

相对于之前的 `css2` 当中的背景体系， `css3` 当中的背景进行了更加细致的功能。

Background-origin 背景原点

说明： 指定background-origin属性应该是相对位置

属性值：

padding-box 背景图像填充框的相对位置

border-box 背景图像边界框的相对位置

content-box 背景图像的相对位置的内容框

注：默认值为：padding-box;

Background-clip 背景裁切

说明： background-clip 属性规定背景的绘制区域。

属性值：

border-box 背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框

。

注：默认值：border-box;

Background-size 背景尺寸

说明： background-size 规定背景图像的尺寸

属性值：

length

规定背景图的大小。第一个值宽度，第二个值高度。

Percentage(%)

以百分比为值设置背景图大小

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

多背景设置

css3 中支持多背景的设置，可以通过 , 来划分多个背景。

p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片

background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面

background-color:yellow; //这是定义的默认背景颜色，全部适合 }

CSS3 颜色特性

rgba

RGBA(R,G,B,A)

在传统的 rgb 三原色的基础之上新增加了 a 也就是 Alpha 透明度。范围是 0-1 之间。

opacity

opacity: value|inherit;

通过 opacity 这个属性可以设置元素的不透明度。需要注意的是，通过这个属性设置不透明度会让元素内容也变得透明。

HSL和HSLA

HSL色彩模式是工业界的一种颜色标准，它是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的改变以及它们相互之间的叠加来得到各式各样的颜色。HSL颜色标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

HSL即是代表色调，饱和度，亮度三个通道的颜色

而HSLA就是在HSL的基础上在增加了一个透明度(A)的设置。

grammer：

hsl(H,S,L);

hsl(H,S,L);

H（色调：Hue）：衍生于色盘，其中0和360是红色，接近120的是绿色，240是蓝色；

S（饱和度：Saturation）：值为一个百分比数，0%代表灰度，100%代表最高饱和度；

L（亮度：Lightness）：值也为一个百分比数，其中0%代表最暗，50%为均值，100%表示最亮。

A（透明度：Alpha）：值为0~1之间的一个数，其中0代表不透明，1代表完全透明。

demo1:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

       <title>hsl()和颜色</title>

        <style>

            .demo{width: 400px;height: 240px;margin: 50px auto;}

            .hslL1 { background:hsl(320, 100%, 50%); height:40px; }      

            .hslL2 { background:hsl(320, 50%, 50%); height:40px; }      

            .hslL3 { background:hsl(320, 100%, 75%); height:40px; }      

            .hslL4 { background:hsl(202, 100%, 50%); height:40px; }      

            .hslL5 { background:hsl(202, 50%, 50%); height:40px; }      

            .hslL6 { background:hsl(202, 100%, 75%); height:40px; }  

        </style>

    </head>

    <body>

        <div class="demo">

            <div class="hslL1"></div>

            <div class="hslL2"></div>

            <div class="hslL3"></div>

            <div class="hslL4"></div>

            <div class="hslL5"></div>

            <div class="hslL6"></div>

        </div>

    </body>

</html>

demo2:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .demo{width: 400px;height: 240px;margin: 50px auto;}

            .hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }      

            .hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }      

            .hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }      

            .hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }      

            .hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }  

        </style>

    </head>

    <body>

        <div class="demo">

            <div class="hslaL1"></div>

            <div class="hslaL2"></div>

            <div class="hslaL3"></div>

            <div class="hslaL4"></div>

            <div class="hslaL5"></div>

            <div class="hslaL6"></div>

        </div>

    </body>

</html>

目前来讲，两者的兼容性都非常的良好，可以直接进行使用。当然IE9以下是不支持的。

正文

CSS3 基础入门 01

前言

主流浏览器和浏览器前缀

css3 选择器

CSS3 文本属性

文字阴影:

文本换行:

font-face

字体图标

CSS3 背景属性

相对于之前的 `css2` 当中的背景体系， `css3` 当中的背景进行了更加细致的功能。

Background-origin 背景原点

Background-clip 背景裁切

Background-size 背景尺寸

多背景设置

CSS3 颜色特性

rgba

opacity

HSL和HSLA

相关阅读

css3绕着svg路径转动，css动画实现绕点旋转

页面添加css3动画效果，css3实现动画效果

groupbox是css3属性吗，groupbox用法

css3导航实例，css3html5导航菜单

纯css3特效库，css特效大全

css3文字内发光效果，html字体发光效果怎么做

css3改变第一条li的样式，css第一行代码

css3动态绘制边框，css3设置边框

目录[+]

CSS3 基础入门 01

前言

主流浏览器和浏览器前缀

css3 选择器

CSS3 文本属性

文字阴影:

文本换行:

font-face

字体图标

CSS3 背景属性 相对于之前的 css2 当中的背景体系， css3 当中的背景进行了更加细致的功能。

Background-origin 背景原点

Background-clip 背景裁切

Background-size 背景尺寸

多背景设置

CSS3 颜色特性

rgba

opacity

HSL和HSLA

相关阅读

css3绕着svg路径转动，css动画实现绕点旋转

页面添加css3动画效果，css3实现动画效果

groupbox是css3属性吗，groupbox用法

css3导航实例，css3html5导航菜单

纯css3特效库，css特效大全

css3文字内发光效果，html字体发光效果怎么做

css3改变第一条li的样式，css第一行代码

css3动态绘制边框，css3设置边框

目录[+]

CSS3 背景属性

相对于之前的 `css2` 当中的背景体系， `css3` 当中的背景进行了更加细致的功能。