CSS注释代码/注释语句/
内联式css样式
直接写在现有的HTML标签中`<p style="color:red">这里文字是红色。</p>`
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，
中间用分号隔开`<p style="color:red;font-size:12px">这里文字是红色。</p>`
嵌入式css样式
写在当前的文件中嵌入式css样式必须写在`<style></style>`之间，
并且一般情况下嵌入式css样式写在`<head></head>`之间。嵌入式css样式，
就是可以把css样式代码写在`<style type="text/css"></style>`标签之间
外部式css样式
写在单独的一个文件中`<link href="base.css" rel="stylesheet" type="text/css" />`注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、`<link>`标签位置一般写在`<head>`标签之内
三种方法的优先级内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。。
其实总结来说，就是–就近原则（离被设置元素越近优先级别越高）。
类选择器:.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
`<span>胆小如鼠</span>`
第二步：使用class="类选择器名称"为标签设置一个类，如下：
`<span class="stress">胆小如鼠</span>`
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器
1,在标签中设置ID
`<span id="setGreen">公开课</span>`
2.选中ID设置样式
#setGreen{
color:green;
}
类和ID选择器的区别相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次
子选择器.food>li{border:1px solid red;}
包含(后代)选择器.first span{color:red;}
子选择器作用于元素的第一代后代，包含选择器作用于元素的所有后代。
通用选择器 通用选择器是功能最强大的选择器，它使用一个*号指定* {color:red;}，它的作用是匹配html中所有标签元素
伪类选择符a:hover{color:red;}
鼠标滑过字体颜色变为红色特效。
特殊性
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /权值为1/
p span{color:green;} /权值为1+1=2/
.warning{color:white;} /权值为10/
p span.warning{color:purple;} /权值为1+1+10=12/
#footer .note p{color:yellow;} /权值为100+10+1=111/
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
重要性我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
样式：
p{font-family:microsoft yahei;}字体
p{font-size:12px; color:#333;}字号 颜色 网页字体一般为双数 最小字体为12px
p{font-weight:bold;}粗体 100-900
p{font-style:italic；}斜体
p{text-decoration:underline；}下划线
p{text-decoration:line-through;}删除线
p{text-indent：2em；}缩进
p{line-height:2em;}行高 可以让单行文本居中
p{letter-spacing}中文间隔
p{word-spacing}英文单词间隔
p{text-align:center;}居中
p{text-align:left;}居左
p{text-align:right;}居右
background-color 背景色
background-img 背景图
background-position 背景定位
background-repeat 平铺
background-size ;xpx ypx 背景图大小
display: table-cell;vertical-align: middle垂直居中
display:block:转为块元素
displai:inline;转为内嵌元素
display；inline-block；内联块
border-ridio;圆角
overflow溢出隐藏
visibility:hidden显示隐藏 没有过度效果
dispaly:none 没有过度效果
opacity:;透明所有
rgba a是背景透明
transition:all 2s linear；过度
transform:translte(xy)平移
transform:rotate(90deg)旋转
transform：scale(0.5)缩放
transform: skew()扭曲
元素分类
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
去除img间的空格： 给父元素设置font-size:0;
内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{ display:inline; }
<div>我要变成内联元素</div>
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型–边框（一）
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是 border 代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
盒模型–边框（二）
现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
定位
position:relative 相对定位 相对于自己
position:absoluter绝对定位 也可以脱离文档流
position:fixed; 固定定位 脱离文档流
1.当祖先元素有定位属性的时候（position)那该元素相对于最近的这个祖先元素而移动
2.当所有祖先元素都没有定位属性的时候 那该元素相对于body(浏览器）
3.绝对定位不用来布局,通常用来 处理重叠， 遵循父相子绝
4.z-index 调整层级顺序 这个属性只能作用于有定位属性的元素·-1 0 1
结构伪类选择器
div:nth-chlid(){} 必须是div必须是第一个儿子
div:first-chlid{}必须是div必须是第一个儿子
first-child{}匹配父元素的第一个子元素E。
first-of-type匹配同类型中的第一个同级兄弟元素
last-child匹配父元素的最后一个子元素E。
last-of-type匹配同类型中的最后一个同级兄弟元素
nth-last-child(n)匹配父元素的倒数第n个子元素E。
nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素
nth-of-type(n)匹配同类型中的第n个同级兄弟元素
only-child匹配父元素仅有的一个子元素E。
only-of-type匹配同类型中的唯一的一个同级兄弟元素
兄弟选择器 ： +是选择紧邻的弟弟
~是选择所有弟弟
兄弟选择器只能选弟弟
字符串匹配属性选择器
“” ‘’里面的东西都叫字符串
input[type=""]属性必须完全等于后面的值
input[type^=""]匹配开头字母的
input[type$=""]匹配结尾字母的
input[type*=""]匹配包含某个字符
动画规则
@keyframes 动画名{
form{}
to{}
}
调用动画：
animation：1动画名 2动画持续时间 3动画过度类型 4动画延迟时间
5动画播放次数 6是否停留在动画播放完毕出 7是否反向运动
2478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
