CSS起源
1.给标签设置属性，修改样式
1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
2.HTML只有一个作用就是用来 **添加语义**
3.当需求变更时我们需要修改大量的代码才能满足现有的需求
2.使用CSS来给标签添加样式的优点
1.不用记忆哪些属性属于哪个标签
2.当需求变更时我们不需要修改大量的代码就可以满足需求
3.在前端开发中CSS只有一个作用, 就是用来修改样式
3.CSS格式(内嵌样式)
<head>
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
...
}
</style>
style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性其实可以不用写, 默认就是type="text/css"
设置样式时必须按照固定的格式来设置. key: value, 其中:不能省略, 分号大多数情况下也不能省略
*css的代码结构 *选择器{属性名:属性值;属性名：属性值}
4.CSS书写格式
1.行内样式 :<div style = "color: red">我是盒子</div>
2.内嵌样式 :可以在一对head标签中写上一堆style标签,然后在style中编写CSS代码.
2.文体属性：
1.text-decoration:取值
作用: 给文本添加装饰
取值
underline： 下划线
line-through： 删除线
overline： 上划线
none： 什么都没有, 最常见的用途就是用于 去掉超链接的下划线
2.text-align:
作用: 设置文本水平对齐方式
取值
left 左
right 右
center 中
3.text-indent:取值
作用：设置文本缩进
取值：2em,其中em是单位, 一个em代表缩进一个文字的宽度
3.颜色属性：
1.color：取值
作用:设置颜色
取值:
rgb
英文单词
rgba
16进制
4.盒子阴影
1.box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
2.注意点：
1.盒子的阴影分为内外阴影,默认情况下就是外阴影.
2.添加阴影只需要三个参数即可.
box-shadow:水平偏移，垂直偏移，模糊度
3.默认情况下阴影的颜色和盒子内容的颜色.
如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色;
5.背景颜色属性
1.background-color:取值
取值:
1.英文字符
2.rgb
3.rgba
4.16进制格式
2.background-image: url();的属性, 专门用于设置背景图片.
注意点
1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
3.background-repeat属性，就是控制背景图片平铺方式
取值：
repeat:默认，水平垂直都需要平铺
no-repeat:水平垂直都不需要平铺
repeat-x:水平平铺
repeat-y：垂直平铺
应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
4.background-position:属性, 就是用于控制背景图片的位置
格式：background-position: 水平方向 垂直方向;
取值:
1、具体的方位名词
水平方向: left center right
垂直方向: top center bottom
2、具体像素
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的
*同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色.
7.background-attachment:属性,背景关联方式
格式:background-attachment：scroll;
取值:scroll 背景图片会随着滚动条滚动
fixed 背景图片不会随着滚动天滚动
6.背景属性缩写形式
格式:background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点:background属性中,任何属性都可以省略.
6.边框属性
1.概述:边框就是环绕在标签宽度和高度周围的线条.
2.格式:
border ：边框宽度 边框样式 边框颜色;
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
3.取值
solid 实线
dashed 虚线
dotted 圆点
double 双实线
4.分别先设置四条边的宽,样式,颜色
border- 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
5.注意点:
这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值
只设置上右下,左边的取值和右边的取值相同
只设置上右, 左边的取值和右边相同,下边的取值和上边相同
只设置上, 则右下左边的取值和上边相同
7.外边距属性：（padding）
1.什么是内边距?
边框和内容之间的距离就是内边距.
2.格式:
非连写：
padding-top: 值px;
padding-right: 值px;
padding-bottom: 值px;
padding-left: 值px;
连写：
padding: 上 右 下 左;
3.注意点:
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
8.内边距属性:(margin)
1.什么是外边距?
标签和标签之间的距离就是外边距.
2.格式
非连写：
margin-top: 值px;
margin-right: 值px;
margin-bottom: 值px;
margin-left: 值px;
连写：
margin: 上 右 下 左;
3.注意点
外边距的那一部分是没有背景颜色
水平方向上, 外边距可以叠加
在默认布局的垂直方向上,外边距不会叠加,会出现外边距合并, 谁的外边距大就听谁的
9.div和span标签
1.div：一般用于配合css完成网页的布局
2.span:一般用于配合修改css完成网页的一些局部信息
3.div和span有什么区别?
1.div会单独占一行，但span不会
2.div相当于一个容器的标签，而span相当于一个文本标签
4.容器级的标签和文本级的标签的区别?
1.容器级的标签中可以嵌套其它所有的标签
2.文本级的标签中只能嵌套文字/图片/超链接
5.容器级标签:div h ul ol dl li dt dd …
6.文本级的标签:span p buis strong em ins del …
CSS元素的显示模式及模式转换
1.Html和Css下的分级
*在HTML中所有的标签分为两类, 分别是容器级和文本级
*在CSS中所有的标签分为两类, 分别是块级元素和行内元素
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis stong em ins del ...
块级元素
p div h ul ol dl li dt dd
行内元素
span buis strong em ins del
2.块级元素和行内元素的区别?
*块级元素
如果没有设置宽度, 那么默认和 父元素一样宽
如果设置了宽高, 那么就按照设置的来显示
*行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的
*块內级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
img就是行内块级标签
3.CSS元素的模式转换
1.如何转换CSS元素的显示模式?
*设置元素的display属性
2.display取值:
block:块级
inline:行内级
inlink-block:行内块级
盒子模型
1.什么是CSS盒子模型?
CSS盒子模型是一个形象比喻,HTML中所有标签都是一个盒子.
在HTML中所有的标签都可以设置:宽度/高度 边框 内边距 外边距.
2.盒子box-sizing属性
1.CSS3中新增一个box-sizing属性,这个属性可以保证在我们给盒子新增padding和border之后，盒子的大小不变化
2.原理: 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度.
3.取值:
content-box 元素的宽高 = 边框 + 内边距 +内容宽高
border-box 元素的宽高 = 设置width/height的宽高
4.注意点:
1.如果两个盒子是嵌套关系,那么设置里面的盒子顶部外边距,外面的盒子也会被定下来
2.若外面的盒子不想被定下来,可以给外面的盒子添加一个边框属性
3.开发中, 如果需要控制嵌套关系盒子直接的距离,首先考虑使用padding,再考虑margin
padding本质上是用于控制父子关系之间的间隙
margin本质上是用于控制兄弟关系之间的间隙
4.在嵌套关系的盒子中, 我们可以利用margin:0 auto，让里面的盒子相对于外边的盒子水平居中
5.margin:0 auto:只对水平方向有效,对垂直无效
6.text-align:center和margin:0 auto区别
*text-align:center :让盒子内的文本内容水平居中
*margin:0 auto：让盒子本身水平居中
7.清空默认内外边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
8.什么是行高?
*注意点:
行高和盒子高不同
2 行高指的是每行内容的高度; 盒子高指的是元素的高度.
3 文字在行高中默认是垂直居中的
4 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可
5 想让盒子中多行文字居中,需要设置padding让文字居中,然后设置box-sizing属性来保证盒子元素的宽高不变.