前端之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;
}

内容
内容

4)id选择器 

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

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

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

#box {
	font-size:12px;
}

内容

特点：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标签里面

2)外链式样式表

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

3)行内式样式表

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

4)三种样式表总结

样式表	优点	缺点	使用情况	控制范围