关于CSS的学习内容一

css学习内容一

1.什么是css
2.样式表的创建
3.css语法
4.css的一些属性代码
5.css层叠性的体现
6.选择器
7.去除下划线的属性
8.首行缩进
9.边框设置
10.行高设置
11.外间距 margin
12.内间距 padding
13.层次选择器
14浮动属性
15.文本相关的属性
16.背景相关的属性

1.什么是css

层叠样式表
就是如何修饰网页信息的显示样式

2.样式表的创建

行内样式(不推荐使用，不利于后期维护)

3)外部样式(适合整站开发和长页面的书写)

方法一
方法一：外部样式表的创建：

(链接的方法写给html文件) 说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即与之间。 rel（relation）：用于定义文档关联，表示关联样式表； type：定义文档类型；
方法二
方法二：外部样式表的导入
<style type="text/css">
@import url(目标文件的路径及文件名全称);

注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；
两种引入外部样式表link和import之间的区别
差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>






<style>
@import url(demo.css);
</style>
</head>

<body>
<div>div</div>
<div>div</div>
<p>段落</p>
<p>段落</p>
<h3>标题3</h3>
<h3>标题3</h3>
</body>

</html>

/* 这里书写想要修饰的过程，不再需要style，直接修饰 */
div {
height: 100px;
background-color: pink;
}

p {
height: 120px;
font-size: 30px;
border: 3px solid blue;
background-color: skyblue;
}

3.css语法

选择器（选择符）{属性：属性值；属性：属性值；}

4.css的一些属性代码

宽度 width: ;
高度 height: ;
文字颜色 color: ;
背景颜色 background-color: ; 或者简写 background: ;
边框 border:边框宽度边框线型边框颜色； 3个参数顺序可以随便换
边框线型实线 solid 虚线 dashed 点状 dotted 双线 double
单边框 border-top: ; 上边框 border-right: ; 右边框 border-left 左边框……
rgb 取值范围是0-255 rgba 可以设置透明度取值是0-1
文字大小 font-size
去掉列表符号list-style:none;

5.css层叠性的体现

如果样式没有冲突，就正常显示
如果样式发生冲突，会发生覆盖显示
文字大小如果冲突会根据权重浏览器进行选择，权重就是衡量这段代码在浏览器中占比重的参考值，如果权重越大，就会优先显示
行内样式权重值是1000 像直接div p等这样的叫做类型选择器（标签选择器）权重是0001
文字颜色也是权重决定
当内部样式和外部样式权重一样时，现在就根据书写顺序，谁的css代码距离标签近就解析谁（就近原则）

标准描述：

css层叠性是指css样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的css选择器所指订的属性，一般也被描述为权重高的覆盖权重低因此也称作层叠。
解析规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
解析规则2：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式

6.选择器

选择器整体分为5大类：基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器
类型选择器（标签选择器）以文档对象HTML中的标签作为选择符

定义：想改变某个元素的默认样式时或者统一文档某个元素的显示效果时使用
语法：标签{属性：属性值；}
权重为1

class选择器（类选择器）

定义：想要区分某个标签时，比如想要区分2个div
语法：<标签 class=“box”> class 名字{属性：属性值；}例如：.box{width: 300px;}
特点：class可以给多个属性值，多个属性值之间用空格隔开。例如
权重为10

id选择器

定义：想要区分某个标签时，比如想要区分2个div
语法：<标签 id=“box1”> #id名字{属性：属性值；}例如：#box{width: 300px;}
注意点：id有唯一性，属性值只能是一个，可以重复用
权重100，行内比这个权重大

通配符选择器

定义：想让所有的标签同时改变样式的时候
语法：{属性：属性值；} 例如：{margin: ; padding: ;}清除所有标签自带的间距

群组选择器

定义：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号隔开
语法：选择器1，选择器2，选择器3{属性：属性值；} 例如： .box,p,#a2{width:300px;}
好处：需要使用相同样式的地方只需要书写一次，可以减少代码量，改善css代码的结构，提高网页的性能

后代选择器/包含选择器

定义：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择器，直接用包含选择器的方式解决。

语法：选择符1 选择符2 {属性：属性值;}

 例如：<ul class="list"><li></li><li></li><li></li></ul>样式 ： .list li{background:red;}

含义：含义就是选择符1中包含的所有选择符2;

伪类选择器

语法： a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active。
- 说明：
  A）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为： a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
  B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;} 表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

7.去除下划线的属性

 <!-- 去除下划线的属性  text-decoration  文本修饰 属性值 none  没有修饰（常用于给a去除下划线）  underline  下划线  overline  上划线 line-through  删除线 --><a href="#">表示的是空链接</a><div class="box1">添加下划线</div><div class="box2">添加上划线</div><div class="box3">添加删除线</div>a {/* 去除下划线 */text-decoration: none;}.box1 {text-decoration: underline;}.box2 {text-decoration: overline;}.box3 {text-decoration: line-through;}

8.首行缩进

<!-- 首行缩进  text-indent 文本缩进  属性值可以是正数也可以是负数，常用值是2emem  一个单位  是一个相对单位，相对于文本大小   默认1em=16px 默认字号是16 --><p class="box4">解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:Auto; margin-right:Auto”。但这个方式IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的"text-align:center;"。解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:Auto; margin-right:Auto”。但这个方式IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的"text-align:center;"。解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:Auto; margin-right:Auto”。但这个方式IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的"text-align:center;"。</p>.box4 {text-indent: 2em;}

9.边框设置

边框样式：border-style:solid(实线) / dashed(虚线) dotted(点划线) double(双线) none(去掉边框）

 <!-- 边框 border 拆开设置边框宽度 border-width边框颜色 border-color边框线形 border-style简写全边框  border:2px  solid  blue ;单边框 border-left:2px  solid  blue ;border-right:2px  solid  blue ;border-top:2px  solid  blue ;border-bottom:2px  solid  blue ;--><div class="box5">边框拆开设置</div><div class="box6">边框简写</div>.box5 {width: 200px;height: 80px;/* 默认是黑色，且属性值是1个的时候是全边框 *//* border-width: 10px; *//* border-style: solid; *//* 属性值如果是2个，前面是上下，后面是左右 *//* border-width: 10px 5px;border-style: solid dashed;border-color: red blue; *//* 属性值如果是3个，第一个是上，第二个是左右，第三个是下 *//* border-width: 10px 5px 2px;border-style: solid dashed dotted;border-color: red blue; *//* 属性值如果是4个，第一个是上，第二个是右，第三个是下，第四个是左  */border-width: 10px 5px 2px 30px;border-style: solid dashed dotted double;border-color: red blue;background-color: yellow;}.box6 {/* 纯css写三角形 写的是四个三角形 *//* width: 0px;height: 0px; *//* width: 100px;height: 100px;border-left: 10px solid red;border-right: 10px solid blue;border-top: 10px solid olive;border-bottom: 10px solid pink; *//* 纯css书写有给箭头朝下的三角形 */width: 0px;height: 0px;border: 10px solid transparent;border-top: 10px solid olive;}

10.行高设置

行高 line-height
属性值有3个写法

1.line-height：20px;

2.line-height:2;此时的数字表示的是倍数此时的2就是2倍，是字号大小的2倍

3.line-height:200%;此时的百分比表示的是倍数此时的200%就是2倍，是字号大小的2倍

4.line-height: 1;主要可以用来清除文本自带的垂直缝隙
行高的概念（通过概念知道ps中如何测量行高这个数值/通过概念知道如何设置一个单行文本垂直居中）
行高指的是字号大小一样的时候，多行文本的第1行的基线到下1行文本基线之间的垂直距离
ps中测量文字大小的时候，行高值就是顶线到顶线或者底线到底线之间的垂直距离
行高 = 字号大小 + 行距（半行距+半行距）

想要实现单行文本的垂直居中，直接设置行高就可以，这个行高的值是多少，可以看高度是多少，就可以单行垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {background-color: aqua;/* 写法1：直接给px  直接给行高，可以单行文本垂直居中 */line-height: 80px;font-size: 20px;}.box2 {background-color: darkgoldenrod;font-size: 20px;/* 写法2：直接给数字 */line-height: 4;}</style></head><body><div class="box1">我是文本内容吧</div><div class="box2">我是文本内容</div></body></html>

行高的使用场景

设置单行文本垂直居中，行高的数值书写=高度的数值
想要清除文本垂直的缝隙，可以line-height: 1;或者line-height: 100%;
需要计算行距或者半行距的时候行距 = 行高 - 字号大小
行高在说盒子的时候，一定是字号一样的情况下，如果字号不一样，那么line-height: 1px; 然后配合 margin 或者padding设置间距

11.外间距 margin

使用场景：想要设置间距，且间距对于盒子来说是外面的时候用

用法：单独设置外上 margin-top \ 外下 margin-bottom \ 外左 margin-left \ 外右 margin-right

简写： margin:10px;    表示的是4个方向都是10margin:10px  20px;    表示的是上下都是10，左右都是20margin:10px  20px  30px;    表示的是上是10，左右都是20，下是30margin:10px  20px  30px  10px;   上是10，右20，下是30，左是40

属性值可以是正数也可以是负数，单位可以是px，也可以是%（这里的%之多少是父元素盒子宽度的%之多少）

属性值也可以是单词，单词只能是auto，目前只有左右支持，上下暂时没有视觉效果，auto是对剩余空间做处理的，所以一般想要盒子居中都有宽度 margin: 0 auto;

注意点：

margin-top 的传递问题：针对的是一个包含里面，给子元素设置了 margin-top ，应该是子元素自己下来，但是浏览器解析的时候，会把父元素也带下来，这就是浏览器把子元素的上间距传递给了父元素

解决方法1：给父元素添加一个上边框 border-top

解决方法2：给父元素或者子元素添加浮动

解决方法3：给父元素添加overflow:hidden;(原理是BFC单词的意思是溢出隐藏)

margin的上下重叠问题：针对的是一个并列结构里面，给上面的盒子添加了 margin-bottom ，给下面的盒子添加了 margin-top ，应该解析的结构是2个间距之和，但是浏览器解析的结果是最大数值的间距。（原理是因为BFC）

解决方法1：给下面的盒子添加一个父元素，且添加overflow:hidden;（原理是因为BFC）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {width: 500px;}.box1 {background: yellow}.box2 {background: skyblue;/* 单独设置 *//* margin-top: 20px;margin-bottom: 20px;margin-left: 40px;margin-right: 80px; */margin: 20px 30px 40px 60px;}.box3 {background: pink;}.box4 {background: blue;/* 负数 *//* margin-top: -10px;margin-bottom: 10px; */width: 200px;height: 100px;margin-left: 50%;/*此时的50%是父元素body宽度500的一半*/}.box5 {background: green;/* 属性值是单词  auto 版心，安全区 是自动给设置间距，是设置剩余空的间距给该盒子 */width: 200px;margin-left: auto;margin-right: auto;}.box6 {background: pink;}</style>
</head><body><div class="box1"> 盒子1</div><div class="box2"> 盒子2</div><div class="box3">盒子3</div><div class="box4">盒子4</div><div class="box5">盒子5</div><div class="box6">盒子6</div>
</body></html>

12.内间距 padding

使用场景：想要设置间距，且间距对于盒子来说是里面的时候用

用法：单独设置外上 padding-top \ 外下 padding-bottom \ 外左 padding-left \ 外右 padding-right

简写：padding:10px;    表示的是4个方向都是10padding:10px  20px;    表示的是上下都是10，左右都是20padding:10px  20px  30px;    表示的是上是10，左右都是20，下是30padding:10px  20px  30px  10px;   上是10，右20，下是30，左是40

padding属性值不可以是负数，也不支持单词auto，单位可以是%（这里的%之多少是父元素盒子宽度的%之多少）

注意点：

padding撑大的问题，padding是内间距，是盒子里面添加间距，如果盒子设置了高度和宽度，再添加padding，会把盒子撑大的，如果想要设置间距用padding，但是又不想盒子撑大

解决方法1：给设置的宽度或者高度上减去添加的padding值

解决方法2：把常规的盒子解析机制，变成怪异盒子的解析机制，在怪异盒子的解析机制里面加padding是不会把盒子撑大

     想要触发怪异盒子需要添加   box-sizing:border-box;（盒子大小边框盒子）<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {width: 1000px;}.box1 {background: yellow}.box2 {background: skyblue;/* 单独设置 */padding-top: 20%;padding-bottom: 10px;padding-left: 300px;}.box3 {background: pink;}.box4 {background: blue;/* 简写 */padding: 10px 80px 100px 200px;}.box5 {background: green;width: 200px;height: 200px;padding-top: 50px;box-sizing: border-box;}.box6 {background: pink;}</style>
</head><body><div class="box1"> 盒子1</div><div class="box2"> 盒子2</div><div class="box3">盒子3</div><div class="box4">盒子4</div><div class="box5">盒子5盒子5盒子5盒子5盒子5盒子5盒子5盒子5盒子5盒子5</div><div class="box6">盒子6</div>
</body></html>

13.层次选择器

目的是为了书写的时候减少class的依赖权重都是算和
针对包含结构

后代选择器（包含选择器）
语法：某某1 某某2{ } div p { } h3 span { }
可以是选择器到某某1下面所有的某某2{ }，所有的包含儿子后代孙子后代……
子选择器
语法：某某1>某某2{ } div>p{ } p>span{ }
可以选择到某某1下面的所有儿子某某2{ } 只选择儿子

针对并列结构

相邻兄弟选择器
语法：某某1+某某2{ } div+p{ } p+span{ }
可以选择到某某1后面紧挨着的某某2{ } 后面的紧挨着的
通用兄弟选择器
语法：某某1~某某2{ } div~p{ } p~span{ }
可以选择到某某1后面的所有的某某2{ } 后面的所有的

14浮动属性

浮动 float
使用场景：想要竖着的东西横着过去的时候/当有些盒子不支持某些属性的时候也是可以用（原理BFC）

属性值：float:left;向着左边浮动

   float:right;向着右边浮动float:none;默认值

一个盒子浮动之后，该盒子是悬空不占位的，此时会空出一块空间，下面没有浮动的盒子会上去，但是下面没有浮动的盒子里面的内容，会环绕浮动盒子显示

多个盒子同时浮动了，那么会横着排列（原理BFC），如果都是左浮动，那么就是从左往右浮动；如果都是右浮动，那么就是从右往左浮动

15.文本相关的属性

文字大小：{font-size:12px;}单位还可以是em，是父级元素的font-size的倍数；/系统默认的字号大小为16px，默认情况下字体大小为16px，1em=16px
加粗的处理：
font-weight
属性值是数字，不带单位
100 - 300 细一些 400 - 500 常规不加粗 600 - 900 加粗
属性值是单词
bolder 更粗一些 bold 加粗 normal 不加粗
bolder和bold视觉是一样的
倾斜的处理
font-style:italic(倾斜)/oblique(倾斜的文字)/normal(不倾斜)
字间距
letter-spacing
词间距
word-spacing(浏览器解析这个内容是否一个词根据编辑器敲的空格，有空格，那么空格前的是一个单词，空格后的是另外一个单词)
文本颜色：{color:颜色值;} red / #f00 / rgb(255,0,0)
水平对齐：{text-aligen:left左 / right右 / center居中 / justify两端对齐（在部分浏览器中，对于中文不起作用）;}只针对文本或图片
垂直对齐方式{vertical-align:top上 / bottom下 / middle居中 / baseline基线（某种特定的元素类型起作用；）}
文字行高{line-height:normal / 50px； } line-height:20px;line-height:2em（当行高的单位省略时，默认为em）
文本修饰 text-decoration:none（没有修饰） / underline（添加下划线） / overline（添加上划线） / line-through（添加删除线）
首行缩进：{text-indent: 20px / 2em;}
可以取负值，只对第一行起作用
font复合属性： font:weight style size/line-height family

16.背景相关的属性

在开发的过程中，有时候需要把一些小的图标合成一个大图，这个过程叫做图片整合，合成好的大图叫做精灵图/雪碧图

原因是因为合成之后有优势1.可以在页面加载的时候，减少页面的请求次数，同时提高页面的加载速度2.减少图片体积

熊猫压缩

图片整合好的精灵图使用的时候，有2个方法：

1.用img+css的margin负数去写，同时配合overflow

2.用css的背景图直接移动位置

背景相关的：

单独设置：1.背景颜色：background-color
2.背景图：background-image：url()
特点1：背景图默认是很多个的，默认是平铺的
特点2：背景图的可视范围是盒子大小决定的
盒子大小=背景图大小，那么就能看到完整的一个图
盒子大小>背景图大小，那么就能看到很多个图
盒子大小<背景图大小，那么就能看到部分背景图
特点3：背景图不占位
特点4：背景图默认是在盒子的左上角
3.背景图的平铺 background-repeat:no-repeat(不平铺)/repeat(平铺默认值)/repeat-x(水平平铺)/repeat-y(垂直平铺)
4.背景图的位置 background-position:水平位置垂直位置；
属性值是数字+单位
数字+px
数字+% 此时的%的结果是父元素的百分之多少-背景图的百分之多少
数字可以是正数或者是负数
属性值是单词
水平的 left right center
垂直的 top bottom center
5.背景图的依附设置 background-attachment:scrpll(默认值滚动)/fixed(固定，是把背景图固定在了浏览器窗口里面)
css新增加的背景属性
6.背景图的大小 background-size: 横向的纵向的；
属性值是数字+单位，2个参数的顺序不能换
数字+px
数字+% 此时的%是当前盒子的百分之多少
数字可以是正数或者是负数
7.属性值是单词，如果是单词的时候可以写一个值，另外的一个值默认是center，同时两个属性值的顺序可以互换
cover 全覆盖把背景图放置足够大，会让背景图完全盖住盒子范围，但是部分背景图不可见
contain 缩放背景图按照原有的比例进行缩放，背景图可能盖不住盒子范围
简写：
background：背景颜色背景图平铺设置位置固定；
不添加css3新增加的时候，顺序可以随便换
background：背景颜色背景图平铺设置位置/大小固定；
如果添加了css3的背景图大小的话，大小是参数要放在位置后面而且用/隔开
一个盒子放多个背景图的时候，中间用逗号隔开；如果既有图片又有颜色，那么颜色要放在最后一组的位置，多个背景图的时候先写的是谁谁就在上面
- 1、背景颜色 {background-color:颜色值;}
- 2、背景图片的设置 background-image：url(背景图片的路径及全称)
- 3、背景图片平铺属{background-repeat:no-repeat不平铺/repeat平铺/repeat-x X轴平铺/repeat-y Y轴平铺 }
- 4、背景图的位置{background-position:left/center/right/数值 top/center/bottom/数值;}
- 水平方向上的对齐方式（left/center/right）或值
  垂直方向上的对齐方式(top/center/bottom)或值
  background-position:值1 值2;
  两个值：第一个值表示水平位置的值，第二个值：表示垂直的位置。
  当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置；
- 5、背景图的固定{background-attachment:fixed固定/scroll滚动;}
- fixed 固定，不随内容一块滚动，根据可视窗口固定位置；
  scroll:随内容一块滚动。
- 网页上常用的图片格式
  1）jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
  2）gif：无损压缩格式，支持透明，支持动画，适用于颜色数量较少的图像;
  3）png:无损压缩格式，支持透明，不支持动画，适用于颜色数量较少的图像;
- 6、背景尺寸大小{background-size:x y;/cover/contain}
  x y是一组值，代表的是背景图片水平垂直方向的大小
  conver:覆盖的意思，等比例放大这个图片，铺满这个盒子为止，容易出现裁剪效果
  contain:包含的意思，等比例放大这个图片，只要有图片撑满某一个方向就结束，容易出现留白区域
- 复合属性：7、背景属性的简写方式background:red url(img/img01.jpg) no-repeat left bottom;