youngiyang_打码少年
youngiyang_打码少年

前端基础知识整理（css篇）

前端基础知识整理（css篇）_第1张图片

CSS分类：
CSS代码插入的形式可以分为三种：分别是内联式，嵌入式，外部式。

直接写入标签内部，就做内联式

        span{
            color:red;
            }
    ````
把代码写在head里的style标签里面，就叫做嵌入式
`
`这种方式叫做外联式，也叫外部式

选择器
选择器的种类有有：标签选择器，类选择器，ID选择器，子选择器，包含选择器，通用选择器，伪类选择符，分组选择符。
其中比较值得注意的是子选择器和包含选择器的区别
子选择器的作用：用于选择指定标签元素的第一代子元素 .food>li
包含选择器的作用： 用于选择指定标签元素下的后辈元素 .food li
通用选择器 *
伪类选择器 a:hover{color:red;}
分组选择器 h1,span{color:red;}

CSS权重
当同一个标签设置了多个不同样式的时候，要看那个样式生效，这个时候是通过权值来判断的。如果权值一样，那么是通过顺序来判断，处于最后面的css样式会被应用。另外!important的权重是最高的，一般要写在分号前面。
![](http://upload-images.jianshu.io/upload_images/627120-07ef4befae839f5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CSS设置字体
CSS设置的字体一般要为比较常用的字体，因为用户看到字体的样式取决于用户本地电脑是否安装了你设置的字体
body{font-family:"Microsoft Yahei";} 或者
body{font-family:"微软雅黑";}
但是第一种比第二种的兼容性更好一些。
实现粗体，很多人为了实现粗体样式都会使用h1-h6或strong标签，这样是不好的，CSS有单独实现粗体的方式。
p span{font-weight:bold;}

缩进样式
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;}

段落排版--中文字间距、字母间距
letter-spacing:50px; 字母间距
word-spacing:50px; 单词间距

段落排版--对齐
text-align 这个只能对块状元素使用
text-align:center;

元素分类:
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素.

常用的块状元素有：
`
、
、
...
、
    、