CSS工作中基本原理及CSS标准取名详细介绍

2021-03-09 20:23 jianzhan

本文为学习培训笔记,一部分內容摘自李晓峰先生的《CSS设计方案指南》1书

CSS标准

1条CSS标准具体上便是1条CSS命令,这条命令先挑选HTML元素,随后设置挑选元素的款式

下面是1条简易的CSS标准,它把段落情况色设定为翠绿色

Example_1

p{background-color: green}

CSS标准取名

1条CSS标准由挑选符+申明两一部分构成

挑选符:指出要挑选的元素

申明:由特性和值构成,特性指出危害元素哪层面款式,值实际上便是特性的1种情况

在上面的事例中能够看出1条标准从左到右先后是:挑选符、左花括号、特性、冒号、值、右花括号

对Example_1的拓展

①:好几个申明写在1条标准中

p{color: green;font-size: 45px;font-weight: bold}

HTML编码以下:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Template</title>
<meta charset="utf⑻">
<link href="style.css" _fcksavedurl="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>CSS工作中基本原理</p>
</body>
</html>

运作实际效果:

PS:每一个申明之间,用分号隔开

②:应用逗号将好几个挑选符组成在1起

h1,h3,p{color: green;font-size: 45px;font-weight: bold}

HTML编码:

拷贝编码
编码以下:

<body>
<h1>好几个挑选符组成在1起</h1>
<h3>题目3</h3>
<p>CSS工作中基本原理</p>
</body>

运作实际效果

③:好几条标准运用给同1个挑选符

h1,h3,p{color: green;font-size: 45px;font-weight: bold}

如今大家想让p段落的情况色为蓝色,能够再次加上1条标准

p{background-color: blue}

运作实际效果

挑选符有那些类型呢?

1:左右文挑选符 根据先祖或同胞元素挑选1个元素

2:ID和Class挑选符 根据ID和Class特性的值挑选元素

3:特性挑选符 根据特性的有没有特点挑选元素