前端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要写在分号的前面























































































他的图太棒了
我这里借鉴过来了
https://blog.csdn.net/weixin_44309019/article/details/88134914

你可能感兴趣的:(css)