- css样式表
- css选择器(简单，复杂)
- css属性
- css布局
CSS样式表（内联方式，内部样式表，外部样式表）
- 内联样式
<h1 style="background:silver; color:blue"> - 内部样式表
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color:blue;
background:red;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>
- 外部样式表
1.创建一个单独的样式表以css后缀结尾
2.在HTML页面上用link引用样式表文件
<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<p>第一段落</p>
<h1>外部样式表</h1>
</body>
</html>
###CSS选择器
简单选择器
- 通用选择器
- 元素选择器
- 类选择器
- id选择器
- 群组选择器
- 后代选择器
- 子代选择器
- 伪类选择器
通用选择器:
通常设置整个文档的默认样式，通常是整篇文章的字体大小和字体
*{
font-size:14px;
font-family:"yahei"
}
元素选择器：
h1{
color:blue;
font-size:14px;
}
类选择器：
降元素的class属性设置为样式类别
.myclass{
font-size：14px;
background:silver;
}
p.myclass{
font-size：14px;
background:silver;
}/*分类选择器只对p设置样式*/
<h1 class="myclass">h2文本</h1>
<p class="myclass">段落文本</p>
id选择器：
#myclass{
font-size：14px;
background:silver;
}
<h1 id="myclass">h2文本</h1>
群组选择器：
p.myclass，h1.myclass{
font-size：14px;
background:silver;
}
<h1 class="myclass">h2文本</h1>
<p class="myclass">段落文本</p>
后代选择器：/*只要是h1下面的P元素都可以定义*/
h1.myclass p{
font-size：14px;
background:silver;
}
<h1 class="myclass">h2文本
<p class="myclass">段落文本</p>
</h1>
子代选择器：/*只存在父子关系*/
div>span.myclass{
font-size：14px;
background:silver;
}
<div>
<span class="myclass">段落文本</span>/*只对这个span起作用*/
<p>
<span>不是子元素</span>
</p>
</div>
伪类选择器：
链接伪类：
:link：适用于尚未访问的链接
:visited:适用于访问过得链接
动态伪类：
:hover:鼠标停留
:active:元素被激活时
:focus:获取焦点时
复杂选择器
* 兄弟选择器(相邻兄弟选择器，通用兄弟选择器)
* 属性选择器
* 伪类选择器(目标伪类，元素状态伪类,结构伪类，否定伪类)
* 伪元素选择器(::first-letter ::first-line ::selection)
语法解释：
兄弟选择器：
相邻兄弟选择器:需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，用+连接
p+b{font-size:16px;}
<p><p>
<b></b>
通用兄弟选择器:匹配某元素后面所有的兄弟元素（二者必须有相同的父元素），用~连接
p~b{font-size:16px;}
<p><p>
<b></b>
<b></b>
属性选择器：了解
伪类选择器：
目标伪类 ：E:target(链接点击过后，实现的样式)
元素状态伪类：
:enabled匹配每个已启用的元素(大多用在表单元素中)
:disabled匹配每个被禁用的元素(大多数用在表单上)
:checked匹配每个已被选中的input元素(只用于单选按钮和复选按钮)
input:enabled{background:#ccc;}
input:disabled{background:#ccc;}
input:checked{background:#ccc;}
结构伪类：
P:first-children匹配父元素的第一个子元素P
P:last-children匹配父元素的最后一个子元素P
P :only-children匹配父元素中只有一个子元素P
否定伪类：
input：not(disabled)
伪元素选择器
p:first-letter:用于指定选择器的首字母，通常用于首字母下沉
p:first-line:用于指定选择器的首行
p::selection:匹配被用户用鼠标选取的部分，一般会设置背景色。
p:before
p:after
content属性与before，after结合使用，来插入生成内容，常用有：
1）字符串(纯文本)
2）图片，比如p:after{url(images/png.jpg);}用于文字前的小图标
3）计数器
1. 内容生成，还可以解决浮动元素高度问题，满足三个条件
1）块级元素
2）父元素中最后一个子元素
3）必须设置clear属性
#d1：after{
content:"";
display:block;
clear: both;
}
2.内容生成解决外边距溢出问题
下外边距
#d1：after{
content:"";
display:table;
}
上外边距
#d1：after{
content:"";
display:table;
}
备注：：和：：区别
W3C中 :表示伪元素
::表示伪类
为了兼容性考虑，现在都用:表示伪类和伪元素
#CSS属性
- 尺寸:
- width min-width max-width
- height min-height max-height
可以设置尺寸的属性：
块级元素:
-p:
-div:
-h1,h2,h3,h4,h5,h6
-ul,ol,li,dl,dt,dd
存在width，height的HTML属性:
-img
-table
- 边框属性:
边框：border-width border-style border-color 最常用写法：border：1px solid red;
单边定义:border-left/right/top/bottom-width/style/color
边框倒角：border-radius(，一个值的话就是四个角的边框倒角一样，四个值就是从左上角顺时针设置四个倒角)
border-top-left-radius:边框左上角
border-top-right-radius:边框右上角
border-bottom-right-radius:边框右下角
border-bottom-left-radius:边框左下角
边框倒角实例：
#d1{
border-radius:10px 12px 15px 20px;
}
#d2{
border-radius:10px;
}
<!doctype html>
<html>
<head></head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
边框阴影：box-shadow:h-shadow v-shadow blur spread color insert
h-shadow:必须，水平阴影的位置。
V-shadow:必须，垂直阴影的位置。
blur:可选，模糊距离。
spread:可选，阴影的尺寸。
color:可选，阴影的颜色。
轮廓：outline:color style width 位于边框的外围，起突出作用
- 盒模型
box-sizing:
content-box:标准盒模型（实际宽度：等于设置的width值和border、 padding之和）
.test1{
box-sizing:content-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
border-box:怪异盒模型代码与图示例:对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度
.test1{
box-sizing:border-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
padding:内容与边框的距离，不允许负值。
margin：元素与元素之间的距离，可设置负值。默认值auto，可实现元素水平位置居中。
取值：
- 背景
- background-color：当同时定义了背景颜色和背景图像时，背景图像 覆盖在背景颜色之上。
- background-image：使用绝对或相对地址指或者创建渐变色来确定 图像
body{
background-image: url("images/login.png");
}
- background-repeat：
取值：
repeat：水平和垂直上都平铺，默认值。
repeat-X:只在水平上平铺。
repeat-y：只在垂直上平铺。
no-repeat:只显示一次，不平铺。
- background-size：
取值：
value1（宽度）value2高度（）
value1%（宽度）value2%高度（）
contain：背景图像始终在容器内
cover：背景图像有可能超出容器
- background-position：
取值：
xy（左上角是00）
x%y%（右下角是100% 100%）
center：背景图像横向和纵向居中/*可实现背景图像水平垂直居中）*/
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始。
- background:总体属性
语法结构：color image repeat attachment position
body{
background:#ff0 url("images/login.png") no-repeat fixed center;}
- 字体：[字体demo演示](https://rawgit.com/iamjoel/front-end-note/master/demos/css/rules/font/demo.html)
font-family:
font-size:12px;
font-weight:bold/normal;
font-style:normal/italic;
font:italic small-caps bold 18px;
- 文本：
color：文本颜色
text-align:left/right/center/*它会影响一个元素中的文本行互相之间的对齐方式，定义一个行内内容如何相对于他的父元素居中，并不控制块元素自己的对齐，只控制他的行内内容对齐*/
text-indent:属性规定文本块中首行文本的缩进/*可以设置为负值，则文本向左移动*/
<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>
<body>
<p>
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
</p>
</body>
text-decoration:undeline/none/*通常设置链接下划线*/
line-height:设置行高/*不允许使用负值，属性设置行之间的距离（行高）。*/
height:30px;
line-height:30px;/*设置文本垂直居中对齐方式*/
text-shadow:h-shadow v-shadow blur color设置文本阴影/*取值分别为每个阴影相对于文字的水平和垂直的偏移量，模糊半径和颜色*/
white-space:normal/nowrap 属性设置如何处理元素内的空白。
initial letter:制作首字下沉，报纸上经常用。[简书整理](http://www.jianshu.com/p/8e7d09e94d20)
- 表格
- 常用属性:width height border padding
- 垂直方向对齐：vertical-align:top/middle/bottom/*设置单元框中，单元格内容的对齐方式,默认在中间*/
- 表格特有的样式属性:
border-collapse:collspase/seperate
border-spacing:10px 20px;(水平和垂直)/*仅用于Seperate的情况下使用,，相邻单元格边框间的距离*/
caption-side：top/bottom属性设置表格标题的位置。
#CSS布局：[学习CSS布局](http://zh.learnlayout.com/)
定位：普通流定位(按元素本身的顺序)，浮动定位(float)，相对定位，绝对定位
- float（浮动）
- position(定位)
- display（显示）
- flex(新内容)
- table布局(比较老旧的知识)
****
- Float:left/right/none
clear:left/right/none/both (清楚浮动带来的影响)
overflow:
visible:/*默认值。内容不会被修剪，会呈现在元素框之外*/
hidden:/*内容会被修剪，并且其余内容是不可见的*/
scroll:/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容,网页中经常会出现*/
auto:跟scroll类似*/
- position:
属性取值:
absolute:将元素的内容从普通流中完全移除，不占据空间，相对于最近的已定位的祖先元素
position:absolute;
top/left/right/bottom:20px;
relative:相对于元素本身的位置，进行偏移和定位，原本的空间仍然保留
position:absolute;
top/left/right/bottom:20px;
如果元素只设置relative属性，不设置方位属性，跟static显示一样。
fixed：相对于浏览器页面进行定位。一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置(设置回到顶部按钮，结合链接锚点一起使用)一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）
position:fixed;
top/left/right/bottom:20px;
代码演示;
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
static:表示不会被position。
备注：样式 "left:-20px" 从元素的原始左侧位置减去 20px。样式 "left:20px" 向元素的原始左侧位置增加 20px。left:-20px跟right：20px,显示效果一样。
- display:
取值：
inline：指定对象为行内元素。/*span是标准的行内元素,可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单*。/
block: 让行内元素<a>表现的像块级元素一样/*例如div元素*/
inline-block:指定对象为行内块元素。
none:元素不会占据空间。/*visibility: hidden; 还会占据空间*/