一.css语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
CSS实列
p { color:red; text-align:center; }
选择器{ 属性1：属性值1；属性2：属性值2；}
css注释
注释是解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束
示例：/*这是个注释*/
二.CSS选择器
(1)
标签选择器
语法格式：
标签名{属性1：属性值1;属性2：属性值2}
元素名{属性1：属性值1;属性2：属性值2}
(2)类选择器：
.类名{属性1：属性值1;属性2：属性值2}
标签调用class="类名"
(3)多类名选择器
可以给标签指定多个类名，从而达到更多的选择目的
注：样式显示效果跟html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。
各个类名中用空格隔开
<div class="box1 box2">我是标签
</div>
(4)id选择器
<div id="last">我是标签</div>id选择器与类选择器的区别：
类选择器可以多次重复使用，id选择器不得重复只使用一次
(5)通配符选择器
用“*”表示，匹配页面中所有的元素
基本语法：
*{属性1：属性值1;属性2：属性值2;}
(6)符合选择器
后代选择器：
div p { color:pink;} p 一定是div的孩子 中间空格隔开
子代选择器：
ul li >a { color:red;} a 是 li 的亲儿子 用 >
交集选择器：
div.red;{color:red;}既是div 又是叫 red 用 . 隔开
<div class="red"> 我是标签</div>
并集选择器：
div ,p ,span {color:red;}用逗号隔开 相当于“和” 集体声明适用于相同样式
(7)伪类选择器
适用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，用 ":"开头
:link 未访问过的链接
:visited 已访问过的链接
:hover 鼠标移动到链接上
:active 选定的链接
三.CSS如何插入样式表
(1)外部样式表
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>(2)内部样式表
<style type="text/css">
p{
color:red;
}
</style>
(3)内联样式
<p style="属性1;">我是标签</p>四.CSSbackground背景
background-color:背景颜色 transparent透明色
background-image:背景图片地址
body {background-image:url('paper.gif');}background-repeat:是否平铺 repeat-x背景图像在横向上平铺 repeat-y背景图像在纵向上平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-repeat:repeat-x;水平方向平铺
}
background-position:背景位置
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
background-attachment：背景固定还是滚动 scroll fixed
| croll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
背景半透明:
backgroung:rgba(0,0,0,1)取值为0-1
color:颜色:
十六进制：#FF0000
RGB：rgb(255,0,0)
五.CSS文本text
(1).设置文本水平对齐方式
text-align:center/left/right;
注：当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐
text-indent:首行缩进 2em;
(2).文本的修饰text-decoration:
none:无下划线
underline下划线
overline上划线
line-through:删除线
(3)line-height:行间距 行与行之间的距离
(4)文本转换
用于所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:uppercase;大写
text-transform:lowercase;小写字母
text-transform:capitalize;每个单词的首字母大写
(5)文本缩进
文本缩进属性是用来指定文本的第一行的缩进
text-indent:20px;
(6)CSS vertical-align 属性
设置一个元素的垂直对齐方式
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
(7)CSS3 text-shadow 属性
text-shadow: h-shadow v-shadow blur color;
text-shadow:h-shadow (水平阴影的位置) v-shadow (垂直阴影的位置) blur (模糊的距离) cloror;
(8)CSSwhite-space属性
属性指定元素内的空白怎样处理
normal 默认。空白会被浏览器忽略
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
pre-wrap 保留空白符序列，但是正常地进行换行
（9）CSS word-spacing属性
p
{
word-spacing:30px;
}
六.CSS 字体
（1）字体样式
font-size:px;字体大小
font-family:设置字体样式如宋体多种字体用逗号隔开
font-weight:字体加粗 bold （粗体）/ 700 /normal(正常)/400
font-style:字体风格 normal(正常)/italic（斜体）/
(2) 字体连写
字体连写
选择器{font:font-style font-weight font-size/line-height font-family;}
必须按顺序写不能更改顺序 用空格隔开
七.CSS列表属性
list-style 简写属性在一个声明中设置所有的列表属性
ul
{
list-style: square url("sqpurple.gif");
}list-style-image 使用图像来替换列表项的标记
ul
{
list-style-image:url('sqpurple.gif');
}
list-style-position设置在何处放置列表项标记
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inherit:规定应该从父元素继承 list-style-position 属性的值。
list-style-type设置列表项标记的类型
none:无标记
disc:默认。标记是实心圆
circle:标记是空心圆
square:标记是实心方块
decimal:标记是数字
decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。
lower-roman:小写罗马数字(i, ii, iii, iv, v,)
upper-roman:大写罗马数字(I, II, III, IV, V
lower-alpha:小写英文字母
upper-alpha:大写英文字母
七.CSS表格
指定CSS表格边框，使用border属性。
table, th, td
{
border: 1px solid black;
}折叠边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}表格高度和宽度
Width和height属性定义表格的宽度和高度。
表格文字对齐
表格中的文本对齐和垂直对齐属性
1.text-align属性设置水平对齐方式，向左，右，或中心
2.vertical-align垂直对齐属性设置垂直对齐，比如顶部，底部或中间
td
{
text-align:right;
}
td
{
height:50px;
vertical-align:bottom;
}表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性
td
{
padding:15px;
}八.CSS盒子模型
css盒子模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
盒子边框 样式 ：border:1px solid red;
border:border-width/border-style/border-color
border-style:
none:没有边框
solid:单实线
dashed:虚线
dotted:点线
double:双实线
border-top:上边框/bottom/right/left
边框单独设置各边：
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
.padding内边距：
padding指边框与内容之间的距离
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
8.padding:20px上下左右都是
padding:10px 20px;上下10px 左右20px
padding:10px 20px 30px 上10 左右 20 下30
padding:10px 20px 30px 40px 上 10右 20 下30左40
非常严重的问题：padding 会撑开 带有width和height盒子 经过计算不超过
CSS轮廓属性:
设置元素周围的轮廓
p
{
outline:#00FF00 dotted thick;
}
outline-color,规定边框的颜色。
outline-style,规定边框的样式
outline-width,规定边框的宽度
CSS margin 外边距
CSS margin(外边距)属性定义元素周围的空间
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px
上下边距为25px 左右边距为50px
九.css分组选择器和嵌套选择器
分组选择器
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
h1,h2,p
{
color:red;
}嵌套选择器
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
十.css元素显示与隐藏
1.元素的显示与隐藏
在css中有三个显示和隐藏的单词比较常见，display/visibility/overflow
Display:none;隐藏对象与它相反的是display:block;除了转换为为了块级元素之外，同时还有显示元素的意思
特点：隐藏之后，不再保留位置
2.visibilty:hidden;对象隐藏
特点：隐藏之后，继续保留原有位置，
3.overflow
Overflow：visibile不剪切内容也不添加滚动条
Auto:超出自动显示滚动条，不超出不显示滚动条
Hidden:超出部分隐藏掉
Scroll:不管超出内容否，总是显示滚动条
十一.css鼠标样式
Cursor：
Defaulit 小白/ pointer 小手/ move 移动/ text 文本
防止拖拽文本域resize
<textarea style=”resize:none;”></textarea>
十二.css定位position
1.相对定位
元素的定位
(1)边偏移
top:顶端偏移量 定义元素相对于其父元素上边线的距离
bottom：底部偏移量 定义元素相对于其父元素上边线的距离
left:左侧偏移量 定义元素相对于其父元素上边线的距离
right: 右侧偏移量 定义元素相对于其父元素上边线的距离
(2)定位模式
position:
static:自动定位
relative:相对定位，相对于其原文档流的位置进行定位
absolute:绝对定位，相对于其上一个已经定位的父元素进行定位
fixed:固定定位 相对于浏览器窗口进行定位
(3)注意：相对定位最重要的一定，它可以通过边偏移动位置，但是原来的所占的位置，继续占有
每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
相对定位的盒子仍在标准流中
定位的主要价值就是移动位置，让盒子到我们向想要的位置上去
2.绝对定位
注意：绝对定位最重要的一点是，它可以通过边偏移动位置，但是它完全脱标 完全不占位置
若所有父元素都没有定位，以浏览器当前屏幕为准对齐
绝对定位是将元素依据最近的已经定位（绝对，固定或相对定位）的父元素（祖先）进行定位：（父级有定位）
(4)子绝父相
意思是 子级是绝对定位的话，父级要用相对定位
(5)绝对定位的盒子水平/垂直居中
普通的盒子是左右 margin 改为 auto 就行，但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法
首先left50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left
3.固定定位
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置
注意：
固定定位的元素跟父亲没有任何关系，只认浏览器
固定定位完全脱标，不占有位置，不随着滚动条滚动
4.模式转换
display:none;/display:block;
5.叠放次序
z-index 要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数，负整数和
(1) 默认属性值为0，取值越大，定位元素在层叠元素中越居中
(2)后面数字一定不能加单位
(3)只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性
十三.CSS Overflow
.overflow
Overflow：visibile 不剪切内容也不添加滚动条
Auto:超出自动显示滚动条，不超出不显示滚动条
Hidden:超出部分隐藏掉
Scroll:不管超出内容否，总是显示滚动条
十四.CSS清除浮动
浮动
css的定位机制有3种：普通流（标准流），浮动和定位
普通流 实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思
float:left/right/none 元素向左浮动/向右浮动/元素不浮动/元素不浮动
浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动
1.清除浮动
其实本质叫做闭合浮动更好一些，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在css中，clear属性用于清除浮动，其基本语法格式如下。
选择器：{clear:属性值}
left清除左侧浮动的影响
right清除右侧浮动的影响
both同时清除左右两侧的影响
额外标签法：
.clear{
clear:both;如果清除了浮动，父亲去自动检测孩子的高度，以最高为准
}
<div class="clear"></div>
最后一个浮动标签的后，新添加一个标签 清除浮动
2.overflow
overflow:hidden;给父级加/不是所有的浮动我们都需要清除，谁影响布局，就清除谁
3.伪类清除浮动
:after方式为空元素的升级版，好处是不用单独加标签了
使用方法：
.clearfix:after { content:""; display:block; height:0;clear:both; visibility:hidden;}
.clearfix{ zoom:1}
优点：符合闭合浮动思想 结构语义化正确
缺点：用于IE6-7不支持 :after ,使用zoom:1 触发hasLayout
代表网站：百度，淘宝网，网易
4.双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix{
zoom:1
}
优点：代码更简洁
缺点：用于IE6-7不支持 :after ,使用zoom:1 触发hasLayout
十五.CSS布局
元素水平居中
要水平居中对齐一个元素
margin: auto
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}文本居中对齐
text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
img {
display: block;
margin: auto;
width: 40%;
}垂直居中对齐
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
.center {
padding: 70px 0;
border: 3px solid green;
}如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}十六.CSS组合选择符
后代选择器(以空格 分隔) 子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔） 普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器
div p { background-color:yellow; }
div p { color:pink;} p 一定是div的孩子 中间空格隔开
子元素选择器
ul li >a { color:red;} a 是 li 的亲儿子 用 >
div>p { background-color:yellow; }
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
div+p { background-color:yellow; }
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
div~p { background-color:yellow; }
十七.CSS伪类
:first-child 选择器
匹配 <p> 的父元素的第一个<p>元素
p:first-child { background-color:red; }
:before 选择器
每个 <p>元素之前插入内容
p:before
{
content:"Read this: ";
}
:after 选择器
每个<p>元素之后插入内容
p:after { content:"- Remember this"; }
:first-line 伪元素
伪元素用于向文本的首行设置特殊样式
p:first-line { color:#ff0000; font-variant:small-caps; }
:first-letter 伪元素
伪元素用于向文本的首字母设置特殊样式
p:first-letter { color:#ff0000; font-size:20px; }
十七.CSS特性
.溢出的部分
White-space使用于强制一行显示内容
Normal:默认处理方式
Nowrap：强制在同一行显示所有文本，
.text-overflow 文字溢出
text-overflow：clip /ellipsis
clip:不显示省略标记(…)简单才裁剪
ellipsis:当对象内文本溢出时省略标记
.css三大特性
(1)#box p选择id为box的元素的所有后代元素p
(2)#box>p选择id为box的元素的所有直接元素p
(3)p, .box选择的是p元素和所有类名为box的元素
(4) p.box选择的是拥有box类名的p元素 交集选择器
.css层叠性
一般情况下，如果出现样式冲突，则会按照css书写的顺序，以最后的样式为准，就近原则
css继承性
子标签会继承父标签的某些样式，如文本颜色，想要设置一个可继承的属性，只需要将它应用于父元素即可
css优先级
(1)权重相同 则就近原则
(2)权重叠加 div p{color:red;} 0001+0001=0002
(3)权重继承问题：权重为0 标签本身设置css样式
.sublime快捷键
生成标签直接输入标签名按tab键 如div 然后按tab键 就可以生成<div></div>
生成多个相同标签 加上 * 如 div*3 快键生成3个div
如果有父子级关系的标签 用 “ >” ul>li就可以了
如果有兄弟关系的标签，用 +，如 div+p
生成带有类名或id名字，直接写.demo 或 #two tab
元素的显示模式
块级元素：<h1>~<h6> <p> <div> <ul> <ol> <li>有高度跨度 独占一行
行内元素：<a> <strong> <b> <em> <i> <del> <span> 无高度宽度 默认的宽高 只能放文本或其他元素 一行可放多个
行内块元素：<img /> <input /> <textarea></textarea>相邻行内块在一行上，但之间有空白间隙 可调宽高
标签显示模式转换
块转行内：display:inline；
行内转块：display:block;
块，行内元素转内为行内块：display:inline-block;
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
