CSS简介
- CSS全称层叠样式表(Cascading Style Sheets)
- CSS也是一种标记语言,用于给HTML结构设置样式,例如文字大小、颜色元素宽高效果等等
- 核心思想:HTML搭建结构,CSS添加样式,实现结构与样式的分离
CSS行内样式
-
行内样式又称内联样式
-
直接在标签内通过style属性设置样式
-
格式为
style="样式key:样式value;" -
如果设置多个样式则在前一个设置的;后写下一个央视
<h1 style="color:red;"> 行内样式 红色字体</h1>
<h1 style="color:red; font-size:60px;"> 行内样式 红色字体 字体大小80像素 </h1>
行内样式只能控制当前标签的样式,对其他标签无效,书写繁琐、且样式不能复用,没有体现出结构与样式分离的思想,不推荐大量使用
CSS内部样式
-
编写在HTML页面内部,将所有的css代码提取出来,单独放在
<style>标签中 -
在页面中使用style标签设置内部样式
-
style标签中指定要设置的标签名字
<head>
<style>
/* 设置所有h1标签的颜色为红色,字体大小22px */
h1 {
color: red;
font-size: 22px;
}
</style>
</head>
<body>
<h1> 内部样式</h1>
</body>
<style>理论上可以放在HTML文档的任何地方，但是一般都放在<head>中，使用此种写法样式可以复用代码结构清晰,但是并没有实现结构与样式完全分离,多个HTML页面也无法复用样式
CSS外部样式
外部样式格式
- 在HTML外部创建.css文件
- 将样式编写在.css文件中
- 在HTML文档内使用link标签关联样式
/* css 文件*/
h1 {
color: red;
font-size: 22px;
}
<!-- html文件 -->
<head>
<!-- href 属性 关联对应路径下的CSS文件 -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1> 内部样式</h1>
</body>
<link>标签说明
<link>标签必须写在<head>中- href属性:引入的CSS路径
- rel属性:说明引入的CSS与当前文档之间的关系
外部样式优点
- 样式可以复用、结构清晰
- 可触发浏览器的缓存机制，多个文档共用一个CSS文件样式时，可从缓存读取，提高访问速度
- 实现结构与样式的完全分离
CSS样式表优先级
-
优先级为行内样式>内部样式=外部样式
-
内部样式和外部样式的优先级相同,且后面的会覆盖前面的，后来者居上
-
同一个样式表中，优先级和编写顺序有关,后面的也会覆盖前面的，后来者居上
-
如果优先级低的样式表中的样式, 优先级高的样式中没有，则对应的样式也会生效
比如一个h1的内部样式 有
font-size样式，但是行内样式中没有设置，则样式会生效
CSS语法规范
CSS语由两部分构成:
- 选择器:找到要添加样式的元素
- 声明块:设置具体的样式，声明块由一个或多个声明组成
CSS代码风格
展开风格
开发测试的时候推荐，便于维护和调试
h1 {
color:blue;
font-size:40px;
}
紧凑风格
项目上线时推荐.可减少文件体积,可以通过工具将展开风格代码编程紧凑风格，可以减少文件体积、节约网络流量,也可以让网页打开时速度更快
h1{color:blue;font-size:40px;}