[华为云WEB前端全栈成长计划]六、CSS介绍
【摘要】 前面我说了HTML中的相关知识，具体想要更深入了解，或者其他标签的使用可以去W3school学习或者按照W3C的标准去规范代码和查询。
现在我们来了解一下CSS。
前面我说了HTML中的相关知识，具体想要更深入了解，或者其他标签的使用可以去W3school学习或者按照W3C的标准去规范代码和查询。
现在我们来了解一下CSS。
CSS简介
CSS时Web开发三大件HTML、CSS、JavaScript中的一个。主要用来对布局，颜色，文本等的设计。如同前面所说，餐厅的装修里面的大小、样式就要用CSS来定义。
CSS发展
CSS的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS导入</title>
<!--<style type="text/css">
div{
/*方式二*/
background-color: yellow;
}
</style>-->
<!--方式三-->
<link rel="stylesheet" href="test.css" />
<style>
/*方式四*/
@import url("demo");
</style>
</head>
<body>
<div style="color: red;">CSS的导入方式一</div>
</body>
</html>CSS为同级目录下的文件
div{
background-color: yellow;
}CSS基本语法
CSS其实就是我们选择HTML中的元素，然后对其样式进行修改。
注意图片中的h1，前面没有任何的标记就能选中，这是因为h1时HTML中存在的标签，我们只需要写h1就能选择到所有的h1
#text是id选择，如果某个标签内有id="xxx"我们就可以使用#xxx选择到有id="xxx"的元素
.box1时类选择器，如果某个标签内有class="xxx"我们就可以使用.xxx选择到有class="xxx"的元素
其中有几个注意事项：
选择器{样式名: 样式值;}
分号分割
小写
逗号分割
其中分号分割表示设置多个样式，每个样式间用分号隔开，小写指css中代码一般都采用小写，逗号分割指要选择多个元素，每个元素使用,分隔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
h1,h2{
color: red;
text-align: center;
text-shadow: 5px 5px 5px blue;
}
</style>
</head>
<body>
<h1>AAAAAAAAAAA</h1>
<h2>BBBBBBBBBBB</h2>
</body>
</html>效果：
css的特性
层叠
继承
层叠我们可以这样理解，我们对统一元素的某一个属性多次赋值，我们会根据设置属性的权重来选择最后应用的属性值
----来自https://blog.51cto.com/13742773/2337045-----
1.CSS权重
是指样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。
2.权重的等级
（1）!important,加在样式属性值后，权重值为10000
（2）内联样式，如：style=""，权重值为1000
（3）ID选择器，如：#content，权重值为100
（4）类，伪类和属性选择器，如：content、：hover权重值为10
（5）标签选择器和伪元素选择器，如：div,p,:before权重值为1
（6）通用选择器（ * ) 、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
继承，我们可以理解为如果对外部标签(部分标签)设置了属性，那么内部的标签也会默认使用该样式。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）