CSS作用和发展
CSS(Cascading Style Sheet),称之为层叠样式表
- 一种专门描述结构文档的变现方式文档,主要用于网页风格设计,包括字体大小,颜色,以及元素的精确定位等。
- 在传统的网页设计里,使用CSS能让单调的HTML网页更富表现力
作用:
- 修饰HTML页面
- 添加样式,布局,定位
- 比直接利用HTML完成样式更好
- 功能更强大,可读性好,占用体积小
CSS目前也发展到3.0版本,使用HTML5和CSS3可以很强大
CSS引入方式
- 内联样式:
- 直接在元素上加style属性,赋予属性值,通常用于精确控制一个HTML元素的表现
- eg:
<p style="font-size: 20px;color: red;">这是一个段落</p>
- 值里面,可以有多个键值对:"key:value;key:value..."
- 作用范围:当前元素
- 内部样式:
- 在head中加入style元素,里面写各种样式
- 选择器:
选择器{ key:value; key:value; ...... }
- eg:
<head> <!--内部样式--> <style type="text/css"> p{ background-color: yellow;<!--背景色 --> } h2{ color: blue; } </style> </head> <body> <h2>这是一个标题</h2> <p>这也是一个段落</p> </body>
- 作用范围:可以针对当前页面的多个元素修饰
- 链接外部样式文件:
- 在head中使用link标签,引入外部样式文件
- eg:
<link href="style.css" type="text/css" rel="stylesheet"/>
- css样式文件:直接写上述选择器就可以,如style.css文件如下
P{ text-decoration: underline; } h2{ font-size: 24px; }
- 把样式和页面内容彻底放开
- 作用范围:可以修饰多个页面
- 导入外部样式文件(和链接外部样式类似):
- eg:
<!--两种方式如下--> <style> /*@import "style.css";*/ @import url(style.css); </style>
- 把样式和页面内容彻底放开
- 作用范围:可以修饰多个页面
- eg:
- 三四两种方式对比
- 链接外部样式:把CSS资源加载后,在展示页面内容,显示即有样式的
- 导入外部样式:把HTML资源加载后,就显示内容,CSS资源加载后再把样式加上
- (如果网络较快,没什么差别,如果网络较慢,导入外部样式会先显示HTML,然后慢慢显示样式)
- 总体对比
- 整体通用样式,放到样式文件中
- 仅针对当前页面效果,可以使用内联样式
- 快速有效的改变局部元素,可以使用内联样式
- 优先级:内联样式优先级最高,
- 另外三个,按照前后顺序,相同的属性,后面的覆盖前面的
- 不同的属性都生效
示例代码
style.css
P{
text-decoration: underline;
}
h2{
font-size: 24px;
}
CssAddMethod.html
<!--CSS的四种引入方式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS四种引入方式</title>
<!--链接外部样式文件-->
<link href="style.css" type="text/css" rel="stylesheet"/>
<!--导入外部样式文件-->
<style>
/*@import "style.css";*/
@import url(style.css);
</style>
<!--内部样式-->
<style type="text/css">
p{
background-color: yellow;<!--背景色 -->
}
h2{
color: blue;
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<!--内联样式-->
<p style="font-size: 20px;color: red;">这是一个段落</p>
<p>这也是一个段落</p> <!--内联样式只作用于一个标签,所以该标签保持默认效果-->
</body>
</html>