·Css笔记

Css的作用：

[if !supportLists]1. [endif]css用来解决混乱的结构和样式。

[if !supportLists]2. [endif]Css让结构和样式相分离

[if !supportLists]3. [endif]Css是让HTML罪的网站更加美观的工具（美容师）

[if !supportLists]4. [endif]Css是做样式的HTML是做结构的

·Css层叠样式表

Css层叠样式表主要是设置HTML页面中的文本内容（文字大小、对齐方式等）图片的外形（宽度、边框样式、边距等）以及版面的布局等外观显示样式。

选择器-----属性-----值----声明、

1、px为像素的意思，作用是改变大小

2、/**/表示注释的意思，在工作中可以更好的理解代码的意思

3、normal是默认值的意思浏览器会显示默认的标准格式

4、abligue 浏览器会显示斜体的字体样式

5、<span>是一个方块组的意思

·Css基本的几个公式

1. font-size字号大小，放在style后面

2.font-family字体样式（用来改变字体）

3.font-family宋体、楷体、微软雅黑（按照一定顺序查找的意思）

4.font-weight字体粗细（用你来改变字体的粗细）

5.font-weight：boid字体型号（用来修改字体的行号）{数字400=normal而700=boid}

6.font-style italic字体倾斜（用来修改字体的倾斜程度）

7.font-style normal还原原本的样子（恢复到默认值）

8.font-style italic修改字，体为斜体样式

注：使用font属性时必须按照上面的语法格式中的顺序书写，不能更换顺序，各个属性一空格隔开。（其中不需要设置的属性可以省略<取默认值>，但必须保留font-size和font-family属性，否则font属性不起作用）

·选择器

总体概念：要想将css样式应用于特定的HTML元素，首先需要找到该目标元素，在css中执行这一任务的样式规则部分被称为选择器（选择符）

·标签选择器

概念：标签选择器值HTML标签名称作为选择器按标签名称分类，微页面中某一类标签制定统一的css标签

格式：属性1：属性值1：属性2：属性值2：属性3：属性值3（标签名）

属性1：属性值1：属性2：属性值2：属性3：属性值3（元素名）

标签选择器的优点/缺点：

标签选择器最大的优点是能快速为页面中同一类型的标签统一样式，同事这也是他的缺点，不能设计差异化样式。

·类选择器

类选择器的使用方法：”.”进行标识后面紧跟类名，基本语法格式：

.类名{属性1：属性值1：属性2：属性值2：属性3：属性值3} 标签调用的时候class类名即可

类选择器的最大优势是可以为元素对象定义单独或相同的格式（上面声明，下面引用）

小技巧：1.长名称或词可以使用中横线来为选择器命名

[if !supportLists]2. [endif]不建议使用下划线来命名css选择器

Css书写规范：

Css书写规范分为三类：自定义类、重新定义HTML样式、连接状态试。

自定义样式：

为设计师自定义的心css样式，影响被使用本样式的区域，用于完成网页中布局的样式设定。样式名”.”+相应样式效果描述的单词或缩写

文本样式：样式名称：+”.”+字号+行距+颜色；

重新定义HTML样式：

重新定义HTML样式为设计师重新定义已有的HTML标签样式，影响统一网页中某一标签的样式定义

样式名”html标签”例：”hr{border:lpx dotted #333333}”

多类型选择器：

多类型选择器可以无限加，更加方便（无限加限制条件，更加精细）

·通配符选择器

注意：这个铜佩服选择器就像我们电影中看到的明星一样，中看不中用（不建议使用）

·伪类选择器

连接伪类选择器：

;link未访问的连接

;visited已访问的连接

;hover鼠标移动到连接上的效果

;active选定的连接

注意：写的时候他们的循序的顺序尽量不要改变顺序

·结构伪类选择器

First-child;选取数星期父元素的首个子元素的制定选择器

Last-child;选取属于父类元素的最后一个子元素的制定选择器

Nth-childcnl;匹配属于其父元素的底n个元素不论元素类型：

Even是偶数，add为奇数，n为从0开始

Nth-last-childcn;选择器匹配属于七元素的底n个元素，不论n个元素的类型，从最后一个元素倒着开始，n为数字

·目标伪类选择器

：target目标伪类选择器：选择器课用于选择当前活动的目标元素

Line-height行高；

Text-align水平对齐方式（水平垂直前两个参数必须写后两个参数可以省略）

Text-indent首行缩进

Letter-spacing字间距

字体颜色透明化公式：

Color：rgba（0,0,0,{0-1}）

Text-shadow文字阴影画

·内联样式表

内联样式表是通过标签的style属性爱设置元素的样式.

语法中style是标签的属性，实际上任何HTML标签都有实体业属性，用来设计行内式，其中属性和值得书写与css样式相同，行内样式对其所在的标签你及嵌套的标签起作用。

·外部样式表

Link标签就是把外面的css引导当前的HTML也后面中的，就是连接

创建css文件 点击本目录最大文件，new-----other-----搜索css-----创建----改名就好

在HTML页面上书写link标签

”style sheet”>（后面两个是固定的不变）

·标签的显示模式

·块级元素

每个块级元素都会独自占据一整行或多行，可以对其设置宽度，高度对其等属性，常用于网页布局和网页结构搭建

行内元素

·行内元素（内联元素）不占有独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对其属性，常用语控制页面中的文本样式。

块级元素和行内元素的区别：

块级元素的特点：

1.总是从新开始

2.高度行高外边距都可以控制

3.宽度默认是容量的百分百

4.可以容纳内联元素和其它块元素

行内元素的特点：

[if !supportLists]1. [endif]和相邻行内元素表在一行上

[if !supportLists]2. [endif]高宽无效，但水平方向的padding和margin可以设置，垂直方向无效。

[if !supportLists]3. [endif]默认宽度就是他本身内容的宽度

[if !supportLists]4. [endif]行内元素只能容纳文本或其他行内元素

·行内块元素

在行内元素中有几个特殊的标签-,,可以对他门设置高度和对其属性

行内元素的特点：

[if !supportLists]1. [endif]和相邻行内元素在一行上，但是之间有空白缝隙

[if !supportLists]2. [endif]默认宽度就是他本身内容的宽度

[if !supportLists]3. [endif]高度，行高，外边距一句内边距都可以进行控制

标签显示模式转换

将块状元素转换为行内模式display：inline

将行内模式转换为块状元素display： black；

行内标签模式转换为匡壮内标签显示模式display：inline-block；

·Css复合选择器

复合选择器是有两个或多个基础选择器通过不同的方式组成而成，目的是为了可以选择更准确的目标元素标签

h3（标记选择器）.class（类别选择器）{color（属性）：red（值）；font（属性）-size（值）；25px}

记忆技巧：交集选择器是并且的意思相对来说比较少，不建议使用。

·并集选择器

并集选择器是各个选择器通过逗号连接而成的任何形式的选择器（包括标签选择器等等）

都可以做为冰机选择器的一部分。如果默写选择器定义的样式完全一样，就可以利用冰机选择器为他们定义相同的css样式。

·后代选择器

后代选择器又称包含选择器用来选择元素或元素的后代，其实就是吧外城的标签写在前面，内层标签写在后面，中间用空格分隔当标签发生嵌套式内部标签成为外部标签前的后代。

·子元素选择器

Itemli{color：#ofo后代选择}

·属性选择器

选取标签带有耨些特殊的选择性质的选择器我们称为属性选择器（属性选择器用括号表示）

上括号表示font开始就可以

￥表示font结束就可以

*表示任意位置

·伪元素选择器

E：：first-letter文本的第一个单词

E：：first-line文本第一行

E：：selection可改变稳重选中文本的样式

·dome类选择器

：first-child伪类选择器

：：first-letter微元素选择器

P：：first-letter选择第一个字进行编译

P：：first-line选择第一行进行编译

P：：selection{color；pink}选择区域改变颜色

Div：before{content”俺”}在内容中插入内容“俺”

Div：after{content”俺}在内容后面添加内容”俺”

·空格规范

选择器与{}之间必须包含空格

属性名宇之后的：之间不允许包含空格：与属性值之间必须包含空格

·选择器规范

当一个rule包含多个selector时，每个选择器声明必须独占一行

选择器的嵌套层级不能大于三级位置靠后的限定条件应尽可能精确

·属性规范

属性定义后必须以分好结尾

·css背景

Background-color 背景颜色

Background-image背景图片地址

Background-repeat是否平铺

Background-position背景位置

Background-attachment背景固定还是滚动

·背景的合写（复合属性）

background：背景颜色 背景图片 是否平铺 北京滚动 背景设置

Background：URL（图片地址）

Background-repeat：repeat-x-y（横铺竖铺）

·背景位置

语法：background-position：length||iength

Backround-position：position||position；

参数：

Length百分数1有浮点数字和单位标识符组成的长度值

Position：top（上）center（中）bottom（下）left（左）right（右）

说明：设置或检索对象的背景图片位置，必须先制定background-image属性。默认值为（0%0%）

如果指定一个值改值将用于横坐标，纵坐标默认为50%

如果指定两个值则为对角线

如果指定三个值则为上和左右

如果指定四个值则为四个角的值

注意：1.position后面是x坐标和y坐标可以使用名词或者精确单位

2.如果和精确单位和单位名字混合使用必须x坐标在前y坐标在后（实际工作中最用最大的就是北京鱼片居中对齐了）

[if !supportLists]3. [endif]如果方位名词只写一个，另外一个默认值为center

[if !supportLists]4. [endif]精确单位第一值一定是x坐标，第二只一定是y坐标

·背景附着

参数：scroll背景图像是随着对象内容滚动fixed背景图像固定

说明：设置或检测背景图像是随对象内容滚动还是固定的

公式：background-attachment：fixed

·背景简写

Background背景颜色、背景图片地址、背景平铺、背景滚动、背景位置

·背景透明

格式css支持背景透的写法 background：rgba（0,0,0,0-1）之间

注意：背景半透明是指盒子背景变透明内容不会受到影响，同样可以给文字边框甲乙透明效果都是rgba格式：

背景图片设置大小background-size：100px    我们尽量只改一个值防止自动缩放扭曲 建议使用百分比缩放

·多背景

以逗号分割可以设置多背景，可用于自适应布局做法就是都好隔开就好

[if !supportLists]1. [endif]一个元素可以设置多冲北京图像

[if !supportLists]2. [endif]魅族属性间使用都好分割

[if !supportLists]3. [endif]如果设置的多重背景图之间存在着交集前面的背景图会覆盖在后面的背景图之上

[if !supportLists]4. [endif]微辣避免背景色将图像盖住，背景色通常都定义在最后一组上

公式：back ground：图片路经+图片路经

·凹凸文字

根据亮度的阴影面积来制作凹凸文字

Text-decoration通常我们会给连接修饰效果

值 描述

None默认定义标准的文本

Underline定义文本的下一线条

Overline定义文本的一条线

Line-througe定义穿过文本地一条线

·css的三大特征

Css层叠性，为红色是指多种css样式的叠加

比如先给某个标签制定了内部文本颜色为红色接着又制定颜色为蓝色，则选择下面的蓝色这也叫样式冲突，一般情况下如果出现样式冲突喝会按照css书写的顺序以最后的演示作为标准

·css继承性

所谓继承性是指书写css样式表时，子标签会继承父标签的某种样式如颜色和字号，想要将他应用于字另类而已

并不是并不是所有的css属性都可以继承

·css权重（优先级）

定义css样式时经常出现两个或多个规则应用于同一元素上这是我们就要应用到优先级问题

解决方案：继承样式的权重为0，不管父元素央视的权重有多大，被子元素集成式，都为0，行内样式优先，应用style属性元素，其行内样式的权重非常高，权重相同时根据css书写桂畔来定义 ！important权重最高

·css特殊性

关于css权重我们需要一套计算公式来计算，这就是css特殊性（他是一个衡量css优先级的一个保准具体规范如下：）

specificity用一个四位数的数字串（css2是三位数）来表示更像四个级别，数值从坐到右边，左边的最大，一级大于一级水位之间没有进制，级别之间不可超越

继承或者奉献值        0，0，0，0

每个元素（标签）奉献值为     0，0，0，1

每个类的奉献值为   0，0，1，0

每个id的奉献值为   0，1，0，0

每个行内样式奉献值 1，0，0，0

每个！important的奉献值    &无穷大（继承的权重为0）

优先级的总结

1.使用了！important声明的规则

2.内嵌在HTML元素的style属性里面的声明

3.使用了id选择器的规则属性选择器微元素和伪类选择器的规则

4.使用了元素选择器的规则

5.只包含一个铜用 选择器的规则

6.同一类选择遵循就近原则

总结：权重是优先级的算法，层叠式优先级的表现

css盒子模型

看透网页的本质，把网页必成一块块的盒子css其实没有太多逻辑可言，累死我们小时候万的积木，我们可以自由的随意的摆放处想要的效果

所有的文档元素（标签）都会生成一个矩形它描述了一个文档元素在网页布局汇总所占位置的大小，因此每个盒子处理有自己大小和位置，还影响着其他盒子的大小和位置

盒子边框

盒子边框就是那层皮

语法：border：border-width（边框宽度）||border-style（边框样式）||border-color（边框颜色）

边框属性 一遍设置边框样式（bordel-style）边框样式用于定义域面边框的风格，常用属性值：

none：没有边框的意思即忽略边框边框的宽度（默认值）

solid：边框为单位实线（最为常见）

dashed：边框为点线

double：边框为双实线

top为上边框的意思    bottom下边框

表格的细线边框公式：

table（border-collpse：collapse：）

border-collapse：collapse：表示边框合并在一起

圆角边框

语法格式：border-radish左上角右上角右下角左下角

一个为百分值，两个为对角值，三个为一组对角值+两个确定值，四个为各自的精确值

内边距

padding属性用于设置内边距，是指边框与内容的距离

padding-top上内边距

padding-rightyou内边距

padding-bottom下内边距

padding-left左内边距

注意：后面跟几个数值表示的意思是不一样的值得个数：表达的意思

一个数：padding上下左右边距

两个数：padding上下边距

三个值：padding上边距左右边距下边距

四个数：padding上下左右内边距

外边距

margin属性用国语设置外边距，设置外边距会在元素之间创建空白，这段空白通常不能放其他内容

公式：margin-top上边距

          margin-right右边距

           margin-bottom下外边距

            margin-left上外边距

            margin：上下左右外边距（取值顺序与内边距相同）

外边距与盒子居中

可以让一个盒子实现水平居中，需要满足两个条件：1.必须是块级元素2.盒子必须制定了宽度

然后就给左右的外边距都设为auto就可使块级元素水平居中了（实际工作中常用这种方式加您性网站布局）

实例：.header{width：960px：morgin：0auto}

盒子内的位子水平居中：text-align：cenger

盒子水平居中  左右margin改为auto就可以了

                        插入图片更改是width和height

                        背景图片更改大小只能使用  background-size

                        背景图片更改位置我们用packground-position

一般情况下背景图片适合做一些小图标使用

清楚元素的默认从内而外边距

为了更方便的控制网页中的元素，只做网页时，

可以使用如下代码{padding：（）清楚内边距}

                            {margin：   （）清除外边距}

注意：行内元素是只有左右内边距的，是没有上下内外之分的

我们尽量不要给行内元素制定上下的内外边距就好了

外边距合并

使用margin定义矿元素的垂直外边距时，可能会出现外边距合并。

相邻块元素垂直外边距的合并

当上下相邻的两块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上边距margin-top则他们之间的垂直间距不足margin-bottom与margin-top之和而是两者之间的较大值这种现象北城为边距合并也称边距塌陷

嵌套块状元素垂直外边距的合并

对两个桥套关系的块元素，如果子元素没有上边距积边框，则父元素的上外边距会与子元素的上外边距发生合并，并和之后的外边距为两者中的较大者，即使父元素上外边距为0，也会发生合并

解决方案：1.可以为父元素定义像素的上边框或内边框

                   2.可以为父元素添加overflow：hidden

content宽度和高度

使用款式不行width和高度属性height可以对黑子的大小进行控制。

外盒尺寸计算：element空间高度=content+padding+border+margin

element 空间宽度=content width+padding+border+margin

内核尺寸计算（元素大小） =content height+padding+border（height为内容高度） 

element width=content width+padding+border（width为内容高度）

注意：1.宽度属性width和高湿度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）2.计算盒子明星的总高度是，还考虑上下两个盒子垂直外边距合并的情况

width和height的属性值可以为不同的单位的数值换货相对于父元素的百分比%实际工作中最常用的像素值

大多数浏览器，如firefoe，IE6以及上版本都采用了w3c规范，复合css规范的盒子模型的总宽度和总高度的计算原则

盒子模型布局稳定性

开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，是什么时候使用外边距

答案是：其实他们大部分情况下是可以混同的，就是说，你用内边距也可以，用外边距也可以，那个方便赢那个

休闲顺序： 宽度内边距，外边距

width-padding-maring

相关知识点思维导图