一、CSS样式定义与应用：
1.使用标签style属性应用CSS样式：
<HTML标签 style="属性名1:属性值; 属性名2:属性值; ...">...</HTML标签>
2.内部使用(只能当前网页使用)，将<style></style>样式定义在Html页面的<head><head/>中，设置指定HTML标签样式，在HTML5中<style>可以省略type="text/css"：
<head>
<style>
选择器1 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
选择器2 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
...
</style>
</head>
3.外部引入(可以多个网页使用)，将<style></style>样式定义在以.css为扩展名的文件中，在指定网页中使用<link>标签引入：
x.css文件中定义样式：
选择器1 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
选择器2 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
...
x.html中引入x.css文件，rel="stylesheet"表示引入的是样式文件，href指定样式文件路径。type="text/css"表示外部文件为css样式，HTML5中可以省略：
<head>
<link rel="stylesheet" href="x.css文件路径">
</head>
二、选择器分类：
1.基础选择器：
(1)标签选择器，使用html标签作为选择器，所有此html标签都应用该样式：
html标签名 { /* 使用HTML标签名作为选择器 */
属性名:属性值;
}
(2)类选择器：
定义样式，以 .类名 定义，该类名定义的样式允许多处使用：
.类名1 {
属性名:属性值;
}
.类名2 {
属性名:属性值;
}
使用样式，在html标签中使用class属性应用该样式，多个类名之间用空格隔开：
<span class="类名1 类名2 ..."></span>
(3)id选择器，
定义样式，在id名前加#，该id名定义的样式只能在一处使用：
#id名 {
属性名:属性值;
}
使用样式，在html标签中使用id属性应用该样式：
<span id="id名"></span>
(4)*通配符选择器，使用*作为名称，当前网页所有html标签均使用此样式，
* {
属性名:属性值;
}
2.复合选择器：
(1)后代(包含)选择器，对<html父标签>内部指定的<子孙标签>生效：
定义样式，类名被html父标签引用：
.类名或html父标签 html子标签 html孙标签 { /* 此处html子孙标签可以一级或多级，多级时用空格隔开 */
属性名：属性值;
}
对<html子标签+孙标签>使用样式(样式定义为 .类，才需要)：
<html父标签 class="类名">
<html子标签>
<html孙标签>...</html孙标签>
</html子标签>
</html父标签>
(2)子标签选择器，对<html父标签>内部的子标签生效：
定义样式，类名被html父标签引用：
.类名或html父标签>html子标签 { /* 父子标签之间用>隔开 */
属性名：属性值;
}
对<html子标签>使用样式(样式定义为 .类，才需要)：
<html父标签 class="类名">
<html子标签>...</html子标签>
</html父标签>
(3)交集选择器，满足 <html标签> and class="类名"，才应用此样式，
定义与样式：
html标签.类名 { /* .表示与关系 */
属性名：属性值;
}
对<html标签>使用样式：
<html标签 class="类名">...</html标签>
(4)并集选择器，多个选择器之间为or关系，满足任何一个选择器，就应用此样式，
定义与样式：
.类名, html标签, #id名 { /* ,表示或关系，多个选择器之间用,隔开 */
属性名：属性值;
}
对<html标签1>和<html标签2>使用样式：
<html标签1>...</html标签1>
<html标签2 class="类名">...</html标签2>
(5)链接伪类选择器：
定义与样式：
/* 标签名:link为未访问的链接、标签名:visited为已访问的链接、标签名:hover鼠标移动到链接上、标签名:active选定的链接 */
html标签名:link { /* a为<a></a> */
属性名：属性值;
}
使用样式：
<html标签名>...</html标签名>
(6)属性选择器(CSS3新增选择器，权重为10)：
定义样式：
/*
html标签名[属性名] //匹配带有此属性的标签
html标签名[属性名="属性值"] //匹配带有此属性，且值与"属性值"相等的标签
html标签名[属性名^="属性值"] //匹配带有此属性，且值以"属性值"开头的标签
html标签名[属性名$="属性值"] //匹配带有此属性，且值以"属性值"结尾的标签
html标签名[属性名*="属性值"] //匹配带有此属性，且值包含"属性值"的标签
*/
html标签名[属性名] {
...
}
使用样式：
<html标签名 属性名="属性值">...</html标签名>
(7)结构伪类选择器(CSS3新增选择器，权重为10)：
定义样式：
/*
html标签名:first-child //匹配父元素中此标签的第1个子元素
html标签名:last-child //匹配父元素中此标签的最后1个子元素
html标签名:nth-child(数值或even偶数或odd奇数或公式) //匹配父元素中此标签的第n个子元素或偶数或奇数或公式（未知数为n，列公式）
html标签名:first-of-type //匹配此标签第1个
html标签名:last-of-type //匹配此标签最后1个
html标签名:nth-of-type(数值或even偶数或odd奇数或公式) //匹配此标签第n个或偶数或奇数或公式（未知数为n，列公式）
*/
html父标签名 html子标签名:first-child {//父标签名+空格+子标签名:匹配规则，适用同级下所有标签为一种类别
...
}
或
html父标签名 html标签名:first-of-type { //父标签名+空格+指定标签名:匹配规则，适用同级下有不同类别的标签
...
}
使用样式(无需引入)：
<html标签名>...</html标签名>
(8)伪元素选择器(CSS3新增选择器，权重为1)：
定义样式：
/*
html标签名::before //在标签内的"原串文本"最前面插入"待插入的文本"
html标签名::after //在标签内的"原串文本"末尾插入"待插入的文本"
*/
html标签名::before {
content: "待插入的文本" //必须添加content
...
}
使用样式(无需引入)：
<html标签名>原串文本</html标签名>
3.选择器权重：
(1)权重说明：
加了"!important"标记的属性(最大) > 使用标签style属性(1,0,0,0) > id选择器(0,1,0,0) > 类或伪类选择器(0,0,1,0) > 标签选择器(0,0,0,1) > *通配符选择器或者继承自父选择器(0,0,0,0)
!important使用：
html标签 {
color: red!important; /* !important跟在属性值后面 */
}
(2)权重计算：
权重以逗号分隔成四位，每次相加只找对应逗号的值进行相加，数值不能跨逗号计算：
例1：
.类名 html子标签 { /* 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
属性名：属性值;
}
例2：
html父标签 html子标签 { /* 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
属性名：属性值;
}
三、CSS样式：
1.注释：
/* 注释内容 */
2.常用属性名与属性值：
(1)font：
font-size（字体大小）: 数值px;
font-family（字体）: "中文字体" | 英文字体;
中文字体要加引号，如宋体、黑体、微软雅黑等，英文字符可以不用加引号，可以使用Unicode替换字体文字，允许多个值，值之间使用","分隔，优先使用前面的
font-weight（字体粗细）: lighter(细体) | normal(正常体，等同于400) | bold(粗体，等同于700) | bolder(特粗体) | 100-900数值;
font-style（字体风格）: normal(正常) | italic(斜体) | oblique(倾斜的字体);
font（font所有属性简写，属性值用空格隔开，顺序不能改，font-size值和font-family值不能省略，其他可以): font-style值 font-weight值 font-size值 font-family值;
(2)color（颜色值）: 固定值 | 十六进制 | RGB代码;
固定值，为red、blue、green等
十六进制，#ff00aa(两两相同时可以简写为#f0a)
RGB代码，rgb(50%, 20%, 30%)或rgb(50, 100, 255)
(3)text-align（文本对齐方式）: left | center | right;
(4)text-indent（首行缩进，1em为1个字宽度）: 数值em;
(5)text-decoration（文本超链接样式）: none | blink(闪烁) | underline(横线在文本下面) | overline(横线在文本上面) | line-through(横线穿过文本);
(6)text-overflow: clip(切除超长的文字) || ellipsis(超出文字以...显示);
(7)white-space: normal(默认，会自动换行) || nowrap(强制一行显示)
(8)line-height（行间距）: 数值px;
(9)line-height（行高）: 数值px;
行高=高度，内容居中
行高大于高度，内容偏下
行高小于高度，内容偏上
(10)背景属性(background-image+background-position可以实现精灵技术，整个页面一张大图，每块图标取部分显示成背景)：
background-color（背景颜色值）: color属性值;
background-image（背景图片）: none | url(图片地址);
background-repeat（背景平铺） repeat(纵向和横向上平铺) | no-repeat(不平铺) | repeat-x(横向平铺) | repeat-y(纵向平铺);
background-position（背景位置，必须搭配background-image，值为数值px | 固定值(top、bottom、center、left、right)）：横向值 纵向值;
background-attachment（背景随着界面滚动或固定）: 值为scroll(滚动)、fixed(固定);
background（背景所有属性简写，属性值用空格隔开）: 背景颜色值 url(图片地址) 背景平铺属性值 背景滚动属性值 背景位置值;
background（背景透明，最后一位设透明度，值0-1）: rgba(0, 0, 0, 0, 0.5);
background-size: 宽度px 高度px; //设置背景图片宽高
background-size: 宽度百分比% 高度百分比%; //设置背景图片宽高
background-size: cover; //等比例放大背景图填满，有部分图片不显示
background-size: contain; //等比例放大背景图，宽或高有一个填满就不会放大，有部分会空白
3.边框border：
border-collapse: collapse(合并相邻边框);
border-radius(边框圆角半径): 数值px || 百分值%; //正常浏览器版本
-moz-border-radius(边框圆角半径): 数值px || 百分值%; //兼容firefox浏览器老版本
-ms-border-radius(边框圆角半径): 数值px || 百分值%; //兼容ie浏览器老版本
-webkit-border-radius(边框圆角半径): 数值px || 百分值%; //兼容safari、chrome浏览器老版本
-o-border-radius(边框圆角半径): 数值px || 百分值%; //兼容opera浏览器老版本
方式1(key为border-width、border-style、border-color，value见如下)：
border-width(边框线粗细): medium(默认宽度) || thin(小于默认宽度) || thick(大于默认宽度) || 数值px;
border-style(边框样式): none(无边框) || hidden(隐藏边框) || dotted(点线) || dashed(虚线) || solid(实线) || double(双线，间隔为border-width值) || groove(3D凹槽) || ridge(菱形框) || inset(3D凹边) || outset(3D凸边);
border-color(边框颜色): blue(颜色值);
方式2(上边加top，下边加bottom，左边加left，右边加right)：
border-top-width: 1px;
border-top-style: none;
border-top-color: blue;
方式3(key为border，value为border-width border-style border-color组合，空格分开，没有顺序)：
border: 1px dashed blue;
4.内边距padding：
padding-top: 数值px;
padding-right: 数值px;
padding-bottom: 数值px;
padding-left: 数值px;
padding: 数值px; //上下左右一样值，值为0清除默认内边距
padding: top与bottom数值px left与right数值px; //上下一样，左右一样
padding: top数值 right数值 bottom数值 left数值; //简写，按顺序写
5.外边距margin(使用overflow:hidden解决合并塌陷问题)：
(1)常用属性：
margin-top: 数值px;
margin-right: 数值px;
margin-bottom: 数值px;
margin-left: 数值px;
margin: 数值px; //上下左右一样值，值为0清除默认外边距
margin: top与bottom数值px left与right数值px; //上下一样，左右一样
margin: top数值 right数值 bottom数值 left数值; //简写，按顺序写
(2)水平居中(auto表示填满)：
width: 数值; //必须指定宽度
margin-left: auto; //使用auto居中
margin-right: auto; //使用auto居中
或
margin: 0 auto; //使用auto居中
或
margin: auto; //使用auto居中
6.垂直居中(只对行内与行内块生效)：
vertical-align: baseline(和文字的基线对齐) || top(顶部对齐) || middle(垂直居中) || bottom(底部对齐)
7.阴影（CSS3新增）：
box-shadow: 水平阴影px(必须) 垂直阴影px(必须) 模糊距离px 阴影宽度px 阴影颜色 inset(内阴影)或outset(外阴影); //按顺序写
8.显示模式转换，布局隐藏/显示：
(1)显示模式转换：
分类：
块级标签：一个标签独占一行，可以设宽高，默认为标签的宽高：
行内标签：多个标签在同一行，不能设宽高，默认为内容的宽高：
行内块标签：多个标签在同一行，可以设宽高，默认为内容的宽高：
模式转换：
display: inline(块转为行内);
display: block(行内转为块，并显示布局);
display: inline-block(块、行内转为行内块);
(2)布局隐藏/显示：
display: none(隐藏布局，不占位);
visibility: visible(显示) || hidden(隐藏，占位);
9.overflow控制布局内容超出后显示效果：
overflow: hidden(切掉超出部分) || auto(加垂直滚动条) || scroll(加水平与垂直滚动条) || visible(全显示，默认);
10.布局浮动显示(不占位置，可以行内显示)：
（1）使用浮动显示：
浮动布局对齐父布局，不会超过父布局的内边距；
当前浮动布局与上个同级浮动布局顶部对齐；
当多个浮动布局一行显示不下时，多出的浮动布局自动显示在下一行。
float: none(布局不浮动，默认) || left(布局左浮动) || right(布局右浮动) //设置浮动显示
（2）清除浮动：
方式1：
.样式名{ //定义CSS
clear: left(清除左侧同级布局浮动效果) || right(清除右侧同级布局浮动效果) || both(清除两边同级布局浮动效果);
}
<div class="样式名" /> //使用CSS，在浮动布局同级下最末尾加一个空标签应用清除浮动CSS
方式2（在父布局CSS中添加overflow属性）：
overflow: hidden;
方式3（对指定布局CSS使用:after伪元素清除浮动）：
.样式名:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
方式4（对指定布局CSS使用:before+:after双伪元素清除浮动）：
.样式名:before,
.样式名:after{
content: "";
display: table;
}
.样式名:after{
clear: both;
}
11.布局定位(将布局固定在指定位置，对布局添加样式)：
(1)使用定位：
position(定位模式):
static(静态定位，默认值，无定位) ||
relative(相对定位，相对布局原来的位置进行top等值的移动，占位置) ||
absolute(绝对定位，父布局设置了定位，以父布局位置进行top等值的移动，否则以爷爷布局，上层如果一直没有定位，则以整个页面进行定位，不占位) ||
fixed(固定定位，固定在指定位置，以页面可视位置进行top等值的移动，不占位);
top: 数值px;
bottom: 数值px;
left: 数值px;
right: 数值px;
(2)使用绝对定位实现水平居中：
position: absolute;
left: 50%;
margin-left: -布局宽度一半值px;
(3)使用绝对定位实现垂直居中：
position: absolute;
top: 50%;
margin-top: -布局高度一半值px;
(4)设置堆叠顺序：
z-index: 数值; //数值越大显示在越上面
12.鼠标样式：
cursor: default(白箭头图标) || pointer(手掌图标) || move(十字移动图标) || text(I形状图标) || not-allowed(红色禁止图标)
13.轮廓线：
outline: none || outline-color || outline-style || outline-width;
outline: 0; //平常使用此方式，去掉效果
outline: none; //平常使用此方式，去掉效果
14.防止拖拽<textarea>（对此标签使用以下样式）：
resize: none;
15.指定CSS使用的版本：
box-sizing: border-box(CSS3盒子模型) || content-box(CSS盒子模型);
四、2D与3D转换(CSS3新增样式)：
1.2D转换：
transition: all 秒数值s; //持续时间
transform-origin: x轴px(或百分比) y轴px(或百分比); //设置中心点，默认为标签中心
transform-origin: top bottom left right center; //同上，值可以随意组装，可以以左上角、右上角、左下角、右下角等为中心点
(1)移动translate(行内标签无效)：
transform: translate(x轴偏移值px或百分比%, y轴偏移值px或百分比%) || || translateX(x轴偏移值px或百分比%) || translateY(y轴偏移值px或百分比%); //以自身宽度或高度的百分比
(2)旋转rotate：
transform: rotate(度数deg); //deg为单位，正值为顺时针，负值为逆时针
(3)缩放scale：
transform: scale(x轴倍数, y轴倍数); //倍数小于1为缩小，大于1为放大，x和y值一样时，可以只改一个
transform: scale(倍数); //x和y值一样时，可以只写一个
(4)综合使用(组合使用时按此顺序：translate -> rotate -> scale)：
transform: translate(x, y) rotate(度数deg) scale(x轴倍数, y轴倍数); //以空格间隔
2.2D动画：
(1)使用@keyframes定义动画：
@keyframes 动画名 { //定义CSS样式
0%或from {//动画开始
transform: 上面的2D转换方法;
}
百分比% {//动画中间，无需求可以不写，也可以写多个中间动画
transform: 上面的2D转换方法;
}
...
100%或to {//动画结束
transform: 上面的2D转换方法;
}
}
(2)在标签的CSS中使用动画：
方式1：
animation-name: 动画名; //调用动画
animation-duration: 数值s; //持续时间
animation-timing-function: ease(慢->加快->慢) || linear(匀速) || ease-in(慢->正常) || ease-out(正常->慢) || ease-in-out(慢-正常-慢) || steps(完成动画需要的步长); //运动曲线
animation-delay: 0s; //延迟开始时间
animation-iteration-count: 次数 || infinite(无限次); //播放次数
animation-direction: normal(下一次顺向播放) || alternate(下一次逆向播放);
animation-play-state: running(运行状态) || pause(暂停状态);
animation-fill-mode: forwards(结束后保持当前位置) || backwards(结束后回到初始位置);
方式2(简写)：
animation: name动画名 duration时间 timing-function运动曲线 delay延迟时间 iteration-count播放次数 direction播放方向 fill-mode动画结束后保持的位置
3.3D转换：
transition: all 秒数值s; //持续时间
其他2D属性此处也能用;
perspective: 数值px; //透视视距(给父元素添加此样式)，设置眼睛到屏幕的距离，值越小物体越大
transfrom-style: flat(默认,不开启) || preserve-3d(开启); //开启3D显示效果(给父元素添加此样式)
(1)移动translate3d：
transform: translate3d(x轴值px, y轴值px, z轴值px) || translateX(x轴值px) || translateY(y轴值px) || translateZ(z轴值px, z值越大物体越大);
(2)旋转rotate3d：
transform: rotate3d(x轴px, y轴px, z轴px, 旋转角度deg) || rotateX(度数deg) || rotateY(度数deg)|| rotateZ(度数deg);
五、移动端常用：
1.去掉移动端网页默认效果：
html标签名 { //定义CSS样式
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent; //清除手机端网页点击高亮效果
-webkit-appearance: none; //允许iOS端网页自定义按钮与输入框样式
img, a{ -webkit-touch-callout: none; } //禁用手机端网页长按弹出系统菜单
}
2.流式布局(百分比布局)：
html标签 { //定义CSS样式
width: 百分比%
height: 百分比%;
max-width: 最大宽度px;
max-height: 最大高度px;
min-width: 最小宽度px;
min-height: 最小高度px;
}
12-02
3919
3919
12-05
3340
3340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
