目录
css(Cascading Style Sheets):层叠样式表,它是一种标记语言
核心思想:HTML搭建结构,CSS添加样式,实现了“结构与样式的分离”
一、css编写位置
1、行内样式
(1)写在标签的style属性中(又称:内联样式)
(2)语法:
<h1 style="color:goldenrod;font-size: 50px;">hello</h1>
(3)缺点
书写繁琐、样式不能复用、并且没有体现“结构与样式的分离”的思想,不推荐大量使用,只有对当前元素添加简单样式时,才偶尔使用
2、内部样式
(1)位置
写在html页面内部,将所有的css代码提取出来,单独放在<style>标签中,<style>可以放在html文档的任何地方,但最好放在<head>标签中
(2)语法
<style>
h1{
color:goldenrod;
font-size: 50px;
}
</style>
(3)优点
样式可以复用、代码结构清晰
(4)存在的问题
①并没有实现:结构与样式完全分离
②多个html页面无法复用样式
3、外部样式
(1)位置
写在单独的.css文件中,随后在html文件中引入使用
(2)语法
①新建一个扩展名为.css的文件,把所有的css代码都放入该文件
h1{
color:goldenrod;
font-size: 50px;
}
②在html文件中引入.css文件(href中写引入的css文件名称)
<link rel="stylesheet" href="positon.css">
(3)优点
样式可以重复使用、结构清晰、可触发浏览器的缓存机制,提高访问速度,实现了“结构域样式的完全分离”
实际开发中,几乎都使用外部样式,这是最推荐的使用方式
4、优先级
行内样式>内部样式=外部样式
(1)内部样式和外部样式的优先级相同,且:后面的样式会覆盖前面的
(2)同一个样式表中,优先级也和编写顺序有关,后面样式的会覆盖前面的
二、语法规范
1、css语法由两部分组成
(1)选择器:找到要添加样式的元素(eg:h1就是一个选择器)
(2)声明块:设置具体的样式
三、代码风格
1、展开风格——开发时推荐,便于维护和调试
h1 {
color: aqua;
font-size: 40px;
}
2、紧凑风格——项目上线时推荐,可减小文件体积
h1 { color: aqua;font-size: 40px; }
注:项目上线时,通过工具将展开风格的代码变成紧凑风格的代码,可以减小文件体积,节约网络流量,同时也能让用户打开网页时速度更快