CSS快速入门
- CSS简介
(1)CSS 是 Cascading Style Sheets 的缩写,即:层叠样式表单
(2)CSS 是 HTML 语言的一种扩展,其主要作用为:
A.定义 Web 页面布局以及页面中元素的显示方式
B.利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离
(3)简单来说:CSS 相当于 HTML 的“装饰器”或“化装品”
- CSS语法
(1)语法结构
h1 { color:blue; font-size:35px; }
h1 选择器
{ color:blue; font-size:35px; } 声明
color,font-size 属性
blue 35px 属性值
(2)语法应用
<html>
<meta charset="UTF-8">
<title>CSS入门</title>
<style type="text/css">
h1 {
color: blue;
font-size: 35px;
}
</style>
<body>
<h1>CSS快速入门</h1>
</body>
</html>
(3)CSS注释
/* xxx */ 以 /* 开始,以 */ 结束,中间为注释内容
(4)CSS引入方式
- 内嵌式:又称行内式,在HTML标签上编写样式。
<p style="color:red"></p> style 样式标识
- 内部式:包含在HTML的<head></head>中,只对当前页面有效。
<style type="text/css">
p {
color: blue;
font-size: 30px;
}
</style>
- 外部式:链接引入外部样式表文件。
<link rel="stylesheet" type="text/css" href="style.css">
Link 引入外部样式标识
"style.css" 外部样式文件(与引用的HTML页面在同一目录下)
(5)CSS选择器
- 标签选择器
HTML标签名(元素)作为选择器名称,如:div 、h1 、p …
<html>
…
<style type="text/css">
div {
color: blue; /* 蓝色 */
font-size: 30px;
}
</style>
<body>
<div>CSS</div>
<div>快速入门</div>
<h5>CSS选择器</h5>
</body>
</html>
- 类选择器
类(class)用于描述一组标签的样式,class 可以用在多个标签中。
<html>
…
<style type="text/css">
.title {
color: red; /* 红色 */
font-size: 30px;
}
</style>
<body>
<div class=“title”>CSS</div>
<div class=“title” >快速入门</div>
<div>CSS选择器!</div>
</body>
</html>
- ID选择器
ID选择器用于为标有特定ID的HTML标签设置样式。
<html>
…
<style type="text/css">
#title {
color: green; /* 绿色 */
font-size: 30px;
}
</style>
<body>
<div id=“title”>CSS</div>
<div id=“subtitle” >快速入门</div>
<div>CSS选择器</div>
</body>
</html>
- 通配选择器
利用 * 为指定范围内的所有标签设置样式。
<html>
…
<style type="text/css">
* {
color: purple; /* 紫色 */
font-size: 30px;
}
</style>
<body>
<div id=“title”>CSS</div>
<div id=“subtitle” >快速入门</div>
<div>CSS选择器</div>
</body>
</html>
- 包含选择器
HTML中为父元素(标签)下的子元素设置样式。
<html>
…
<style type="text/css">
div p { /* div:父元素 p:子元素 */
color: gold; /* 金色 */
font-size: 30px;
}
</style>
<body>
<div>
<p>CSS</p>
</div>
<div>快速入门</div>
</body>
</html>
- 选择器分组
为一组元素设置相同样式,利用逗号分割多个选择器。
<html>
…
<style type="text/css">
#title , .logo { /* 利用逗号(,)分割 */
color: brown; /* 棕色 */
font-size: 30px;
}
</style>
<body>
<div id=“title”>CSS</div>
<div class=“logo”>CSS快速入门</div>
</body>
</html>