前端之CSS基础知识

1.CSS的概念及其作用
css全称为（Cascading Style Sheets）翻译过来就是层叠样式表

作用：主要作用就是设置网页的文字（大小，颜色，字体，对齐等等）图片和板式布局等等

2.字体属性
设置字体的大小:

取值：font-size: 12px;            注意：在css大多数数值都需要添加单位

设置字体的粗细:

normal 不加粗(400)         bold 加粗(700)         bolder

设置字体的风格:

font-style 设置字体的风格(样式):  normal 默认 显示标准的字体样式            italic  字体倾斜

设置不同类型的字体:

 font-family 设置不同的字体          默认是微软雅黑

 注意事项： 1.中文字体需要添加引号 英文可以不用 但是如果英文字体有空格或者其他特殊符号$也需要添加引号

                     2.字体可以设置多个 中间用逗号隔开 浏览器的解析原则：从左至右 一次解析 如果当前电脑识别这个字体 则直接使                           用，后续不管 如果不能识别 继续找下一个字体 如果都不识别 则会使用默认的

                     3. 不建议使用一些偏门字体

font简写：   font:   font-style  font-weight  font-size/line-height  font-family;

不建议修改顺序  并且不需要设置的属性可以不写  但是font-size和font-family必须指定，否则将不起作用

3.选择器
想要操作任何一个标签，那么首先需要做的事情就是选中对应的标签，而这个就是选择器的作用

基础选择器：标签选择器   类选择器   多类名选择器   id选择器   通配符选择器   伪类选择器

1)标签选择器

div {
	font-size: 100px;
    }

 标签选择器：通过标签名选中对应的元素

    优点：会将所有满足条件的标签都选中

    缺点：无法实现差异化选择

2)类选择器

.box {
	   color: red;
	 }

声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} （声明类名选择器）

给对应的元素添加class类名属性 class="自定义的类名" （调用类名选择器）

特点：可以给相同标签的元素定义不同的样式 在实际工作中用的最多

3)多类名选择器

   一个元素可以拥有多个类名       类名和类名之间用空格隔开多类名选择器可以让我们解决更复杂的一些需求

.red {
	color: red;
}
.ft12 {
	font-size: 12px;
}
.ft14 {
	font-size: 14px;
}
 
<div class="red ft12">内容</div>
<div class="red ft14">内容</div>

4)id选择器 

id选择器的使用方式和类选择器基本一致

1. 声明id #自定义id名字 {属性1:值1;属性2:值2;}

2. 调用id 给对应的元素添加属性 id="自定义id"

 

#box {
	font-size:12px;
}
 
<div id="box">内容</div>

特点：id选择器一般配合后期的JS使用较多，效果和类选择器一样，只不过是类选择器可以被多个元素调用，但是id选择器只能被一个元素调用          在同一个页面中，不能出现两个id值相同的元素

5)通配符选择器

特点：选中任何元素，后期用于页面初始化

* {
    属性1: 值1;
    属性2：值2;
}

6)伪类选择器

伪类选择器可以理解为选择的元素的一种状态，并不是如之前直接选中元素就完事了

a:link   没有被访问的时候的状态                 a:visited  访问之后的状态    
a:hover        鼠标移动上去之后的状态        a:active    鼠标按下的状态

伪类选择器在实际工作中，不会写这么多，意义不大，推荐简写的方式完成

a {}
a:hover {}

4. 文字的对齐  缩进   下划线
1)水平对齐

text-align:值;  
取值：left right center
该属性控制的是标签  “内部的文字”  水平居中

2)首行缩进

text-indent:值;
取值可以是像素，也可以是em  推荐写法：text-indent:2em;

3)字体下划线和删除线

text-decoration:值;
取值：underline 下划线     line-through 删除线    none 去掉多余的样式

5.行高
    行高控制的是文字与文字之间的上下距离 （行距）

     line-height:值;

     1）值的取值是像素

      2）**小技巧：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中

      3）两者结合使用可以让单行文字在标签内部水平垂直居中

6.样式表的书写位置

样式表可以有三种书写方式，分别分为内嵌式样式表、外链式样式表、行内式样式表

1)内嵌式样式表

内嵌式样式表是在html里面嵌套一个style标签，将css语句都写在style标签里面

<style>
	css语句
</style>

2)外链式样式表

单独创建一个后缀名为.css的文件，在html文件里面通过link标签引入css文件  

<link rel="stylesheet" href="css文件的地址" />

3)行内式样式表

将样式直接写在标签本身上，以属性的形式存在

<div style="color:green; font-size:20px;"></div>

4)三种样式表总结

 

7.标签的三种显示模式
a.块级元素
1)可设置宽和高

2)独占一行

3)默认宽度是父级标签的宽度

4)块级元素一般用于包裹其他块级或者行内元素

5)p这种段落标签不要嵌套块级元素

代表标签：div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section
                  display:block;

b.行内元素
1)设置宽高无效

2)行内标签允许其他的行内标签排一排

3)尽量不要用行内元素包裹块级元素 a链接除外

代表标签：a,span,b,u,s,i,strong,ins,del,em
                 display:inline

c.行内块元素
1)行内块标签其实本质上是一种特殊的行内标签 （text-align和line-height都可以控制行内块元素）

2)允许其他的行内元素排一排

3)可以设置宽高

代表标签：input,img
                 display:inline-block

注：一般实际工作来说标签不需要进行转换，因为大多数情况下都可以选择对应的标签来实现需求 行内块较为特殊！！

8.复合选择器
1)交集选择器      既又原则 
例如：p.box {}  既是p标签 又有box类名

2)并集选择器       将多个选择器合并在一起 
例如： div,p,h1 {}  

3)后代选择器       空格前面的元素和后面的元素必须是嵌套关系 
例如：.father .houdai {}

4)子代选择器     > 前面的元素和后面的元素必须是父子关系 
例如：.father > .son {}

注：快速定位行数：ctrl + g

9.背景
        背景颜色：background-color: 颜色;

        背景图片：background-image: url(路径);

        背景平铺：background-repeat: no-repeat || repeat || repeat-x || repeat-y;

        背景是否跟随滚动：background-attachment:scroll(默认) || fixed;

        背景位置：background-position：

        1)方位名词 left right top bottom center 顺序不论

        2)像素 第一个值是X轴方向 第二值是Y轴方向         程序的坐标系 水平x轴 方向朝右 垂直Y轴 方向朝下

        3)百分比（了解）                                                    4)混写 但是需要考虑顺序     

       背景的简写:

       background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

       如：background: #fff url() no-repeat scroll center center;

       img和背景图片的区别：

       img不需要专门写宽高就能够显示在页面上

       而背景图片默认是撑不开容器的 需要专门写宽高
       一般产品插入图都推荐使用img  而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
       而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

10.css的三大特性
     1)继承性  
后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承 color font- line- text- 可以继承 块元素可以继承父级元素的宽度，高度不继承

注意：a链接颜色不予继承，需要单独写

注意：如果元素自身有该css样式，那么该样式不予继承

     2)层叠性 
       后渲染的css样式会覆盖掉先渲染的css样式 （权重相同的情况下）

       注意：层叠性针对css的书写声明位置，类的调用位置先后会它没有影响

     3)优先级（权重）
       不同的选择器之间会有不同的优先级

       继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

     权重叠加
     CSS特殊性（Specificity）
      关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为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贡献值    正无穷
     !important 只能针对单条css属性起效果 而不是整个选择器

     !important 对于继承没有作用

     当多个选择器选中同一个元素的时候  会进行权重对比 并且权重是会进行叠加的

     比如的例子：

     div ul  li   ------>      0,0,0,3
    .nav ul li   ------>      0,0,1,2
    a:hover      -----—>      0,0,1,1
    .nav a       ------>      0,0,1,1   
    #nav p       ------>      0,1,0,1

11.盒子模型
  网页的布局本质就是把网页上的元素，如图片，文字，都放入盒子里面，然后按照自己的需要摆放盒子的过程就是网页布局

 1)边框
  border: 边框大小  边框样式（solid 实线  dashed 虚线 dotted 点线 double 双实线） 边框颜色;

  border-方位名词:边框大小 边框样式 边框颜色;

 边框大小；border-width
 边框样式：border-style
 边框颜色：border-color

	border:1px solid #ccc;

• 补充：细线表格 border-collapse:collapse;

  table {
  			border:1px solid #ccc;
  			/* 合并边框 针对的是table  添加在table身上*/
  			border-collapse: collapse;
  		}

  2)圆角：borde-radius:值; 一个值控制的上左 上右 下右 下左;
           边框圆角语法：border-radius:像素;

          取值还可以是百分比 百分比参照的是当前盒子完整的宽高

          注意：边框圆角并不需要依赖边框

          单独控制圆角

          一个值：四个角

          两个值：对角线

          三个值：左上 对角线 右下

          四个值：从左上开始 顺时针

  border:10px solid #ccc; 
  border-radius: 20px; 
  border-radius: 50%;

  3)内边距
  padding的取值可以是1-4个

  一个值：控制整个上下左右
  两个值：第一个控制上下  第二个控制左右
  三个值：第一个控制的上 第二个控制的左右 第三个控制的下
  四个值：上右下左

  也可以单独写： padding-top   padding-bottom   padding-left   padding-right

  注意：行内元素里面不要写上下padding，左右可以

  4)外边距
  margin的取值方式和padding一样

  margin的大小只会移动盒子的位置，并不会对盒子的大小造成影响（特殊情况例外）

  行内元素也不要给上下的margin

  特殊值：auto margin:0 auto; 可以让一个块级元素水平居中

  前提条件：必须是块级元素 同时必须有固定的width

  注意：text-align和margin:0 auto的不同 前者是控制盒子内部的文字或者内部的行内块 后者控制的是盒子本身