行内样式表：<div style="color:red；">今天是公元2018年10月24日程序员的节日</div> //书写方便权重高
内部样式表：就是我们经常使用的 在<head>里面进行使用的
<style><div style="color:red；"></style> //部分结构和样式相分离 可以控制一个界面
外部样式表：就是把html和css分离开来 //完全实现结构和样式相分离 可以控制多个界面
<head><link rel="stylesheet" href="style.css"/></head> //引入外部的样式表 这样就把样式和html分离开来了
块级标签显示模式：
每个块级元素通常都会独自占据一整行或者多行，常用于网页的搭建
常见的块级标签元素：<h1>~<h6> <p> <div> <ul> <li> <ol>
行内元素：
行内元素不占单独的区域，靠自身的字体和图像来进行支撑结构，一般不可以设置宽度，高度，对其等属性，常用于控制文本中的样式
常见的行内样式有 a strong b em i del s ins u span等属性 但是 span是最常用的
特点：1.和相邻的行内元素在一行上
2.高，宽无效，但是水平方向的padding和margin可以设置，垂直方向的无效
3.默认的宽高就是他自己的本身内容的宽高。
4.行内元素只能容纳文本或者其他行内元素 （a特殊）
行内块元素：
在行内元素中有几个比较特殊的标签---<img />,<input />,<td>可以对他们进行设置宽高和对其属性
特点：就是有块级元素的特点也有行内元素的特点
显示模式的转换：
块转行内：display:inline
行内转换成块级：dispaly:block
行内元素标签转换成行内块元素：display:inline-block //既可以在一行上又有大小
交集选择器：<p class="red">好困好想睡觉啊</p> <style>p.red { font-size: 50px;}</style> //这是一个即又的关系的关系
并集选择器：.one,p,#test,h1 {color:green;} //字面意思就是这些标签里面的内容的最终展现的样式是一样的
后代选择器：<div><p>诸葛亮</p></div> <style>div p{color:yellow}</style> //这样就只把div里面的p标签进行相应的样式显示了
子元素选择器：大于号 子元素选择器 只选择亲儿子 .nav>li {} //只对亲儿子有作用 孙子什么的都不起作用
属性选择器：选取某些标签带有特殊属性的选择器 我们称为属性选择器
<a href='#' title="我是百度的链接">百度一下，你就知道</a> //这样鼠标移动到这个链接的位置就会弹出这个提示框
<style> a[title] {color : red} </style> //这样就把相应的样式选择出来了
<style> input[type=text] {color:blue} </style> //这样也就把相应的type="text" 的选择出来了
<style> div[class^=font ] { color:yellow} </style> // ^= 表示以font开头就会选择出来了
<style> div[class$=footer ] { color:yellow} </style> // $= 表示选择以footer结尾的标签内容
<style> div[class*=tao ] { color:yellow} </style> //带有tao字的都会选择出来
伪元素选择器：
首先进行复习一下： .demo 是类选择器 ：demo 是伪类选择器 ::demo 是伪元素选择器
1 p::first-letter { color:red; font-size:50px;} //用来选择第一个字
2 p::first-line { color:green; } //选择第一行
3 p::selection {color:pink;} //让选中的字变粉红色
4 <div>今年</div>
5 <style> div::before {content:"我"} div::after{content:"18岁"}</style> //结果就会输出 我今年18岁了
//注释：before会在div前面进行插入 after会在div后面进行插入
css背景（background）
设置背景图片是否平铺：
<style>
background-image:url(image/1.jpg) //这是背景图片
background-repeat: no-repeat //这是设置没有平铺 默认是repeat设置有平铺的 repeat-x设置横向平铺 repeat-y设置设置纵向平铺
</style>
设置背景的位置：
background-position: right bottom ; //这样就移动到右下角了 方位名词是没有顺序的 谁在前面都行
top//往上面 left//往左 right//往右 bottom//往下 center//居中 就是有分为水平和垂直两个方向上的
background-position: right ; //如果方位名词致谢一个话 另外一个名词则默认为center
还可以利用精确单位来进行：这里要注意的是出现了精确的坐标 第一个值一定是 水平坐标 第二个值一定是垂直坐标
background-position:10px,30px
设置图片是否滚动：background-attachment: scroll; //默认是scroll的 fixed//表示固定的
背景图片的简写方式：
background: #000 url() no-repeat fixed center -25px
背景半透明： <div>background:rgba(0,0,0,0.5)</div> //设置div盒子为半透明
背景缩放：background-size:100px ; //我们尽量只改变一个值 防止缩放失帧扭曲
background-size:50% ; //图片只改变为原来背景的一半的大小
background-size:cover ; //图片自动缩放比例，保证图片始终填满整个背景区域，如果有溢出则会被隐藏
background-size:contain ; //图片自动缩放比例，保证图片始终在完整的显示在背景区域
多背景图片：有两张图片的时候一定要把背景颜色放倒第二张图片那里面
***一个元素可以设置多张背景图片
***魅族属性使用逗号分隔
***如果图片之间存在交集，则前面的图片会把后面的背景图片进行覆盖
***为了避免背景色把图像覆盖住，背景色通常都定义在最后一组上
div{
background:url(image/1.jpg) no-repeat left top, //两张图片的时候用逗号进行隔开
background:url(image/2.jpg) no-repeat right bottom hotpink; //注意：有两张图片的时候 背景颜色一定要写在第 二张图片里面
}
凹凸文字效果：
凸起效果：div { text-shadow:1px 1px 1px #100, -1px.-1px 1px #fff ； } //就是设置左边是白色的 右边是黑色的
凹下效果：div { text-shadow:-1px -1px 1px #100 , 1px 1px 1px #fff ; } //就是设置左黑右边白的效果
文本修饰：
text-decoration:none//取消链接 的下划线 就是取消文本装饰 因为a标签默认是有下划线的