CSS是指层叠样式表 (Cascading Style Sheets)
- 优点:
- 使HTML专注于网页的内容,css专注于网页的表现
- 提供了丰富的格式化功能
- 可以针对各种可视化浏览器 (主要有显示器、打印机、PDA等)来设置不同的样式
- CSS与浏览器
并不是所有的CSS的样式都被浏览器支持
不同的浏览器对CSS的实现有细微的不同,需要特别注意
1.css的引入方式
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color:red">新年,我要红</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.big{
font-size: 48px;
}
</style>
</head>
<body>
<p class="big">新年,我要红</p>
</body>
</html>
- 效果:
-
外链样式
- 将CSS写入单独的一个文件中,注意该文件的文件扩展名为.css
- 在HTML文档中使用< link >标记弓|入css文件
-link
标记需要指定属性:rel (relationship)
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p id="myp">新年,我要红</p>
</body>
</html>
style.css文件
#myp{
font-size: 48px;
color:red;
}
-
效果:
-
三种样式的优劣
-
行内样式使用范围当前的元素
-
内嵌样式使用范围为当前的html文件
-
外链样式,使用范围为引用他的html文件(复用性最高)
-
使用导入样式
-
使用@import指令可以将css文件中的css样式导入到不- 同的地方
-
导入式的结果和直接书写是同样的效果
-
导入式可以共享样式代码
-
可以在内嵌式里使用导入,也可在css文件中使用
-
导入样式的使用方法
@import ur( “sheet1.css” );
@import “sheet1.css” ;
2.css的优先级
- 有important 修饰符最高
- css越靠近元素优先级越高(选择器一致)
- style行内样式优先级高;同样的css,后面的会覆盖前面
<html>
<head>
<meta charset="utf-8">
<title>css优先级</title>
<link rel="stylesheet" href="./style02.css">
<style>
.red{color:red !important;}
.red{
font-size: 48px;
color:gold;
color:blue;
}
</style>
</head>
<body>
<p class="red">北国风光,千里冰封,万里雪飘</p>
</body>
</html>
style02.css文件
.red{
color:green;
}
- 自己写的css样式是否与电脑计算后的样式一致
- 自己写的样式是否被覆盖掉
4.css选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.gold li{background-color: gold;}
/* ul li { background-color: gold;} */
/* 选择的li标签是ul的后代 */
/* ul li span{color: #FF0000;} */
/* .gold li span{ color: #FF0000;} */
/* 尽量在包含选择器中 父辈用类名,或者id */
/* 一般选择层不超过3层 */
.gold span{ color: #FF0000;}
</style>
</head>
<body>
<ul class="gold">
<li>ul中的li1</li>
<li>ul <span>中的</span>li2</li>
<li>ul<span>中的</span>li3</li>
</ul>
<ol>
<li>ol中的li3</li>
<li>ol <span>中的</span>li2</li>
<li>ol中的li1</li>
</ol>
<span>out span</span>
</body>
</html>
- 效果:
- 选择器1 选择器2{}
选择器2必须是选择器1的后代 - 选择器1 尽量用class 或者id(缩小选择范围)
- 选择器通常不超过三层(规则可以打破)
-
id选择器#
-
类型 标记选择器
-
通配符选择器 *
-
class选择器 .
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style>
/* *通配符选择器,代表的是页面中的任意元素 */
* {color:red}
/* 通过标签名作为选择器,选择到一个类型元素 */
p {color:green}
/* .+类名 代码的类选择 */
.odd{ background-color: orange;}
/* #+id名称 id选择器 */
#myli{ background-color: black;}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素</p>
<ul>
<li id="myli">包含选择器</li>
<li class="odd">id选择器</li>
<li>class 类选择器</li>
<li class="odd">类型 标记选择器</li>
<li>通配符选择器</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>选择器优先级</title>
<style>
.parent #youp{ color: #0000FF;} /* 包含选择器 权限相加 100 + 10*/
.parent #youp{color:black;}
/* .parent .myp{color:orangered} */
#youp{ color:deeppink;} /* 100 */
.myp{color:gold;} /* 10 */
p{color:green} /* 1 */
*{color:red;} /* .5 */
</style>
</head>
<body>
<div class="parent">
<p class="myp" id="youp">你好我是一个p标签</p>
</div>
</body>
</html>
- 效果: