享受每一天,Just Enjoy !

0%

CSS基础2--简单应用

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

应用CSS

CSS编写在扩展名为.css的单独文件中,并利用HTML 的元素引用

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>微信搜索:伊洛的小屋</h1>
<p>凡是过去,皆为序章</p>
</body>
</html>

标记CSS文件

1
2
3
4
5
6
7
8
9
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}

p {
color: darkviolet;
}

打开浏览器查看效果

元素的href指向css文件的地址
内部样式表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
<style>
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}

p {
color: darkviolet;
}
</style>
</head>
<body>
<h1>微信搜索:伊洛的小屋</h1>
<p>凡是过去,皆为序章</p>
</body>
</html>

不使用外部CSS文件,而是将CSS放在HTML文件放在<style>标签中

内联样式

内联样式表存在于HTML元素的style属性之中

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
</head>
<body>
<h1 style="color: blue;background: cornflowerblue; border: 1px solid black">微信搜索:伊洛的小屋</h1>
<p style="color:red;">凡是过去,皆为序章</p>
</body>
</html>
选择器

每个CSS规则都以一个选择器或一组选择器为开始,选择器具有专一性且稍后的样式将覆盖以前的样式

属性和值

CSS由两部分组成:1.属性 2.值
与值配对的属性称为CSS声明,CSS声明放在CSS声明块中,属性和值都是区分大小写的,每对中的属性和值由冒号(:)分隔

规则

@rules

注释

CSS中的注释以/*开头,以*/结尾

1
2
3
4
5
6
7
8
9
10
11
12
/* 公众号:伊洛的小屋
个人主页:https://yiluotalk.com/
博客园:https://www.cnblogs.com/yiluotalk/ */
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}

p {
color: darkviolet;
}

关注公众号获取更多内容