CSS3 笔记

2023-12-04 16:35:41

CSS3 笔记

CSS3 笔记

CSS3

1.CSS的引入

1.内联引入法

<div style="color:blue;"></div>
<!-- 使用HTML元素中的style属性写入CSS代码 -->

2.内部引用法

<head>
	<style>
        div {
            color:red;
            font-size:10px;
        }
    </style>    
</head>
<!-- 在head中使用style标签，写入CSS代码 -->

3.外联引用法

<head>
    <link type="text/css" rel="stylesheet" href="url">
</head>
<!-- 在head标签中使用link标签，在href中引用外部的CSS文件 -->

2.CSS选择器

三大基础选择器

1.元素选择器

<style>
    div{
        width:100px;
    }
    p{
        font-size:14px;
    }
</style>
<!-- 选择所有的div和p，html标签 -->

2.类选择器

<style>
    .test{
        width:100px;
        height:30px;
    }
</style>
<body>
    <div class="test"></div>
</body>
<!-- 
在html元素中设置class值，
在css中用‘.’+'class值'也叫类名
.test
-->

3.ID选择器

<style>
    #index{
        width:200px;
        background-color:red;
    }
</style>
<body>
    <div id="index"></div>
</body>
<!-- 在html元素中设置id值，在CSS中用#+ID值选择 -->

4.集体选择器

<style>
    div,p,span{
        font-size:30px;
        color:blue;
    }
</style>
<body>
    <div>
    </div>
    <p>
    </p>
    <span></span>
</body>
<!-- 使用，号分割标签选择所选择的元素 -->

5.属性选择器

<style>
    a[href] {
        color:red;
    }
</style>
<!-- 将所有a标签中的href属性的字体设置为red色 -->

6.后代选择器

<style>
    ul li{
        color:purple;
    }
</style>
<body>
    <ul>
        <ol>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ol>
    </ul>
</body>
<!-- 将ul标签下的所有li标签的颜色设置为purplr -->

7.子元素选择器

<style>
    h1>strong{
        color:blue;
    }
</style>
<body>
    <h1>
        <strong>test1</strong>
        <strong>test2</strong>
    </h1>
    <h1>
        <em>
        	<strong>test3</strong>
        </em>
    </h1>
</body>
<!-- 将h1标签下的子元素strong变为blue颜色，选择的是某元素下的子元素，所有test1，2变色，
而test3不变色
-->

8.相邻兄弟选择器

<style>
    div + p{
        color:red;
    }
</style>
<body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
</body>
<!-- 将div元素下的第一个紧邻的p便签变为red色，
所以2会变色。
-->

9.所有元素选择器

<style>
    *{
        color:blue;
    }
</style>
<!-- 将所有的html标签中的文字都变为blue色 -->

10. !important

<style>
    .test{
        color:red!important;
    }
    #index{
        color:blue;
    }
</style>
<body>
    <div class="test" id="index"></div>
</body>
<!-- 当两个或多个选择器同时选择了一个元素时，！important为最高权重！ -->

11.选择器的结合使用

<style>
    div p,div>span,.test,#index{
        color:red;
    }
</style>
<body>
    <div>
        <p>
        </p>
    </div>
    <div>
        <span></span>
    </div>
    <span class="test"></span>
    <div>
        <a id="index"></a>
    </div>
</body>
<!-- 各个选择器可以根据场景互相搭配 -->

12.伪类选择器

1.anchor伪类

链接状态显示都可以以不同方式显示

a:link {color:#ff0000} /*未访问的链接*/
a:visited {color:red} /*已访问的链接*/
a:hover {color:ff0044} /*鼠标滑过的链接*/
a:active {color:blue} /*已选中的链接*/

2.伪类和CSS类搭配

a.red:visited{color:red;}
<a class="red" href="#">CSS</a>

3.first-child伪类

<style>
    ul li:first-child{
        color:black;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<!-- 将ul中的第一个li元素设置black颜色 -->

4.lang伪类

<style>
    q:lang(no){
        quotes:"~" "~"
    }
</style>
<p>文字
    <q lang="no">段落中的文字</q>
</p>文字
<!-- 演示：文字~段落中的文字~文字 -->
<!-- 将q元素前后端加上quotes设置的属性 -->

3.伪元素

1.first-line 伪元素

用于设置文本首行样式

<style>
    p:first-line{
        color:red;
    }
</style>
<p>
    我吹过你吹过的晚风</br>
	那我们算不算相拥？
</p>
<!-- 将p标签的文本首行设置为red颜色 -->

2.first-letter 伪元素

用于设置文本中的首字母样式 /注意：只能用于块级元素/

<p style=":first-letter{color:red}">
    ImportantTypora
</p>
<!-- p标签中的首字母I变成了red色-->

3.:before 伪元素

用于在选中的元素之前插入新的内容

<style>
    div:before{
        content:"Mazilong";
    }
</style>
<div>
    是大好人
</div>
<!-- 演示：Mazilong是大好人 -->
<!-- 在div标签之前插入了Mazilong文本 -->

4.:after 伪元素

用于在选中的元素之后插入新的内容

<style>
    div>span:after{
        content:url(img.png);
    }
</style>
<div>
    <span>马子龙:</span>
</div>
<!-- 在span标签之后添加了一张照片 -->

4.CSS的继承和单位

1.继承关系

子元素继承于祖先元素

<style>
    body{
        font-size:30px;
        color:red;
    }
</style>
<body>
    <span>test1</span>
    <p>test2</p>
    <div>test3</div>
</body>
<!-- test1，2，3都会变为字体30px，颜色为red颜色 -->

2.CSS的局限性

CSS属性中，子元素有一部分是不能被继承的如：border，margin，padding，background等;

如果需要的话，必须单独为子元素赋值

3.CSS绝对数值单位

绝对数值单位的时一个固定的值，反映的是真实的物理尺寸

1.像素（px）

最基础的长度单位，常说的1920x1080分辨率，其实就是显示器横竖分布着1920和1080个发光点。

2.常见单位

毫米：mm

厘米：cm

英寸：in(1in=96px=254cm)

点：pt(point,大约1/72英寸；（1pt=1/72in）)

4.CSS相对数值单位

相对单位指定了一个单位长度相对于另一个长度的属性。

em：相对于应用在当前元素的字体尺寸，相对长度单位，浏览器字体为16px时，2em=32px

ex：依赖于英文字母小x的高度

ch：数字0的宽度

rem：根元素（html）的font-size

vw：viewpoint width,视窗宽度，1vw=视窗宽度的1%

vh：viewpoint height，视窗高度，1vh=视窗高度的1%

vmin：vh和vw中较小的那个

vmax：vh和vw中较大的那个

5.CSS定位

1.浮动定位

float:left/right/none/inherit

left：元素向左浮动

right：元素向右浮动

none：默认值，元素不浮动

inherit：从父元素继承float的值

2.绝对定位

position：absolute;

绝对定位如果父元素有定位属性，那就根据父元素的位置进行移动定位，

如果父元素没有定位属性，或自己就是父元素，那么就根据body属性进行定位

依旧是根据浏览器的窗口进行定位

绝对定位的位置可根据元素属性：left / right / top / bottom来进行规定

left:左边距

right：由编剧

top：上边距

bottom：下边距

3.相对定位

position:relative;

相对定位根据的是元素未移动之前的位置进行相对移动的，移动属性和绝对定位一样。

4.固定定位

position:fixed;

固定定位类似于绝对定位，不过固定定位相对其包含块是视窗本身，也就是固定元素在浏览器窗口的某一位置，并不会随着文档的其他元素移动，移动属性同上。

5.z-index索引优先级

当页面中的元素重叠时，若需要某元素靠前/靠后，这需要使用过z-index来设置

z-index:auto / number /inherit;

即设置层叠关系，当z-index值越大时，层叠关系考前，也就是层考上，反之亦然。

auto:默认与父元素相等

number：设置堆叠顺序，如z-index:1;

inherit：从父元素继承。

6.CSS常用样式

--设置字体样式

1.字体font-family

设置字体样式

font-family:"宋体";

2.字号font-size

设置字体大小

font-size:14px;

可以设置的属性值单位如下：

像素（px）

点数（pt）

英寸（in），厘米（cm），毫米（mm）

倍数（em）

百分比（%）

3.字重font-weight

设置字体粗细

font-weight: 100~900/normal/bold/bolder/lighter/inherit;

100~900:只能是整数：最大对应着bolder；

normal：默认值

bold：加粗

bolder：更粗

lighter：更细

inherit：继承父级

4.文本转换text-transform

设置字体英文字母大表现形式

text-transform:none/capitalize/uppercase/lowercase/inherit;

none:默认

capitalize：文本中的每个单词以大写字母开头

uppercase：定义只有大写字母

lowercase：无大写字母，仅有小写字母

inherit：从父元素继承

5.字体风格font-style

设置字体的风格

font-style:normal/italic/oblique/inherit;

normal：默认值

italic：斜体字体样式

oblique：倾斜字体样式

inherit：父元素继承

6.字体颜色color

设置字体的颜色

color: _name/hex_number/rgba_number/inherit;

_name：字体名称，如：red

hex_number：十六进制颜色，如：#FF0000

rgba_number：规定rgba颜色，如：rgba（255，255，255，0.8）——a是透明度

inherit：父元素继承

7.文本修饰text-decoration

设置字体对文本的修饰

text-decoration:none/underline/overline/line-through/blink/inherit;

none:默认值

underline:文本下划线

overline:文本上划线

line-through:文本中划线

blink:定义闪烁文本

inherit:继承父元素

8.简写font

一次性设置字体元素

可按顺序设置一下属性

font-style

font-variant

font-weight

font-size/line-height

font-family

div{
	font:italic bold 12px/30px Georgia,serif;
}

--设置段落样式

1.字符间隔letter-spacing

设置增加/减少字符间的空白

letter-spacing:normal/length/inherit;

normal：默认值

length：固定空间，允许使用负值。如：letter-spacing:14px;

inherit：继承父元素

2.单词间隔word-spacing

设置增加或减少单词间的空白

word-spacing:normal/length/inherit;

normal：默认值

length：固定空间，如:word-spacing:10px;

inherit：继承父元素

3.段落缩进text-indent

设置段落开头的字符缩进

text-indent:length/%/inherit;

length：固定缩进默认为0，如：text-indent:2em;

%：定义基于父元素宽度的百分比缩进

inherit：规定从父元素继承

4.横向对齐方式text-align

设置文本的横向对齐方式

text-align:left/right/center/justify/inherit;

left:左对齐

right:右对齐

center:居中对齐

justify:两端对齐

inherit:父元素继承

5.纵向对齐方式vertical-align

设置文本的纵向对齐方式

vartical-align:
	baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/inherit;

baseline:元素放置在父元素的基线上

sub:垂直对齐文本的下标

super:垂直对齐文本的上标

top:元素的顶端与行中最高元素的顶端对齐

text-top:元素的顶端和父元素字体的顶端对齐

middle:此元素放置在父元素的中部

bottom:元素底端和行中最低元素的底端对齐

text-bottom:元素底端与父元素字体底端对齐

length:使用line-height百分比排列元素

inherit:继承父元素

6.文本行间距line-height

设置文本行间的距离（行高）

line-height:normal/number/length/%/inherit;

normal：设置合理的行间距

number：设置数字，根据当前字体尺寸相乘来设置行间距

length：设置固定的行间距

%：当前字体尺寸的百分比设置

inherit：继承父元素

--设置边框

7.边框样式border-style

设置元素边框的样式

边框可设置上下左右4边，设置顺序分别为上、右、下、左；

border-style:
none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/inherit;

border-style:上 右 下 左；

border-style:solid;
<!-- 上下左右边框都是实线 -->

border-style:solid double;
<!-- 上下边框为实线，左右边框为双线 -->

border-style:solid double dashed;
<!-- 上边框实线，有边框双线，下边框虚线 -->

border-style:dashed solid double none;
<!-- 设置上边距为虚线 右边距实线 下边距双线 右边距无边线 -->

8.边框颜色border-color

设置边框的颜色

设置边框颜色顺序同上。

border-color: color ;

颜色设置属性可参考上免得字体颜色color;

9.边框宽度border-width

设置边框的宽度

设置边框宽度顺序同上。

border-width:thin/medium/thick/length/inherit;

thin：细边框

medium：默认

thick:粗边框

length:自定义边框宽度，如：border-width:15px;

inherit:继承父类

10.简写边框效果

一次性声明所有边框属性

border:width/style/color;

border:3px solid red;
<!-- 设置一个3px宽度的红色实线边框 -->

按顺序设置如下属性

border-width

border-style

border-color

--设置轮廓

轮廓是绘制于元素周围的一条线，位于边框外围，可起到突出元素的作用，不会占据空间，也不一定是矩形。

1.轮廓线型outline-style

蛇者轮廓样式

outline-style:
none/dotted/dashed/solid/double/groove/ridge/inset/outset/inherit;

属性介绍观上；

2.轮廓颜色outline-color

设置轮廓颜色

outline-color: color;

颜色属性设置观上；

3.轮廓宽度outline-width

设置轮廓的宽度

outline-width:thin/medium/thick/length/inherit;

thin：系轮廓

medium:默认中等轮廓

thick:粗轮廓

length:自定义轮廓，如：outline-witdh:10px;

inherit:继承父元素

4.外轮廓outline简写

一次性声明所有外轮廓属性

outline:width style color;

设置属性顺序如下：

outline-width

outline-style

outline-color

5.轮廓和边框之间的异同点

相同点
- 都是围绕在元素外围显示
- 都可以设置宽度，样式，颜色属性
- 在写法上也可以采用简写格式
不同点
- outline不占空间，但会额外增加width或者height，而border会增加盒子的宽度和高度
- outline不能进行上下左右单独设置，而border可以
- border可应用于几乎所有有形的html元素，而outline是针对于链接、表单控件和ImageMap等元素设计的
- outline的效果将随元素的focus而自动出现，相对应的右blur自动消失
- 当outline和border同时存在时outline会围绕在border的外围

--设置列表属性

1.列表样式list-style-type

设置列表中的标号样式

list-style-type:
none/disc/circle/square/decimal/decimal-leading-zero/lower-roman/upper-roman/
lower-alpha/upper-alpha/lower-greek/lower-latin/hebrew/armenian/georgian/
cjk-ideographic/hiragana/katakana/hiragane-iroha/katakana-iroha;

none:无标记

disc：默认，实心圆

circle：空心圆

square：实心方块

decimal：数字

decimal-leading-zero：0开头的数字标记（01，02，03等）

lower-roman：小写罗马数字

upper-roman：大写罗马数字

lower-alpha：小写英文字母（a,b,c,d,e)等

upper-alpha：大写英文字母（A,B,C,D,E）等

lower-greek：小写希腊字母

lower-latin：小写拉丁字母

uppe-latin：大写拉丁字母

hebrew：传统的希伯编号

armenian：传统的亚美尼亚编号

georgian：传统的乔治亚编号

cjk-ideographic：简单的表意数字

hiragana：标记是a,i,u,e,o,ka,ki（日文片假名）等

katakana：标记是A,I,U,E,O,KA,KI（日文片假名）等

hiragana-iroha：i,ro,ha,hi,ho,he,to（日文片假名）等

katakana-iroha：I,RO,HA,NI,HO,HE,TO（日文片假名）等

2.列表标记图像list-style-image

使用图片来作为列表的标记

list-style-image:url(....);

3.列表记得位置list-style-position

更改设置列表标记的位置

list-style-position:inside/outside/inherit;

inside:放置在文本以内，环绕文本对齐

outside:默认值，文本左侧，

inherit:继承父元素

4.间歇列表属性list-style

一次性声明所有列表属性

list-style:type position image;

list-style-type

list-style-position

list-style-image

--设置元素阴影border-shadow

给元素添加阴影效果

border-shadow:x轴偏移值 y轴偏移值 模糊值 阴影颜色;

border-shadow:0px 0px 10px #000000;

--设置盒子等元素的圆角border-radius

给元素添加圆角效果

当角度是边长的一半时，就成了圆形。

border-radius:..px;
<!-- 设置元素的4个圆角大小 -->

border-radius: apx bpx cpx dpx;
<!-- 也可以单独设置元素的4个角的圆角值 -->
<!-- 
	a		  b
	+---------+
	|		  |
	|         |
	+---------+
	c		  d
-->

border-radius:10px 20px 30px 40px;
<!-- 以上为左上，右上，右下，左下 -->

7.盒子模型

--盒子模型介绍

盒子模型就是CSS网页设计中常用的一种思维模型，将元素看作为一个盒子，盒子有4个属性，分别是：

margin：外边距

border：边框

padding：内边距

content：内容

与此对应的上下左右分别是：

top：上

right：右

bottom：下

left：左

可与margin，border，padding，任意组合使用，设置间距大小等。

每一个html标记都可以看做为一个盒子。

1.外边距设置

设置盒子的外边距

属性	定义
margin	简写属性，声明中设置所有的外边距相同
margin-top	元素的上边距
margin-right	元素的右边距
margin-bottom	元素的下边距
margin-left	元素的左边距

margin:10px;
<!-- 设置所有外边距为10px -->

margin:10px 20px;
<!-- 设置上下边距为10px 左右边距为20px-->

margin:10px 20px 30px;
<!-- 设置上外边距为10px，右外边距为20px，下外边距为30px -->

margin-top:10px;
<!-- 设置上外边距为10px -->

margin-right:20px;
<!-- 设置右外边距为20px -->

margin-bottom:30px;
<!-- 设置下外边距为30px -->

margin-left:40px;
<!-- 设置做外边距为40px -->

2.外边距合并

当两个盒子相遇时，外边距怎样？

当两个外边距相遇时，他们会形成一个外边距，合并后外边距等于两个外边距中的较大者。

3.内边距设置

盒子内边距设置

padding
padding-top
padding-right
padding-bottom
padding-left

设置顺序和上述的外边距相同

--弹性盒子

使用弹性盒子需要加上display:flex;属性来布局；

对父级元素的一系列设置，从而起到约束子元素排列布局的目的

1.flex-direction

设定灵活项目方向

值	描述
row	默认值，灵活的项目将水平线示
row-reverse	与row相同，以相反的顺序
column	垂直显示
column-reverse	与column相同，一相反的顺序
initial	设置该属性为他的默认值
inherit	继承父元素

2.justify-content 横轴对齐

设定内容沿着容器横轴线的对齐方式

justify-content:flex-start | flex-end | center | space-between | space-around;

flex-start：默认值，位于项目开头，紧挨着填充

flex-end：位于项目尾部，紧挨着填充

center：容器中心，居中显示

space-between：项目头尾填充，各行之间之间平均间隔分布。

space-around：位于各行之前，之后都留有空白

flex-start:

+----------------+
|SSSSS			 |
+----------------+

flex-end:

+----------------+
|			SSSSS|
+----------------+

center:

+----------------+
|S	S	S	S	S|
+----------------+

space-between:

+----------------+
|S	S	S	S	S|
+----------------+

space-around:

+-----------------+
|  S  S  S  S  S  |
+-----------------+

3.align-items 纵轴对齐

设置盒子关于纵轴方向上的对齐方式

align-items:flex-start/flex-end/center/baseline/stretch;

flex-start:

+-----------------+
|  S  S  S  S  S  |
|                 |
|				  |
+-----------------+

flex-end:

+------------------+
|				   |
|				   |
|  S  S  S  S  S   |
+------------------+

center:

+------------------+
|                  |
|  S  S  S  S  S   |
|				   |
+------------------+

baseline:

+------------------+
|  S  S  S  S  S   |
|                  |
|                  |
+------------------+

stretch:

+------------------+
|  S  S  S  S  S   |
|				   |
|                  |
+------------------+

4.flew-wrap

flew-wrap属性规定flex容器是单行还是多行，同时横轴方向决定了新行堆叠的放向，如果元素不是弹性盒对象，则flew-wrap属性不起作用

flew-wrap:nowrap/wrap/wrap-reverse/initial/inherit;

nowrap:默认，弹性容器为单行

wrap:默认弹性容器为多行，多出的子项将弹置到新行

wrap-reverse:反转wrap排列

initial:默认值

inherit:继承父类

5.align-content

用于修改flex-wrap的行为，类似于align-items，设个置各个行的对齐。

align-content:
flex-start/flex-end/center/space-between/space-around/stretch;

stretch：moren

flex-start：各行向弹性盒容器的起始位置堆叠

flex-end：各行向弹性盒容器的结束位置堆叠

center：各行向弹性盒容器的中间位置堆叠

space-between：各行在弹性盒容器中平均分布

space-around：各行在弹性盒容器中平均分布，两端保留子元素和子元素之间间距大小的一般

--子集内容的修改

flex-box布局不仅仅是对父级容器的设置，对于子集元素也可以设置它们的属性，

需要介绍的属性有：

1.flex（用于指定弹性子元素如何分配空间）

2.order（用整数值来定义排序顺序，数值小的排在前面）

1.flex属性

用于设置或检索弹性盒模型对象的子元素如何分配空间

flex属性时：flex-grow、flex-shrink、flex-basis属性的简写属性。

/元素必须为弹性盒模型对象的子元素，否则不起作用/

flex:flex-grow flex-shrink flex-basis/auto/initial/inherit;

flex-grow：数字，规定项目相对其他项目的扩展量

flex-shrink：数字，规定项目相对其他项目的收缩量

flex-basis：项目的长度，合法值：auto inherit 或后跟 % px em 任何其他长度单位的数字

auto：与1 1 auto相同

none：与0 0 auto相同

initial：设置该属性为他的默认值，即为0 1 auto

inherit：继承父元素

子元素自身内容在父级元素中如何排列。

2.order属性

设置检索弹性盒模型对象的子元素出现的顺序。

/如果元素不是弹性盒对象的元素，则order属性不起作用/

order:number/initial/inherit;

number：默认值是0

initial：设置该属性为他的默认值

inherit：继承父元素

修改子元素出现的顺序。

8.CSS3新增选择器用法

公共特征：允许开发者根据文档结构来指定元素样式；

--新增结构性伪类

1.root

匹配文档的根元素，在html中根元素永远是HTML

2.empty

没有任何子元素（包括text节点）的元素E

<style>
    div:empty{
        width:100px;
        height:100px;
        background-color:#f0f000;
    }
</style>
---------------
<div>
    我是div的子集，我是文本
</div>
<div></div>
<div>
    <span>我是div的子集，我是span标签</span>
</div>
<!-- 上述css代码将选择中间的div，因为empty选择的是没有子元素的样式 -->

结果演示：

我是div的子集，我是文本

我是div的子集，我是span标签

3.:nth-child(n)

选择器匹配属于其父元素的第n个子元素，无论元素的类型。n可以为数字关键字或公式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择为3的倍数的元素 */
        ul li:nth-child(3n){
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li>语文</li>
        <li>地理</li>
        <li>数学</li>
        <li>英语</li>
    </ul>
</body>
</html>

演示效果：

语文
地理
数学
英语

用于选择父元素中的第N个元素

奇偶选择：

：nth-child(odd) 匹配括号为基数的元素，等同于：nth-child(2n+1)

：nth-child(even) 匹配括号为偶数的元素，等同于：nth-child(2n)

4.：nth-of-type(n)

需和:nth-child(n)分开使用，

:nth-child(n)选择器匹配属于父元素的特定类型的第n个元素的每个元素，

前者无论元素类型，后则是从选择器的元素类型开始计算。

5.:last-child

选择器匹配属于其父元素的最后一个子元素的每个元素

6.:nth-last-of-type(n)

匹配属于父元素的特定类型的第n个子元素的每个元素，从最后一个子元素开始计数。

7.:nth-last-child(n)

匹配属于其元素的第n个子元素的每个元素，无论元素的类型，从最后一个子元素开始计数。

p:nth-last-child等同于p:nth-last-child(1)

8.:only-child

匹配属于其父元素的唯一子元素的每个元素

9.:only-of-type

匹配属于其父元素的特定类型的唯一子元素的每个元素

--新增UI元素状态伪类

1.:checked

匹配每个一被选中的input（只适用于单选按钮和复选框）

2.:enabled

匹配每个已启用的元素（大多用在表单元素上）

3.:disabled

选择已经被禁用的元素

与:endabled用法相同；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled{
            background: #ffff00;
        }
        input:disabled{
            background:#dddddd;
        }
    </style>
</head>
<body>
    <form action="">
        姓名：<input type="text" value="姓名"><br>
        曾用名：<input type="text" value="曾用名"><br>
        生日：<input type="text" disabled="disabled" value="生日"><br>
        密码：<input type="password" name="密码"><br>
            <input type="radio" value="male" name="gender">游泳<br>
            <input type="radio" value="female" name="gender">跑步<br>
            <input type="checkbox" value="Bike">打球<br>
            <input type="checkbox" value="Car">听歌
    </form>
</body>
</html>

如何禁用元素？

使用disabled元素：

<input type="text" disabled="disabled">

4.::selection

定义用户鼠标已选择内容的样式

只能向：：selection选择器应用少量CSS属性：color,background,cursor,outline。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ::selection{
            color:red;
        }
    </style>
</head>
<body>
    <h1>请选择页面中的文本</h1>
    <p>这是一段你文字</p>
    <div>这是一段文字</div>
    <a href="#">这是一段文字</a>
</body>
</html>
<!-- 将鼠标滑过选中的颜色变为红色 -->

选中鼠标已划中选择的样式。

--CSS3新增属性

1.:target

:target选择器可用于选择当前活动的目标元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:#ccc;
            margin:20px;
        }
        :target{
            background:#f46;
        }
    </style>
</head>
<body>
    <h1>请点击下面的链接</h1>
    <p><a href="#content1">跳转到第一个</a></p>
    <p><a href="#content2">跳转到第二个</a></p>
    <hr>
    <div id="content1"></div>
    <div id="content2"></div>
</body>
</html>
<!-- 用于给当前活动的元素添加样式 -->

2.:not

:not(selector)选择器匹配其非指定元素/选择器的每个元素

选择所有处lselector标签的所有其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :not(p){
            border:1px solid red;
        }
    </style>
</head>
<body>
    <span>这是span内的文字</span>
    <p>这是第1行p标签文本</p>
    <p>这是第2行p标签文本</p>
    <p>这是第3行p标签文本</p>
    <p>这是第4行p标签文本</p>
</body>
</html>
<!-- 选择所有非p标签的所有标签 -->

演示效果：

这是span内的文字

这是第一行p标签文本

这是第二行p标签文本

这是第三行p标签文本

这是第四行p标签文本

3.:[attribute]

选择启用于选取带有指定属性的元素

我们选中页面中所有带有title属性的元素，并且添加文本样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [title="red"]{
            color:red;
        }
    </style>
</head>
<body>
    <span title="">这是span内的文本</span>
    <p>这是第1行的p标签文本</p>
    <p title="red">这是第2行的p标签文本</p>
    <p>这是第3行的p标签文本</p>
    <p>这是第4行的p标签文本</p>
</body>
</html>
<!-- 选择属性中含有title="red"的元素 -->

选择便签属性中有”[]“中所描述的属性值

演示效果：

这是span内的文本
这是第一行的p标签文本

这是第二行的p标签文本

这是第三行的p标签文本这是第四行的p标签文本

--设计颜色样式

1.使用RGBA颜色值

RGBA色彩模式是RGB颜色模式的扩展，他在红、绿、蓝三色通道基础上增加了不透明度参数。

语法：rgba(r,g,b,)

2.使用HSL颜色值

HSL颜色表现方式，是工业界的一种颜色标准，他对色调（H）、饱和度（S）、和亮相（L）三个颜色通道的变化以及他们互相之间的叠加来获得各种颜色，是目前运用最广的颜色系统之一。

语法：hsl(,,)

参数说明如下：

length：色调，可取任意值，其中0（360，-360）表示红色，60表示黄色，120表示绿色等

percentage：表示饱和度，也就是色彩被使用了多少，深浅鲜艳程度，取值0-100%。

percentage：亮度，取值0-100%，0为最暗，50为均衡，100为白色。

3.使用HSLA颜色值

表现形式如上述语法相同，只不过添加了个不透明度值，选项，取值0-1.

语法：hsl(,,,)

9.变色和移动函数

--渐变

渐变就是颜色和颜色之间的平滑过渡效果。

1.线性渐变

向下/向上/向右/对角方向；

渐变属性：linear-gradient，默认的渐变方向是从上至下的。

语法：background:linear-gradient(direction,color-stop1,color-stop2,....);

如果需要调整渐变方向：

left：从左到右

right：从右到左

top：从上到下，默认

bottom：从下到上

对角渐变：

left top：左上到右下

left bottom：左下到右上

right bottom：右下到左上

right top：右上到左下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:1920px;
            height:1080px;
            background:linear-gradient(left top,red,blue);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!-- 左上角到右下角对角渐变 -->

效果：

如果觉得渐变方式还不够的话，可以使用角度来控制渐变方向：

语法：linear-gradient(angle,color_1,color_2,....);

单位：deg

注意！，使用任何方向渐变及其对角渐变的时候都必须加上各个浏览器的内核标准

2.径向渐变

由他们的中心定义渐变，其实就是呈圆形的向外进行渐变的操作。

要想创建一个径向渐变，至少定义两种颜色节点，而且还

可以定义渐变的中心,形状（圆形或椭圆）,大小，默认渐变中心是center中心点。

渐变形状：elipse表示椭圆形。

渐变大小：farthest-corner（表示最圆的角落）

语法：background:radial-gradient(center,shape size,start-color,...,last-color);

还可在每种颜色后加入颜色所占的比例；%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:-webkit-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

3.字体渐变

给字体添加渐变效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span {
            background-image: linear-gradient(135deg, deeppink, dodgerblue);
            font-size: 20px;
            font-weight: bold;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            -moz-box-decoration-break: clone;
            color: transparent;
            position: relative;
        }
        span::selection {
            color: deeppink;
            background-color: #0ff;
        }
        .b {
            position: relative;
            top: 4px;
            left: -497px;
        }
    </style>
</head>
<body>
    <div class="a"><span> 理想今年你几岁</span></div>
    <div align="center" class="b"><span> 理想今年你几岁</span></div>
</body>
</html>

效果如下：

--2D转换

1.移动translate()

translate()移动，根据左部x轴，和顶部y轴给定的参数，从当前元素位置移动到新的位置

移动可以为负，则为反方向移动

三种移动方式

1.横向移动translateX

使元素进行横向移动

transform:translateX(10px);
<!-- 向右移动10px -->

transform:translateX(-10px);
<!-- 向左移动10px -->

2.纵向移动translateY

使元素进行纵向移动

transform:translateY(10px);
<!-- 向下移动10px -->

transform:translateY(-10px);
<!-- 向上移动10px -->

3.同步运动translate

使用translate进行同时的横纵运动

语法transform:translate(..px,..px);

transform:translate(xpx,ypx);
<!-- 向左移动xpx，下移动ypx -->

transform:translate(100px,-50px);
<!-- 向右移动100px，向上移动50px -->

2.旋转运动rotate()

使元素进行旋转得到新的元素

旋转需要给定旋转度数，负值是允许的，这表示逆时针旋转。

旋转单位deg

transform:rotate(..deg)

transform:rotate(45deg)
<!-- 顺时针旋转45度 -->

transform:rotate(-90deg)
<!-- 逆时针旋转90度 -->

3.缩放scale()

使元素变大或变小，取决于宽度的x轴和高度的y轴。

通过此法可以对页面中的元素进行等比例的放大或缩小，还可以定义缩放大小的中心。

缩放值为0-1，可以为小数

1.缩放

语法：scale(..px,..px);

transform:scale(1.5);
<!-- 等比例放大原图的1.5倍 -->

transform:scale(0.5);
<!-- 等比例缩小原图的一半 -->

transform:scale(1.5,2);
<!-- 横向放大1.5倍，纵向放大2倍 -->

2.改变缩放的中心点

语法：transform-orgin:x-axis y-axis z-axis;

transform-orgin:0 0;
<!-- 中心点所示位置为下图所示-->

4.倾斜skew()

语法：transform:skew(..px);

transform:skew(45deg);
<!-- 倾斜45度 -->

正方形倾斜效果如下演示：

5.合并matrix()

martrix()方法和2D转换方法合并成为一个

martrix方法共有六个参数：旋转，缩放，移动（平移），倾斜。

--3D转换

1.rotateX()方法

以一个定度绕X轴旋转元素，即上下旋转，顺时针。

transform:rotateX(180deg);
<!-- 上下旋转180度 -->

2.rotateY()方法

以一个定度绕Y轴旋转元素，即左右旋转，顺时针。

transform:rotateY(180deg);
<!-- 左右旋转180度 -->

3.transform-style属性

规定被转换元素如何在3D空间中显示

语法：transform-style:flat/preserve-3d;

flat：表示所有子元素在2D平面呈现

preserve-3d：表示所有子元素在3D空间呈现

transform-style:preserve-3d;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1{
            position: relative;
            height: 200px;
            width: 200px;
            margin:100px;
            padding: 10px;
            border:1px solid black;
        }
        #d2{
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: #f66;
            transform:rotateY(60deg);
            transform-style: preserve-3d;
            -moz-transform: rotateY(60deg);
            -moz-transform-style:preserve-3d;
        }
        #d3{
            padding:40px;
            position:absolute;
            border:1px solid black;
            background-color: green;
            transform: rotateY(-60deg);
            -moz-transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">HELLO
            <div id="d3">world</div>
        </div>
    </div>
</body>
</html>

效果如下：

4.perspective透视

定义3D元素距视图的距离，以像素计。子元素获得透视效果，而不是元素本身

语法：perspective:number/none;

number：元素距离视图的距离px；

none：默认值与0相同，不设置透视。

perspective-origin

定义了3D元素所基于X轴和Y轴，该属性允许改变3D元素的底部位置

必须和perspective属性同时使用

语法：perspective-origin:x-axis y-axis;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            position: relative;
            height: 150px;
            width:150px;
            margin:50px;
            padding:10px;
            border:1px solid black;
            -webkit-perspective:150;
        }
        #div2{
            padding:50px;
            position: absolute;
            border:1px solid black;
            background-color: #c96;
            -webkit-transform:rotateX(30deg);
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">CSS3 3D转换</div>
    </div>
</body>
</html>

效果如下：

5.backface-visibility

该属性定义了元素不面向屏幕时是否可见

语法：backface-visibility:visible/hidden;

visible：背面可见

hidden：背面不可见

10.动画

--过渡transition

语法：transition：过度名称过渡时间过度曲线延时时间；

所谓过度就是一种状态到另一中状态的过程。

属性	描述
transition	简写属性，用于在一个属性中设置4个过度属性
transition-property	规定CSS过渡的属性名称
transition-duration	定义过度所用时间
transition-timing-function	定义过渡效果的曲线，默认“ease”
transition-delay	定义过渡效果何时开始，默认为0

其中的transition-timing-function属性其实就是规定用户想要的动画方式：

linear：以相同的速度开始至节俗的过渡效果，相当于cubic-bezier(0,0,1,1)

ease：规定慢速开始，然后变快，然后再慢速结束过渡效果，相当于cubic-bezier(0.25,0.1,0.25,1);

ease-in：慢速开始的过渡效果，相当于cubic-bezier(0.42,0,1,1)

ease-out：慢速结束的过渡效果，相当于cubic-bezier(0,0,0.58,1)

ease-int-out：设置慢速开始和结束的过渡效果，相当于cubic-bezier(0.42,0,0.58,1)

eubic-bezier(n,n,n,n):自定义自己的值，可能的值是0-1之间，其中transition-delay属性表示的过度的延时时间，0代表没有延迟，立马执行

1.单项过渡

规定一项元素进行单项过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color: aqua;
            transition: background-color 3s ease 3s;
        }
        div:hover{
            background-color: violet;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!-- 当鼠标放在div上时，等到3s后会默认的过渡，过渡时间为3s -->

2.多项过渡

设置多个元素进行过渡，其中分为两种：

第一种是全部过度

第二种是过渡选中的元素

-1.全部过渡

全部过渡使用all关键子属性。

语法：transition: all ...s;

transition:all 3s;
<!-- 设置所有的变化元素过渡时间为3秒 -->

-2.定义元素过渡

设置部分元素过渡,使用逗号隔开。

语法：transition: ... ..s , ... ..s , ...... ;

transition:color 3s,skew(30deg) 5s;
<!-- 定义三秒内变色，以及5秒内完成倾斜过渡 -->

--动画

关于动画的属性共有三个：transform，transition，animation。

动画需要掌握关键帧概念，@keyframes。

使用的关键字是：animation

想要设计好动画，就必须了解动画的这些属性

动画属性

-1.@keyframes规则

想要学好动画，就必须掌握@keyframes规则

创建动画是通过逐步改变从一个CSS样式设定到另一个。

动画过程中，可以多次更改CSS样式的设定

指定变化发生时间使用%，或关键字“from”和“to”，等同于0和100%

0%是开头动画，100%是动画完成

为了获得最佳的浏览器支持，影视中定义0和100%的选择器

-2.animation简写

所有的动画简写属性，除了animation-play-states属性

语法：animation : name duration timing-function delay iteration-count direction fill-mode play-state;

属性描述如下：

-3.animation-name名称

animation-name属性为@keyframes动画规定名称

语法描述：

animation-name:keyframename/none;

keyframename:规定需要绑定到选择器keyframe的名称

none：规定无动画效果

-4.animation-duration动画时间

定义动画完成周期需要多少时间（秒或者毫秒）

语法描述：

animation-duration:time;

animation-duration:3s;
<!-- 动画时间设置为3s -->

-5.animation-timing-function动画曲线

指定动画将如何完成一个周期

速度曲线定义动画从一套CSS样式变为另一套所用的时间

速度曲线用于是变化更加平滑

语法描述：

animation-timing-function:value;

value值如下：

inear:从头到尾的速度相同

ease:默认，以慢速开始，然后加快，然后慢速结束

ease-in:动画以慢速开始

ease-out:动画以慢速结束

ease-in-out:动画以低俗开始和结束

cubic-bezier(n,n,n,n):自定义自己的值

-6.animation-delay延时开始

定义动画开始的延时时间，单位可以是s，可以是毫秒

语法描述：

animation-delay:3s;
<!-- 当动画开始之前先延时3秒 -->

-7.animation-iteration-count播放次数

该属性定义动画应该播放多少次，默认为1

属性值如下：

n：一个数字，定义播放次数

infinite：指定动画应该无限次播放

语法描述：

animation-iteration-count:3;
<!-- 规定动画播放次数为3次 -->

animation-iteration-count:infinite;
<!-- 规定动画无限次播放 -->

-8.animation-direction

规定动画是否在下一周期逆向的播放，默认值为“normal”。

定义是否循环交替反向播放动画。

语法描述：

animation-direction:normal/reverse/alternate/alternate-reverse/initial/inherit;

属性值详细如下：

normal：默认值动画正常播放

reverse：动画反向播放

alternate：动画在奇数次（1，3，5，7.。。。）正向播放，偶数次（2，4，6，8.。。）反向播放

alternate-reverse：动画效果和alternate相反。

initial：设置该属性为他的默认值

inherit：继承父元素

-9.animation-play-state

规定动画是否正在运行或暂停，默认为running

语法描述：

animation-play-state:paused/running;

属性值如下：

paused：指定暂停动画

running：指定正在运行的动画

-10.效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background: blue;
            animation:myAni 5s infinite;
        }
        @keyframes myAni{
            0%{
                margin-left:0px;
                background:blue;
            }
            50%{
                margin-left:500px;
                background:red;
            }
            100%{
                margin-left: 0px;
                background: blue;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

animation:myAni 5s inear 2 infinite reverse;
<!--
规定动画myAni时长为5s，动画运匀速播放，动画开始时延时2s开始，动画无限次播放，并且动画反向播放 
-->

11.网页自适应

程序员和用户的电脑不一定一样，屏幕的分辨率也没办法保证一定，这就导致程序员做好的网页放到其他用户里却显示异常和自己的不太一样，这是因为制作时的分辨率和用户的不一致，导致用户看到的也就不一样，如何修正这一问题，就需要用到网页自适应。让网页根据用户的窗口分辨率自动调节页面内容及排版等，自动适应分辨率。

-.@media多媒体查讯

多媒体窗口查询语法：

@media mediatype and/not/only (media feature){
	CSS-Code;
}

and：和

not：不

only：不在之间

当然也可以通过不同的媒体使用不同的CSS样式表：

<link rel="stylesheet" media="mediatype and/not/only (media feature)" href="index.css">

语法描述：

@media screen and (min-width:500px) and (max-width:800px){
	.box{
		width:50px;
		height:50px;
		width:50%;
	}
	.content{
		width:100%;
		column-count:1;
	}
}
<!-- 
当分辨率最小为500px，最大为800px，（500-800）之间时，设置box和content元素样式
-->

-.用户界面

用户界面，顾名思义是照顾用户的使用感受而存在的，包括重设元素尺寸，盒尺寸及轮廓

共包括以下三种属性：

resize

box-sizing

outline-offset

1.调整尺寸resize

原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素），这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时，该如何？答案就是JavaScript来实现，但这样会极大延长代码，逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。

语法：resize:none/both/horizontal/vertical;

属性值如下：

none：用户无法调整元素尺寸

both：用户可以调整元素尺寸

horizontal：用户可调整元素宽度

vertical：用户可调整元素高度

语法描述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height:200px;
            border:1px solid red;
            text-align:center;
            font-size:20px;
            line-height: 200px;
            margin:10px;
        }
        .d2{
            resize:both;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="d1">这是传统的div元素</div>
    <div class="d2">这是可以让用户*调整尺寸的元素</div>
</body>
</html>

这是可以让用户*调整尺寸的元素

效果描述：

2.方框大小调整box-sizing

该属性是CSS3的box属性之一，遵循了盒子模型的原理。

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素

语法：box-sizing：content-box / border-box / inherit;

box-sizing的属性：

content-box:这是CSS2.1规定的宽度和高度行为，分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过设定的高度和宽度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：从父元素继承box-sizing属性值

注意：需要关注的是border-box值得用法，如，现在有一个方形按钮div（200x50），按钮中间有一个圆形的div（30x30），要让圆形div对方形div居中，传统做法是是指圆形的margin值，但还要考虑他的父级元素的margin值，防止外边距合并。
换一种思路，不对圆形div操作，而是让方形按钮用有内边距，是不是也可以

语法描述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn{
            width:200px;
            height:50px;
            border-radius: 10px;
            background: #f99;
            margin:10px;
            position: relative;
        }
        .d2{
            padding:10px 85px;
            width:30px;
            height:30px;
        }
        .circle{
            width:30px;
            height:30px;
            border-radius: 15px;
            background: #ffffff;
        }
        .c1{
            top: 10px;
            left: 85px;
            position: absolute;
        }
        .d3{
            box-sizing: border-box;
            padding:10px 85px;
        }
    </style>
</head>
<body>
    <div class="btn d1">
        <div class="circle c1"></div>
    </div>
    <div class="btn d2">
        <div class="circle"></div>
    </div>
    <div class="btn d3">
        <div class="circle"></div>
    </div>
</body>
</html>

3.外形修饰outline-offset

对轮廓进行偏移，并在边框边缘进行绘制，

轮廓和边框在两方面不同：轮廓不占空间，轮廓可能是非矩形。

语法:outline-offset：..px;

语法描述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:100px;
            outline:2px solid black;
            margin:60px;
        }
        .d1{
            background:pink;
        }
        .d2{
            background: greenyellow;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div class="d1">我的外轮廓没有偏移</div>
    <div class="d2">我的外轮廓是偏移的</div>
</body>
</html>

我的外轮廓没有偏移我的外轮廓是偏移的

演示效果如下：

-.界面的多列布局

CSS3提供了新属性columns用于多列布局。

1.column-count

语法：column-count:...;

column-count属性规定元素应该被划分的列数

文字的多列布局在网页中进场用到：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            border:1px solid red;
            column-count:3;
        }
    </style>
</head>
<body>
    <div>
        原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素），
        这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时，
        该如何？答案就是JavaScript来实现，但这样会极大延长代码，
        逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。
    </div>
</body>
</html>

效果演示如上|

2.column-gap

该属性规定列之间的间隔，如果列之间设置了column-rule，他会在间隔中间显示。

语法：column-gap:...px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            border:1px solid red;
            column-count:3;
            column-gap:50px;
        }
    </style>
</head>
<body>
    <div>
        原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素），
        这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时，
        该如何？答案就是JavaScript来实现，但这样会极大延长代码，
        逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。
    </div>
</body>
</html>
<!-- 将每列之间的距离设置为50px -->

3.column-rule-style

该属性规定列之间的样式规制，类似于border-style属性

属性值如下：

none：没有规则

hidden：隐藏规则

dotted：点状规则

dashed：虚线规则

solid：实线规则

double：双线规则

groove：定义了3Dgrooved规则，该效果取决于宽度和颜色值

ridge：定义3Dridged规则，该效果取决于宽度和颜色值

inset：定义了3Dinset规则，该效果取决于宽度和颜色值

outset：定义了3Doutset规则，该效果取决于宽度和颜色值

4.column-rule-width

规定列之间分割线的宽度规则，类似于border-width属性

语法：column-rule-width:thin/medium/thick/length:

属性值如下：

thin：纤细

medium：中等

thick：宽厚

length：自定义

5.column-rule-color

规定列之间分割线的颜色规则，类似于border-color属性。

column-rule-color:red;
column-rule-width:5px;
column-rule-style:dotted;
<!-- 设置分割线为5px的红色点状线 -->

演示如下：

6.column-rule简写属性

是一个简写属性，用于设置所有的column-rule属性，用于设置列分割线的延时，样式，宽度。

语法：column-rule:... ... ...;

column-rule：颜色样式宽度;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            border:1px solid red;
            column-count:3;
            column-rule:blue 5px double;
        }
    </style>
</head>
<body>
    <div>
        原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素），
        这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时，
        该如何？答案就是JavaScript来实现，但这样会极大延长代码，
        逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。
    </div>
</body>
</html>

演示如下：

7.column-span

规定元素应横跨多少列

语法：column-span: 1/all；

8.column-width

规定每一列的宽度

语法：column-width：auto/length；

9.columns简写属性

是一个简写属性，用于列的宽度和列数

语法：columns：column-width column-count;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            border:1px solid red;
            columns: 30px 5;
        }
    </style>
</head>
<body>
    <div>
        原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素），
        这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时，
        该如何？答案就是JavaScript来实现，但这样会极大延长代码，
        逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。
    </div>
</body>
</html>

演示如下：

码农公寓

CSS3 笔记

CSS3

1.CSS的引入

1.内联引入法

2.内部引用法

3.外联引用法

2.CSS选择器

1.元素选择器

2.类选择器

3.ID选择器

4.集体选择器

5.属性选择器

6.后代选择器

7.子元素选择器

8.相邻兄弟选择器

9.所有元素选择器

10. !important

11.选择器的结合使用

12.伪类选择器

1.anchor伪类

2.伪类和CSS类搭配

3.first-child伪类

4.lang伪类

3.伪元素

1.first-line 伪元素

2.first-letter 伪元素

3.:before 伪元素

4.:after 伪元素

4.CSS的继承和单位

1.继承关系

2.CSS的局限性

3.CSS绝对数值单位

1.像素（px）

2.常见单位

4.CSS相对数值单位

5.CSS定位

1.浮动定位

2.绝对定位

3.相对定位

4.固定定位

5.z-index索引优先级

6.CSS常用样式

--设置字体样式

1.字体font-family

2.字号font-size

3.字重font-weight

4.文本转换text-transform

5.字体风格font-style

6.字体颜色color

7.文本修饰text-decoration

8.简写font

--设置段落样式

1.字符间隔letter-spacing

2.单词间隔word-spacing

3.段落缩进text-indent

4.横向对齐方式text-align

5.纵向对齐方式vertical-align

6.文本行间距line-height

--设置边框

7.边框样式border-style

8.边框颜色border-color

9.边框宽度border-width

10.简写边框效果

--设置轮廓

1.轮廓线型outline-style

2.轮廓颜色outline-color

3.轮廓宽度outline-width

4.外轮廓outline简写

5.轮廓和边框之间的异同点

--设置列表属性

1.列表样式list-style-type

2.列表标记图像list-style-image

3.列表记得位置list-style-position

4.间歇列表属性list-style

--设置元素阴影border-shadow

--设置盒子等元素的圆角border-radius

7.盒子模型

--盒子模型介绍

1.外边距设置