标签：CSS3 color 元素 笔记 inherit 设置 border 属性
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>
原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素）， 这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时， 该如何？答案就是JavaScript来实现，但这样会极大延长代码， 逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。
效果演示如上|
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 -->
原生的HTML元素中很少有能让用户自行调节元素的尺寸（除了textarea元素）， 这样其实是对用户进行了极大的限制，如果有需要用户自己去调节元素尺寸时， 该如何？答案就是JavaScript来实现，但这样会极大延长代码， 逻辑复杂，开发周期长，所以，CSS3提供了一个resize属性。
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,color,元素,笔记,inherit,设置,border,属性 来源： https://www.cnblogs.com/MaziLong/p/15861937.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。