HTML+CSS基础知识 - 1.2 CSS选择器+常用属性+高级应用
创建一个HTML文件、一个CSS文件，用户将CSS文件链接到HTML文件时，在HTML5页面的标记中（or head与body标记之间）添加以下代码：
一、CSS3中的选择器
1.属性选择器：
[att=val]{} 属性=属性值
示例代码如下：
(1)先在HTML5中为标记添加属性
编程图书1
编程图书2
编程1
编程2
哈喽哈喽黑
请给我舞台
(2)在CSS3中使用属性选择器选择对应的标记来改变样式
[font=fontize]{ /*选择所有属性的属性值为font=fontize的标记*/
font-size: 20px; /*设置其字体大小为20像素*/
}
[color=red]{ /*选择所有属性的属性值为color=red的
标记*/
color:red; /*设置其字体颜色为红色*/
}
[color=green]{ /*选择所有属性的属性值为color=green
标记*/
color:green; /*设置其字体颜色为绿色*/
}
2.类和ID选择器：
class属性可以定义多个，id属性只能定义一个
示例代码如下：
123
3.伪类和伪类元素选择器：
可参照：
链接: https://blog.csdn.net/Hierarch_Lee/article/details/52609400.
二、常用属性
1.设置字体属性font-family
语法格式如下：
font-family:name1,[name2],[name3]
示例如下：
.mr-font1{
font-family:"宋体","楷体","黑体";
}
2.设置字号属性font-size
语法格式如下：
font-size:length
3.设置文字颜色属性color
语法格式如下：
color:color
示例如下：
h3{color:blue;}
h3{color:#0000ff;}
h3{color:rgb(0,0,255);}
4.设置文字水平对齐方式
语法格式如下：
text-align:left|center|right|justify
/*左对齐、居中、右对齐、两端对齐*/
5.设置段首缩进格式
语法格式如下：
text-indent:length
/*length:直接定义的长度或者由浮点数和单位标识符组合*/
6.背景相关属性
语法格式如下：
(1)添加背景颜色属性
background-color:color|transparent ;
/*color:设置背景颜色 transparent:表示背景颜色透明*/
(2)添加背景图像
background-image:url() ;
/*url:图片地址 (相对地址/绝对地址)*/
(3)设置图像平铺方式
background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y;
/*继承父标记/背景图只显示一次/重复显示/仅沿x轴方向重复/仅沿y轴方向重复*/
(4)背景图像是否随页面内容滚动
background-attachment: scroll | fixed;
/*滚动/不动*/
(5)背景图像在页面中的位置
background-position: length|percentage;
/*图像和页边距水平和垂直距离,单位:cm,mm,px /按框的长宽百分比放置*/
background-position: top|center|bottom|left|right;
/*图像顶部居中显示/居中/底部居中/左部居中/右部居中*/
简化示例代码：
background: url(img/img3.jpg) left top no-repeat;
7.列表相关属性
（1）list-style : 这是 一 个复合属性，使用该属性可以同时指定 list-style-image 、 list-style-position、 list-style-type 三个属性。
（2） Iist-style-image: 将图像设置为列表项标志。
（3）list-style-position: 指定列表项标记出现的位置。该属性支持 outside （列表 项标记放在列表元素之外）和 inside（列表项标记放在列表元 素之内）两个属性值。
（4） list-style-type: 设置列表项标记的类型。
可参见: https://blog.csdn.net/qq_40641206/article/details/104093012.
三、高级应用
1.框模型
(1)外边距
语法结构：
margin-top:| auto;
/*百分比或长度值 | 默认*/
/*top、right、bottom、left*/
语法结构二：
/*auto自适应居中,适用于左右*/
/*一个值:上下左右*/
/*两个值:上下,左右*/
/*三个值:上,左右,下*/
/*四个值:上,右,下,左*/
margin: 100px auto;
(2)内边距
padding,与外边框类似
区别：1.auto对padding属性无作用
2.margin接受负值，padding不接受
(3)边框
颜色
/*语法结构一:*/
border-bottom-color: #0000FF;
/*top、right、bottom、left*/
/*语法结构二:*/
border-color: red #FF0000 #f00 rgb(255,0,0);
/*上, 右, 下, 左 （顺时针方向）*/
宽度
border-width: medium | thin | thick |length;
/*默认|比默认窄|比默认宽|指定长度*/
边框样式
/*语法结构一:*/
border-style: hidden | none;
/*隐藏边框 | 没有边框*/
/*语法结构二:*/
border-style: dashed | dotted | double | groove;
/*边框样式:虚线 | 点线 | 双线 | 3D凹槽*/
/*语法结构三:*/
border-style:inset | outset | ridge | solid;
/*线条样式:3D凹边 | 3D凸边 | 菱形边框 | 实线*/
注意：
１．border-color生效条件：
（１）border-style被设置且不为none
（２）border-width不为0
２．可通过border综合设置所有属性：
border:border-width border-style border-color
2.布局常用属性
(1)浮动
float: left |right |none;
/*元素浮动在左侧|右侧|不浮动*/
(2)定位相关属性
position: static | absolute| fixed | relative;
3.动画与特效
(1)变换
transform:平移、缩放、倾斜等2D操作 。
transform-origin:用于设置中心点的变换。
transform的常用属性总结参见：
链接: https://blog.csdn.net/qq_43129072/article/details/83148997.
(2)过渡
指定参与过渡的属性：
transition-property: all |none |;
/*默认,所有可过渡的属性 | 不指定| 输入名字,逗号隔开*/
指定过渡持续时间：
transition-duration:指定过渡的延迟时间属性：
transition-delay:指定过渡的动画类型：；transition-timing-function
transition-timing-function:linear |ease
/*匀速过渡 | 逐渐慢下来*/
transition-timing-function:ease-in | ease-out|ease-in-out
/*逐渐加速 |逐渐减速|慢-快-慢*/
transition-timing-function:cubic-bezier(x1,y1,x2,y2);
/*特定的贝塞尔曲线*/
(3)动画
定义关键帧：
@keyframes name {};
/*定义动画名称|定义动画在不同时间段的样式规则*/
引用关键帧：
from{
...
属性n:属性值n;
}
to{
...
属性n:属性值n;
}
百分比1{
...
属性n:属性值n;
}
百分比n{
...
属性n:属性值n;
}
动画实现参见：
链接: https://blog.csdn.net/u011930054/article/details/98944023.
四、示例代码
1.代码
基础案例
2.结果展示：
光标置于图上时会旋转、放大并变换图片
五、链接内容：
1.transform属性的属性值
链接: https://blog.csdn.net/qq_43129072/article/details/83148997.
链接作者：CSDN博主「Wn洋」的原创文章
链接内容：
2.动画实现参见：
链接: https://blog.csdn.net/u011930054/article/details/98944023.
链接作者：CSDN博主「在路上奔跑~」的原创文章
部分链接内容：
