有人用一句话总结了HTML,CSS,JS的关系。HTML是名词,JS是动词,CSS是形容词和副词。
什么是CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
HTML中CSS的使用
类型
- 内联引入(不常用)
缺点:与HTML混在一起,一个内联样式只能对一个标签起作用,复用性差
<body>
<div style="font-size:20px;color:#f00;">Hello World!</div>
</body>
- 内嵌引入
缺点:可复用性差,维护性一般
<head>
<style>
div{font-size:20px;color:#f00;}
</style>
</head>
- 外部引入(推荐)
好处:将CSS与HTML独立出来;使CSS可复用
<head>
<link rel="stylesheet" href="css/03.css" />
</head>
03.css↓
div{
font-size:40px;
color:#00f;
}
优先级
- 内联引入的优先级最高,内嵌引入和外部引入的优先级尊崇“后来者居上”原则。
@import与link的区别
- link是HTML标签,@import只能在CSS中使用
- link会在网页加载时同时加载,而@import需要网页完全载入才能加载
- link无兼容问题,@import 是CSS2.1以后加入的,兼容性一般
- link可以使用JS脚本控制,而@import不可以
元素选择器
类型
- .class
<head>
<style>
.yellow-text{
font-size:40px;
color:#ff0;
!import;
}
</style>
</head>
<body>
<div class="yellow-text">Hello World!</div>
</body>
- #id
<head>
<style>
#blue{
background-color:#00f;
}
</style>
</head>
<body>
<div id="blue">Hello World!</div>
</body>
- *
<head>
<style>
*{border:2px solid #0f3;}
</style>
</head>
优先级
- !important > id > class > 标签 > *
注意
- p标签和a标签不可以自己嵌套自己
关系选择器
类型
- 空格
<head>
<style>
div p{background-color:#ff0;}
</style>
</head>
<body>
<div>
<p>text</p>
</div>
</body>
- >
<head>
<style>
div>a{background-color:#0ff;}
</style>
</head>
<body>
<div>
<a>text</a>
</div>
</body>