前端学习3之CSS

基础认知

css - cascading style sheets 层叠样式表

为html标签进行美化

写在style标签中，一般放在head标签下，和title平级，加一个style标签 <style> </style>

用一个选择器（对应的想要美化的标签的名字）然后用大括号囊括想要写的内容，选择器用于选标签

{

color: red;    --css的属性名：属性值；注意一定要加分号。冒号后面有空格

/*注释*/

font-size: 30px;

background-color: green;

}

css的引入方式--css可以写在哪里

3中方式：内嵌式，外联式，行内式

内嵌式： css写在style标签中，使用场景：小案例，作用范围：当前页面。

外联式：css写在一个单独的.css文件中,需要在html文件中的head下添加<link rel="stylesheet" href="<单独的.css文件路径>">，使用场景：项目中，作用范围：多个页面

行内式：css写在标签内的style属性中，可配合js（java script）使用。 <div style="color: green;">这是div标签</div>,行内式局限于一个标签，实际开发中很少使用，只作用于当前标签。

基础选择器

在html中选择元素，有4种选择器

1.标签选择器

结构：标签名{css属性名: 属性值;}，选中的是一类标签，而不是单独的一个

2.类选择器

结构：.类名{css属性名: 属性值;}

定义类 在标签内用属性class=""定义, 所有标签都有class属性。

然后针对这个类进行css设置，就不会使所有的标签都产生同样的效果。所有类名相同的具有同样效果。 类名只能由数字 字母 下划线 中划线组成。但不能以数字或中划线开头。

一个标签可以使用多个类名，用空格隔开

3.id选择器

结构 #id名 {css属性名: 属性值;}，配合js使用，不是用于美化标签的。

在标签中定义id属性，但一个标签只能有一个id，一个id只能选中一个标签，id在一个页面中是唯一的，即一个页面只能用一次。

4.通配符选择器

结构 *{css属性名: 属性值;}， 作用 找到页面中所用的标签，设置样式（*为通配符）

一般用于清除所有标签的默认边距 margin and padding

文字和文本相关样式

1. 字体 

font-size: number + px;  px -pixel 像素, google字体默认大小16px

font-weight:   关键字：normal or bold（加粗）

                     或纯数字：100-900的整百数

font-style: 控制文字是否倾斜 normal italic（倾斜的）标签<em></em>同样具有倾斜效果

font-family：字体系列

三大类字体：无衬线字体（网页更喜欢），衬线字体（有顿笔，报刊印刷更喜欢），等宽字体（每个字母都一样宽）参考实际网页源码进行学习

样式的层叠问题，如果给同一个标签设置了相同的属性（属性值不同），此时样式会层叠（覆盖）

font相关属性的连写，属性名 font（复合属性）

取值：style weight size family， 只能省略前两个，如果省略了相当于设置了默认值

如果需要设置单独属性和复合属性，可以把单独的样式写在复合的下面（如果写在上面，后被后面设置的给覆盖），或者把单独的样式写在连写的里面。

example：font: italic 700 66px 宋体；直接设置属性值，不用写属性名。

一个冒号后面跟多个值的写法，中间用空格隔开，是复合属性

2. 文本样式

属性名：text-indent，文本缩进 属性值：数字+px 或者 数字+em， 1em等于一个字的大小（当前标签font-size的大小），缩进的时候用em能保证是按照字的大小进行缩进

属性名：text-align，内容水平对齐。属性值 left center right 左中右对齐，默认左对齐。不止对文本起作用，对图片等也适用. margin是让大标签居中，text-align是让标签内的内容居中

图标的单目标签在body标签内部，所以需要让图片水平位置改变的时候，需要对body标签做css设置。给元素的父级设置样式。 

属性名：text-decoration，文本修饰，属性值underline（下划线） line-through（删除线） overline（上划线） none（无装饰线）

属性名：line-height，控制行高（一行的上下行间距），属性值：数字+px 或者 直接数字（表示当前font-size的倍数），上间距=下间距，行高=上间距+文本高度+下间距。如果设置行高和font连写，注意格式：font：style weight size/line-height family，例：font：italic 700 18px/1.5 楷体

chrome调试工具

鼠标操作，右键->检查，或者fn+F12

在调试器里的style里显示的删除线，表示被其他的层叠掉了 或者在代码中注释掉了

颜色常见取值，关键词法，rbga表示法（a表示透明度，取值0-1），十六进制表示法（#开始）

标签水平居中方法：margin: 0 auto，如果需要让div、p、h水平居中，直接给当前元素本身设置即可，即直接加在该元素的大括号内，不需要单独写在style中

选择器进阶

复合选择器

  后代选择器，根据标签嵌套关系，选择父元素后代中满足条件的元素。 有的标签多次出现，但属于嵌套关系，且需要样式不同

  语法： 选择器1（父选择器） 选择器2（后代选择器） {CSS}   两个选择器之间用空格隔开，选择器1是父元素，选择器2是子元素。 选择器可以是之前学过的任何一种选择器（标签，类，通配符，id。该方法会选中所有同名的后代（不管是儿子还是孙子）

  子代选择器

  语法：选择器1 > 选择器2 {CSS} , 选择父元素子代中（只选择儿子，没有孙子）满足条件的元素

并集选择器， 同时选择多种标签，但设置相同样式

语法： 选择器1，选择器2 {CSS}

推荐格式，每次逗号之后换行，整洁

交集选择器

语法：选择器1选择器2{css}，之间不加任何符号，选中页面当中同时满足多个选择器的标签

hover伪类选择器， 鼠标悬停样式改变

任何一个标签都可以写伪类

语法 选择器:hover {css} 

Emmet语法，通过简写语法，快速生成代码。

背景相关属性

背景颜色：background-color（简写bgc），默认为透明色

背景图片：backdground-image（bgi），属性值url（‘图片的路径’），默认按照充满背景大小来复制图片个数（如图片2*2，背景4*4，则复制4张照片）默认从左上角开始是第一张

背景平铺：background-repeat 属性值：repeat no-repeat repeat-x repeat-y(沿垂直方向y轴平铺）

背景位置：backfround-position（bgp） 属性值：水平方向位置，垂直方向位置

                   格式 background-position: 水平方向位置 垂直方向位置；

                   两种方式，方位名词：水平方向（left center right） 垂直方向 （top center bottom），一共最多有3*3=9种设置方式

                   坐标方式：数字+px，坐标系 原点（0，0）即盒子的左上角， x轴 水平向右为正，y轴垂直向下为正，将图片左上角与坐标点重合即可，即指明的坐标点是图片左上角点的坐标。

                    方位名词取值和坐标取值可以混合使用

背景图和背景色只显示在盒子里面

背景相关属性连写 属性名 background：color image repeat position (推荐顺序，实际不分先后顺序，但font属性连写需要按照顺序）position如果是英文单词进行表示，可以颠倒水平和垂直的顺序，但如果是用数字表达，不能颠倒顺序。

在网页中显示图片的两种方法，方法一：直接用img标签，方法二：在div标签中img属性

元素显示模式

一个标签默认是独占一行，还是一行显示多个标签。标签是否换行

1.块级元素

独占一行，宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高

代表标签：div, p, h系列, ul, li, dl, dt, dd, form, header,

2.行内元素

一行可以显示多个，宽度和高度由内容撑开，不能设置宽高（即设置了也不生效），尺寸和内容尺寸保存一致。

代表标签： a， soan, b, u, i strong, em, ins, s ,del

3. 行内块元素

一行可以显示多个，可以设置宽高

代表标签：input，textarea，button，select，img

4. 元素显示模式之间转换

转向块：display: block

转向行内： display: inline

转向行内块： display: inline-block

p标签中不要嵌套div, p, h等块级标签

p和h标题不能互相嵌套

a标签不能嵌套a标签

CSS特性

1.继承性：子元素默认继承父元素的属性，节省代码

文字控制属性都可以继承，控制标签本身的属性不能继承

如果元素有浏览器默认样式，此时继承性仍然存在。如果默认有样式，不继承，使用自己的。（如超链接有自己默认的颜色，h标题有自己的字号设置）

a标签的color会继承失效

2.层叠性

给同一个标签设置不同的样式，会共同作用在标签上（分别设置的属性1和属性2，都会被一起显示在该标签上）--叠加性

给同一个标签设置相同的样式，只有最后设置的属性值会生效 -- 覆盖性

当样式冲突时，只有当选择器优先级相同时，才通过层叠性判断样式结果

选择器优先级

1.不同选择器的优先级公式

优先级高的选择器样式会覆盖优先级低的选择器的样式, 哪个选择器能够更精准的选择标签（选择的范围越小），哪个选择器的优先级高，选中范围越广，优先级越低

公式： 继承 <通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内式（在标签汇总直接加style） < !important

important写在属性值后面，分号前面

important不能提高继承的优先级，只要是继承，优先级最低

2.优先级权重叠加计算

复合选择器，需要通过权重叠加计算发放，判断最终哪个选择器的优先级最高

比较不同的复合选择器之前的优先级，按照1->4级比较，看哪一种的选择器个数多，睡的优先级就高

先比较第一级，如果有结果，则不用继续比较，直接选用 ，以此类推

如果最终所有级的数字都相同，表示优先级相同，则比较层叠性

!important如果不是继承，则权重最高。一般不用!important

pxCook软件使用，可以看设计图的参数

盒子模型，帮助布局，各种分区的布局

页面中的每一个标签，都可以看作是一个盒子

浏览器在渲染网页时，会讲网页中的元素看做是一个个的矩形区域，也形象的称之为盒子

css中规定每个盒子分别由 content（内容区域） padding（内边距区域） border （边框区域）margin（外边距区域，两个盒子之间的距离），设置在style中

content： width 和 height，取值：数字+px

border（复合属性）：像素（粗细） 线条种类 颜色；三个值不分先后顺序

 boder-left左边框，border-right border-top border-bottom

盒子最终尺寸= width+border & height+border +分别 四个方向的padding，可以自己手动计算实际内容的尺寸，或者用自动减的方法（内减模式），box-sizing: border-box,会自动把盒子的大小设置好

布局顺序：上外到内，从上到下，先考虑宽高，背景色，再设置文字位置，文字大小，颜色等

padding有4个方向（最多取4个值），可以当作复合属性使用，默认顺序：上右下左（顺时针）

如果取三个值：上 左&右 下，如果取两个值：上&下 左&右。对称

margin和padding的设置方式一模一样

清除默认内外边距：浏览器会默认给部分设置padding和margin

两种方法，a.逗号隔开标签名{margin: 0; padding:0} b.*{margin:0; padding:0}

版心： 网页的有效内容

版心居中，都是指水平居中，左右是auto。（margin: 0 auto）会把浏览器的宽度-盒子的宽度，然后将该值平均分配给左右margin。

外边距折叠现象

1. 合并现象

垂直布局的块级元素，上块的margin和下块的margin会合在一起，最终两者距离为margin的最大值，所以只给其中一个盒子设置margin即可

2.塌陷现象

互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。

解决方法：给父元素设置border-top或者padding-top （用于分隔父子元素的margin-top）

                    给父元设置overflow： hidden。（较为完美的方法）

                   转换成行内块元素

                   设置浮动

如果想要通过margin或者padding改变行内标签的垂直位置，无法生效，即行内标签的margin-top/bottom，padding-top/bottom 不会生效, 用行高来设置

结构伪类选择器

根据元素在HTML中的结构关系查找元素，能够减少对于HTML中类的依赖，有利于保持代码整洁。常用于查找某父级选择器中的子元素。

括号中n替换成需要的index，E为标签名。n也可以填成公式，

偶数- 2n or even

奇数- 2n+1 or 2n-1 or odd

找到前5个 -n+5, n从0取，index从1算起

找到从第5个往后 n+5

 伪元素

用css伪元素创建标签（假标签），一般用于装饰性的小图，页面中的非主体内容可以使用伪元素. 必须设置content css属性才能生效，伪元素默认是行内元素，设置宽高不会生效。

元素：HTML设置的标签

伪元素： CSS模拟的标签效果

::before 在父元素内容的最前面添加一个元素, ::before位置写在选择器名字后面

::after 在父元素内容的最后面添加一个元素

标准流

又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

浮动

浮动的作用：让块级标签完美的在一行排布，以前浮动用于图文环绕

浏览器在解析行内块或行内代码时，如果两个标签之间有换行，则会在两个盒子之间自动产生一个空格的间距，解决方法：不转行内块，使用浮动解决

属性名 float

特点：

浮动原色会脱离标准流，在标准流中不占位置，相当于从地面飘到了空中

浮动比标准流高半个级别，可以覆盖标准流中的元素，但不能覆盖文字

下一个浮动元素会在上一个浮动元后面左右浮动

浮动元素具有特殊的显示效果，一行可以显示多个，可以设置宽高

浮动的标签是顶对齐的

浮动的元素不能通过text-align:center或者margin:0 auto居中，因为浮动的优先级更高

css书写顺序 浏览器执行效率更高

1. 浮动 display

2.盒子模型：margin border padding height weight background-color

3.文字样式

定位

让元素自由的摆放在网页的任意位置，一般用于盒子间的层叠情况。

属性名 position，常见属性值 static relative absolute fixed

偏移值设置，分水平和垂直两个方向，选取原则为就近原则（离哪边近用哪个属性）

静态定位 position: static 不定位

相对定位 position: relative：相对自己的原来的位置进行移动，且仍然具有标签原有的显示模式但是原来的位置不会被其他元素占用。只加position不会改变位置，需要填偏移值。

绝对定位 position: absolute：相对于非静态定位的父元素进行定位。先找已定位的元素的父级，如果有这样的父级则以该父级定位，若没有则以浏览器窗口为参照进行定位。脱标，不占用原本的位置，直接漂浮。改变原有标签的显示模式，具备行内块的特点（在一行内共存，宽高生效）

逐层查找父级，就近原则，如果没有复合条件的父级，则根据浏览器窗口位置进行定位。

工作中一般 父级采用相对定位，子级绝对定位，这样子级元素就会包括到父级的尺寸之中

盒子如果是绝对定位了，不能使用margin auto居中，可以使用left:50%(移动到参照物的一半）+ margin-left: -width/2, 垂直居中同理。

自动计算，不需要手动计算。注：css中不能写小数。

left: 50%

top: 50%

transform: translate(-50%, -50%)

固定定位：position: fixed，网页滚动，但该元素位置不受影响，默认在左上角，改变位置参考浏览器窗口，原本位置会被占用，具备行内块的特点，

元素的层级关系

标准流  < 浮动 < 定位

z-index: 数字，数字越大，显示顺序越靠上。 默认值为0

装饰

1.垂直对齐

基线：浏览器默认使用的排版中用于对齐的基线

属性名 vertical-align： baseline(default)/top/middle/bottom

浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐，底下会多撑出一部分

img默认按行内块处理，加上display:block之后可以避免垂直不对齐的情况

光标

改变光标样式

属性名cursor：default/pointer/text/move（十字光标）

边框圆角

让盒子的四个角变得圆润，增加页面细节，提升用户体验

border-radius：（设置圆角的半径）数字+px or 百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的和对角保持一致。

正圆：boder-radius：50%（这也是最大值）

胶囊按钮：盒子本身保证是长方形，boeder-radius：设置为盒子高度的一般。

溢出部分效果

盒子内容吧父恩超出盒子范围的内容

overflow: visible/hidden/scroll/auto 默认值，溢出部分可见/溢出部分隐藏/无论是否溢出，显示滚动条/根据是否溢出，自动显示或隐藏滚动条。

元素本身的隐藏

让元素本身在屏幕中不可见

常见属性visibility: hidden （会占用原本位置的隐藏） 或者 display: none （不占位隐藏）

透明属性opacity

让元素整体（包括内容）一起变透明

属性名 opacity, 属性值 0-1之间的数字，表示透明的程度