一. CSS简介。
CSS:层叠式样式表。
作用:为标签元素添加各种样式(css属性),让网页美观。
二. CSS的引入方式。
1. 行间/行内引入
2. 内部引入,在head中,title标签下
3. 外部引入,单独创建 .css文件,在head中,title标签引入.引入关键字 link 三种方式可随机混搭使用!
1. css内部引入方式。
1.1 实现方式:在html文件的head标签中,添加上一对style标签,将样式写到style标签中即可。
1.2 优点:
1.2.1 不用来回调文件写代码。
1.2.2 因为html结构和css样式在同一个文件中,可以非常方便的查找以及写css样式。
1.3 缺点:
1.3.1 不能复用。
1.3.2 如果写大型网站,会出现html文件中css代码多余html结构代码。
1.4 使用场景。
网页比较小/课堂代码/测试。
<!--1.行间引入 不推荐使用,会造成代码过于冗杂!-->
<div style="width:200px ; height: 100px; background-color:sandybrown ;">今天天气好好啊哈哈哈哈!</div>
2. css外部引入方式。
2.1 实现方式:
2.1.1 在工程的css文件夹中单独创建一个独立的css文件,在该css文件中添加css样式。(注意:不需要在css文件中添加style标签)
2.1.2 在html文件的head标签中,添加link标签,引入关联外部的css样式文件。
2.2 优点:
2.2.1 能够实现html规范中的html结构和css样式的分离。
2.2.2 方便复用。
2.3 缺点:
2.3.1 不方便查看结构和样式。
2.4 使用场景。
中大型网页。
<!--外部引入css文件-->
<link rel="stylesheet" type="text/css" href="css文件路径"/>
3. CSS内联式。
3.1 实现方式:在开始标签中,添加style属性,属性值直接给上css属性即可。
在head中设置如下代码
<!--内部引入 -->
<style type="text/css">
/*注释!!!*/
p{
width: 500px;
height: 50px;
background-color: deeppink;
}
div{
width: 600px;
height: 200px;
background-color: palegreen;
text-align: center;
}
</style>
2.css中常用的选择器
- 选择器:就是帮我们精准的选中某一个或者某一些标签
- 优先级: a. !important b. #id c. .class d. 标签名选择器
3.css中常用的样式属性
- 注意:css层叠样式表,关键单词 style
- 注意: .css文件是依赖于.html文件运行的.不能单独运行