1、CSS概述
在CSS技术§生之前,页面上定义结构和显示效果的ã码耦合在一起,开发和维护都非常繁琐。
为了将显示效果设置从HTML代码中抽离出来,并提供更强大的表现力,W3C组织制定了CSS标准 - - Cascading Style Sheet 层叠样式表。
2、CSS编写位置
(1)内部
标签的style属性中
<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞,秋水共长天一色</p>
写到style标签中
<style type="text/css">
p {
color: blue;
background-color: yellow;
}
</style>
(2)外部
写在外部的css文件中,然后通过link标签引入外部的css文件
<link rel="stylesheet" type="text/css" href="style.css" />
尖叫提示:注意优先级
3、基本语法
选择器 {声明1;声明2}
选择器 {
样式名1:样式值1;
样式名2:样式值2;
}
4、选择器
(1)元素选择器
标签名
例子:
p{}
a{}
h1{}
(2)id选择器
#id
(3)类选择器
.class
(4)选择器分组
可以同时使用多个选择器
选择器1,选择器2,选择器N{}
注意优先级
5、声明
声明格式:样式名1:样式值1;
6、常用样式
字体颜色 color
宽度 width
高度 height
背景颜色 background-color
7、颜色
在CSS中我们使用RGB值来表示颜色。
RGB值可以写成一个三组两位十六进制数字,这个数字要求以#号开头
#红色绿色蓝色
000000 - ffffff
8、CSS 定义样式位置的案例
(1)css1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
(2)css2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
(3)css3.html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
style.css
p {
color: blue;
background-color: yellow;
}
9、CSS 选择器案例
(1)css1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
(2)css2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#p1 {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p id="p1">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
(3)css3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.selectp {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
(4)css4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#p1,.selectp {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p id="p1">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
10、CSS颜色案例
(1)css1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#p1,.selectp {
color: #000000;
background-color: #ff0000;
}
</style>
</head>
<body>
<p id="p1">落霞与孤鹜齐飞,秋水共长天一色</p>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
<p class="selectp">落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
尖叫提示:还有许多没有讲到,大家可以看W3School,讲到的这些都是最常用的