目录
css:层叠样式表
1)行内样式表： 定义在标签内部的样式表
2)内部样式表：定义在style标签里面的。style标签定义在head标签内部
3)外部样式表：单独创建一个后缀名为css文件,在该文件中直接定义选择器。然后再html页面中通过
选择器:由 选择器{属性名:值;属性名:值}
优先级：就近原则【记住】
行内>内部>外部【不准确的，因为通常是先引入外部样式表然后再写内部样式表，如果再定义的时候，先写内部样式表
区别: 1>加载时机不同的，link会将css完全加载完毕后，呈现给客户。但是import方式会边加载页面元素边加载css,如果网速教慢，可能会发现import的时候，页面风格未完全加载好
2>使用dom的时候，后期需要用js去操作dom,此时必须得link方式才可以
3>标准不同的，link是xhtml的规范，import是属于css规范
4>浏览器兼容问题，老的浏览器不支持import的方式
首先，从本质上说，这两种方式都是为了加载css文件，但它们还是存在细微的差别。 1、link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。 2、加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。 3、兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。 4、使用dom控制样式时的差别：当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
选择器:
选择器名{
属性名:值;
属性名:值;
}
1）基本选择器
分类:标签选择器： 直接以标签命名的选择器
类选择器 ： 以 . 命名的选择器 。在标签内部通过 class="类名" 引用
id选择器：是以# 命名的选择器。在标签内部通过 id="id名" 引用
优先级：id选择器>类选择器>标签选择器
2）层次选择器
后代选择器:div span:选择div下的所有的span元素，包括子元素的子元素 子选择器:div>span:div下的子元素span元素 相邻兄弟选择器:div+span:和div相邻的兄弟选择器 通用兄弟选择器:div~span:通用兄弟选择器,和div相邻的span元素
和div平级的span元素
我的div下的p元素
我是div下的span元素
我是div下 的p下的span元素 div下的p
div下的h1 h1中的span
和div平级的span元素
和div平级的h2
和div平级的span
3)结构伪类选择器
ul li:first-child : 选取ul下的第一个子元素是li的。如果第一个子元素不是li则定位不到 ul li:first-of-type :选择ul li下的第一个类型是li的元素 ul li:nth-of-type(2):找li这个类型第二个的元素 ul li:nth-child(2) :第二个子元素是li的
4）属性选择器
a[title='flower']:a 标签而且属性title的值等于flower a[title^='a']:a标签而且由title属性的值开头是a a[title$='e']:a标签而且由title属性的值结尾是e a[title*='e']:a标签而且由title属性的中包含e
5)深入CSS属性
1>字形设置 font
font: 风格 粗细 大小 类型 :按照顺序写出来 font-size:字体的大小 12px 24px font-family:字形 看word中字形的设置 font-weight:粗细 normal[正常] bold[加粗] font-style:风格 normal[正常] italic[倾斜]
2>文本设置
color:字体颜色 text-decoration:下划线underline 删除线line-through 去掉下划线none 上划线 overline text-indent:首行缩进 em: 一个汉字 line-height:行高 letter-spacing:字符和字符之间的距离
3>超链接伪类选择器
超链接：四个状态 1>新建 2>鼠标悬浮 3>点击鼠标左键不释放 4>访问过后
新建: link 鼠标悬浮:hover 点击鼠标不释放:active 访问过后：visited
定义吵两句位置的时候必须按照顺序进行定义
l------>v------>h------>a
4>其他的伪类选择器
p::first-letter{ //段落中的第一个字母
color: red;
}
p::first-line{//段落中的第一行
text-decoration: overline
}
p::before{//p之前插入内容
content: "p之前的内容";
color: red;
}
p::after{// p标签之后插入内容
content: "p之后的内容";
color: green;
}
p:empty::after{ //p:empty:空的p元素，
}
p:empty 空的p元素，文字也是子元素[文本元素]
4>列表样式
list-style-type:设置列表符号的样式 disc|square|circle|decimal|none list-style-position:inside|outside :列表符号显示的位置 list-style-image:url() :设置列表符号的图片
1、div 块级元素，使用div+css来进行布局
2、盒子模型的信息: 边框【border】 外边距 【margin】 内边距【padding】
边框:
border: 边框线的粗细 边框线的形状 边框线的颜色 boder-width:边框线的粗细 boder-style:边框线的形状 solid【实线】 dashed【虚线】 dotted【圆点】 double【双线】 border-color:边框线的颜色
盒子模型中给值的个数顺序
如果给定一个值 四个方向都一样
如果给定两个值 上下 左右
如果给定三个值 上 左右 下
如果给定四个值 上 右 下 左
内边距:
padding:
外边距
margin
外边距设置的时候，可以设置大的盒子外边距的值 margin:0px auto 可以使盒子自动居中
盒子尺寸
box-sizing:
默认值是：content-box
boder-box:盒子大小就是定义好的值。加上内边距，盒子的尺寸部变的
圆角边框
boder-radius: 一个值四个角都相同的 。 两个值 左上右下一样 三个值 左上 剩余两个角 右下 四个值 从左上开始顺时针开始走
盒子阴影
box-shadow
内容回顾:
1> css 选择器
1)基本选择器 标签选择器 类选择器 class id选择器 id
2) 后代选择器 A B【A后面所有的B元素】 A>B 【A后面所有的子元素B元素】 A+B 【相邻的兄弟元素B】 A~B【A的兄弟元素B】
3)属性选择 a[href] = *= ^= $=
4)伪类: a:link a:visited a:hover a:active
p:first-letter p:first-line div::after div::before
2> css中各种属性【必须得多做几个页面】
字体介绍 ：font [font-size font-weight font-family font-style]
文本: color ,text-indent,text-decration ,line-height,
列表： list-style-type none|decimail|disc|circle|square
list-style-image: url()
list-style-position:inside outside
背景：background-color
backgroud-img
background-position
background-repeat
background
盒子模型: border ：边框
margin：外边距
padding:内边距
box-sizing
box-shadow
动画:
1>标准文档流：在页面中写的标签有一个对应的位置
块级元素:占据一块区域。如果设置宽和高是起作用的
内联元素:自己不独占一行。如果设置宽和高不起作用了
display属性：显示
块级元素默认值是block 内联元素默认值是inline
如果给块级元素设置display属性的值为inline后，改块级元素就变成了内联元素了，也可以给内联元素设置display属性的值为block,此时内联元素就变成块级元素
如果设置一个元素的display属性为none则该元素隐藏。
2>浮动：float
左浮动： float:left
右浮动：float:right
浮动：浮动后的元素会脱离标准文档流，会对兄弟元素和父元素有影响的。
如果想清除浮动的影响就使用clear:left|right|both 清除浮动对兄弟元素的影响。知道浮动的各个元素的样式
了解有些时候，浮动的元素并没有在一行。空间不够了。
浮动后的元素对兄弟元素和父元素都有影响。如果一个盒子中的元素全部浮动，父容器高度就会变小。
扩展盒子的高度
1） 直接设置父容器的高度
2）使用clear 在父容器的最后加入一个空的元素，设置该元素的风格clear:both来进行设置
3) 为父元素添加伪类
#container:after{
content: '';
clear: both;
display: block;
}
4）借助overflow设置盒子的高度 溢出
visible:默认值，溢出的内容不会给修剪
hidden:溢出的部分隐藏
scroll:滚动轴 溢出的部分会被修剪，可以借助滚动轴看清全部
如果没溢出，也会有滚动轴的样子。【水平和垂直都有】
auto:自动判断【如果溢出，只有垂直方向没有水平方向】
position属性
1>默认值 static 无定位
2>相对定位：relative 相对定位，相对于自己原来的位置来定义，相对定位后的元素仍然在标准文档流中，也就是说对兄弟元素和父元素没任何影响。如何元素浮动后定义，相对于浮动后的位置来定位的。
3>绝对定义 abslout /绝对定位,看父容器，如果父容器没有定位，相对于浏览器来定位，如果父容器定位了，相对于父容器定位/【使用比较多，比如热销排行榜等都是绝对定位。此时绝对定义相对于父容器来说的。】
4>固定定位 fixed :永远相对于浏览器来定位。使用场景就在广告上，永远相对于浏览器来说的。如果内容比较多，出现滚动轴，依然是可以固定在固定的位置上的。