一、CSS
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" />
优先级:行内样式>内部样式>外部样式
自定义样式位置:
<!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、基本语法
选择器 {声明1;声明2}
选择器 {
样式名1:样式值1;
样式名2:样式值2;
}
** 注释:**
CSS:/* * /
HTML:<! – -->
4、选择器
(1)元素选择器(标签选择器 )
标签名
例子: p{} 、 a{} 、 h1{}
(2) id选择器 #id
(3)类选择器 .class
(4)选择器分组
可以同时使用多个选择器(复合选择器)
选择器1,选择器2,选择器N{}
优先级:ip选择器>class选择器>标签选择器
<!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>
结果:
5、声明
声明格式:样式名1:样式值1;
6、常用样式
字体颜色 color
宽度 width
高度 height
背景颜色 background-color
7、颜色
在CSS中我们使用RGB值来表示颜色。
RGB值可以写成一个三组两位十六进制数字,这个数字要求以#号开头
#红色绿色蓝色
000000 - ffffff
<!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>
结果: