前端CSS知识简洁总结（内有思维导图）

81 阅读 0 评论 54 点赞

我是靠谱客的博主落寞啤酒，最近开发中收集的这篇文章主要介绍前端CSS知识简洁总结（内有思维导图），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

参考大佬的
https://blog.csdn.net/qiushi_1990/article/details/40260447?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-4.nonecase

认识css样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}


选择符{属性:值}
p{color:red;}
选择符：又称选择器
p{font-size:12px;color:red;}



CSS 样式代码插入的形式
分为以下3种：

1,内联式css样式

就是把css代码直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p>

2、嵌入式css样式，
就是可以把css样式代码写在<style type="text/css"></style>标签之间。
<style type="text/css">
span{
color:red;
}
</style>


3、外部式css样式
写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中

<link href="base.css" rel="stylesheet" type="text/css" />

标签选择器
标签选择器其实就是html代码。如的<html>、<body>、<h1>、<p>、<img>。
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

类选择器
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/

ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。


类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。


子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的子元素。如下面的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。

子选择器和后代选择器
>作用于元素的第一代后代，空格作用于元素的所有后代。


通用选择器
* {color:red;}

分组选择符
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}



根据权值来判断使用哪个css样式
逐渐累积
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/


内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green

重要性
有些特殊的情况需要为某些样式设置具有最高权值
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面