### css四种引入方式
# 1.行内式
# 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
# 2.嵌入式
# 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
# <head>
# <style type="text/css">CSS样式
# </style>
# </head>
# 3.导入式
# 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
# <style type="text/css">@import"mystyle.css"; 此处要注意.css文件的路径
# </style>
# 4.链接式
# 也是将一个.css文件引入到HTML文件中
# <link href="mystyle.css" rel="stylesheet" type="text/css"/>
###选择器：
# 1 基础选择器: * p # . (通用 标签 id class)
# 2 组合选择器: , 空格 > + (或 后代元素 子元素 毗邻)
#嵌套规则：
# 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
# 块级元素不能放在p里面。
# 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
# li内可以包含div
# 块级元素与块级元素并列、内联元素与内联元素并列。
# 3 属性选择器: p[] p[name=""] p[name~=""] p[name|=""] p[name^=""] p[name$=""] p[name*=""]
# (属性，属性和值，多个属性空格连接，-连接的开头，匹配开头，匹配结尾，包含匹配)
# a:before a:after 在之前之后加内容 a:before{content="";color=red}
# 4 伪类选择器： 专用于控制链接的显示效果，伪类选择器：~注意顺序4在3下，3在2下
# a:link（没有接触过的链接）,用于定义了链接的常规状态。
# a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
# a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
# a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态
### CSS的常用属性
# 1 颜色属性
# color: blue;color: #2e56ff;color:rgb(255,0,0);color: rgba(255,0,0,0.5);
# 英文 16进制 红绿蓝 a(0-1)透明度
# 2 字体属性
# font-size: 20px/50%/larger
# font-family:'Lucida Bright' 宋体
# font-weight: lighter/bold/border/
# <h1 style="font-style: oblique">tom</h1>
# 3 背景属性：body不能为空 而且设置高height
# 背景颜色
# background-image: url('1.jpg');背景图片
# background-repeat: no-repeat;(repeat:平铺满)重复
# background-position：center center上下左右中
# 简写background: 20px 20px no-repeat #ff4 url('1.jpg')
# 4 文本属性：
# font-size: 10px;
# text-align: center;横向排列
# line-height: 200px;文本行高 文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
# text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比
# letter-spacing: 10px;字母之间的距离
# word-spacing: 20px;单词之间的距离
# direction: rtl;从右向左写
# text-transform: capitalize;首字母大写
# 5 边框属性：
# border-style: solid;
# border-color: chartreuse;
# border- 20px;
# 简写：border: 30px rebeccapurple solid;
# 6 列表属性
# ul,ol{ list-style: decimal-leading-zero;
# list-style: none; list-style: circle;
# list-style: upper-alpha;
# list-style: disc; }
# 7 dispaly属性
# none隐藏
# block内联改为块级
# inline块级改内联
# 8 盒子模型:margin外边距 padding内边距 border
# padding会向外延伸，margin重叠取最大值,margin需要找到边界
# 9 float
#块级元素，标准流，浮动脱离标准流，左浮动左对齐，右浮动右对齐
#多个浮动跟随，放不下换行
#清除浮动，clear none不清除，left左清除，right右清除，both都清除，只能作用于浮动标签本身
# 10 position
#relative正常相对定位 absolute绝对定位 fixed相对于窗口定位
#position:relative top:10px bottom left right