目录
什么是CSS?
CSS的全称是层叠样式表,可以用来设置网页中元素的样式。网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式,而最终我们能看到的只有最上边的一层。
CSS的注释
CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中。
( 快捷键为输入法英文状态下:Shift+! )
CSS的语法
<head>
<style type="text/CSS">
标签名/选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
.....
}
</style>
</head>
CSS的语法:选择器/标签名{属性:属性值;}
CSS的书写位置
第一种方式:内联样式(行内样式)
<body>
<div>
<em style="color: red; background-color: pink; font-size: 36px">便罪学法当,婵而生。</em>
</div>
</body>
写在开始标签里面,写一个style属性,将一组一组的样式写在style属性值里面。可以写多组样式,但一定要用;隔开。
- 优点:优先级高,不易被其他样式覆盖;书写方便;
- 缺点:一次只能设置一个元素;容易出现重复代码使代码繁琐
第二种方式:内部样式表
<head>
<style>
p {color: red;font-size: 50px;}
</style>
</head>
写在head标签内部,先写一个子元素style标签,再通过选择器选中对应的要设置的元素/标签,在{}里设置一组样式或多组样式,同样也需要用;隔开。
- 优点:结构和样式分离,一次可以设置多个元素,使编写简洁明了
- 缺点:编写不太方便,需要上下翻找确定样式;优先级相对内联样式低,较容易被覆盖
第三种方式:外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./00.css">
</head>
<body>
<h1>沁园春·雪</h1>
</body>
</html>
图示:.CSS
在html文件的外部新建一个.css文件,在css文件里写样式,然后通过在head标签内部写子标签link标签,将html文件和css文件联系在一起。(link标签里有href属性,在href里写下引入css文件的路径。)
- 优点:实现结构样式分离,更改一个的同时可以更改多个,大大提升效率;可重复使用
- 缺点:需要引入,编写和查找不便;需要链接才可使用