享受每一天,Just Enjoy !

0%

CSS基础1--基础及语法

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

CSS 基础

CSS 是Cascading Style Sheet的缩写,翻译为:‘层叠样式表’ 或 ‘级联样式表’。 CSS 定义如何显示HTML的标签样式,用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离,极大的提高了工作的效率

CSS语法

CSS是一门基于规则的语言

1
2
3
4
h1 {
color: yellow;
font-size: 3em;
}

语法由选择器起头,选择HTML元素,这里对h1标题添加央视大括号中定义属性和值,叫做声明。
冒号之前的是属性,后面的是值。一个CSS样式中可以包含多个规则

CSS模块

CSS是很多模块构成的

CSS规范

所有的标准Web技术都被定义在一个巨大的文档中,称作 规范specifications (或者简称为 “specs”),CSS也不例外

简单的应用一下

先来做一个简单的HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>

<body>

<h1>TITLE DEMO</h1>

<p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>

<p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>

<ul>
<li>个股</li>
<li>基金</li>
<li>宽指 <em>基金</em></li>
</ul>

</body>

</html>

打开网页

现在用CSS美化一下网页

添加CSS

让HTML文档能够遵守我们给它的CSS规则,在文档的开头链接CSS,在head里面添加链接到CSS文件
在CSS文件中编写内容,让上面的标题显示紫色

1
2
3
h1 {
color: purple;
}

打开浏览器查看效果

样式化 HTML 元素

样式化一个文档中所有的段落,使用选择器p,用逗号可以将不同选择器隔开

1
2
3
4
5
6
7
h1 {
color: purple;
}

p, li {
color: cornflowerblue;
}

打开浏览器

改变元素的默认行为

忽略浏览器默认的样式

1
2
3
4
5
6
7
8
9
10
11
h1 {
color: purple;
}

p, li{
color: cornflowerblue;
}

li{
list-style-type: none;
}

打开浏览器

可见列表前面的默认样式已经没有了

使用类名

加入类名的特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
公号:伊洛的小屋
个人主页:https://yiluotalk.com/
博客园:https://www.cnblogs.com/yiluotalk/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>CSS</title>
</head>

<body>

<h1>TITLE DEMO</h1>

<p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>

<p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>

<ul>
<li>个股</li>
<li class="special">基金</li>
<li>宽指 <em>基金</em></li>
</ul>

</body>

</html>

打开浏览器

基金的颜色单独发生了变化

根据状态确定样式

取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的
没有被访问的链接颜色变为粉色、访问过的链接变为绿色及鼠标悬停的时候的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
color: purple;
}

p, li{
color: cornflowerblue;
}

li.special {
color: orange;
font-weight: bold;
}

a:link {
color: pink;
}

a:visited {
color: green;
}

a:hover {
text-decoration: none;
}

关注公众号获取更多内容