CSS基础
- CSS中文叫层叠样式表,样式:颜色、大小、形状等。网页是层次结构的,通过CSS我们可以为每一层设置样式,最终我们看到的只是最上面一层。总之,CSS为网页中的元素设置样式。
- 使用CSS修改样式的三种方法:
1、第一种方式(内联样式,行内样式):在标签内部使用style属性设置样式,style属性的值就是样式,样式也是名值对结构。可以设置多个样式,以分号结束。
问题:使用内联样式只能对一个标签生效,当样式发生改变时,维护成本太高,实际开发绝对不要使用内联样式。
2、第二种方式(内部样式表):将样式写到head中的style标签里。然后通过CSS选择器选中元素并为其设置样式,可以为多个标签设置样式,并且修改时只需修改一处即可全部应用,内部样式表更加方便对样式进行复用。
问题:内部样式表只能对一个页面生效,不能跨页面复用。
3、第三种方式(外部样式表):将CSS样式编写到一个外部的CSS文件中,然后通过link标签引入CSS文件。意味着只要想使用这些样式表的网页只需使用link标签引入,样式表可以在多个网页中复用。这种方式是最佳的方式。同时,将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
font-size: 10px;
}
</style>
<link rel="stylesheet" href="外部样式文件地址">
</head>
<body>
<h1>华罗庚</h1>
<p style="color: red;font-size: 10px;">埋头苦干是第一</p>
<p>熟能生出百巧来</p>
<p>勤能补拙是良训</p>
<p>一分辛苦一分才</p>
</body>
</html>
CSS语法
- style标签中的内容不属于html的区域,里面不能写html的东西,应遵循CSS的书写规范。
- CSS中的注释:
/* 注释内容 */
(注释快捷键:ctrl+/) - CSS的基本语法:选择器 声明块
选择器:通过选择器可以选中页面中的指定元素,比如:p的作用就是选择页面中所有的p标签,h1就是选择页面中所有的h1标签
声明块:通过声明块来指定要为元素设置的样式,声明块由一个个声明组成,声明是一个名值对结构,一个样式对应一个样式值,名和值之间以:连接,以;结尾。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
font-size: large;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>华罗庚</h1>
<p>埋头苦干是第一</p>
<p>熟能生出百巧来</p>
<p>勤能补拙是良训</p>
<p>一分辛苦一分才</p>
</body>
</html>