Web前端入门第 18 问：CSS 入门功法【内联样式基础语法】
HELLO，这里是大熊学习前端开发的入门笔记。
本系列笔记基于 windows 系统。
CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。---来源：百度百科
简单点说，CSS 就是给 HTML 上妆的，你的 HTML 好不好看，就看 CSS 这把刀使得好不好了。
开篇
欲练此功，必先...别急
大侠，先记住以下语法，此语法大刀可以雕琢出精致的 CSS 作品。
property: value;
/* 中文意思 */
属性：值;
每一条 CSS 语法都是属性和值一一对应，以英文属性开始，然后是一个英文冒号，冒号后接英文属性值，最后是英文分号。
其中的空格可不要，只要键盘遭得住，也可以要多次，反正浏览器不介意。
编码习惯还是建议在冒号后面加一个英文空格，这样看起来会比较美观，也符合一些编码规范。
如果有想要多个属性怎么写？
喏，就这样：
property1: value1; property2: value2; property3: value3;
/* 或者这样 */
property1: value1;
property2: value2;
property3: value3;
/* 中文意思 */
属性1：值1;
属性2：值2;
属性3：值3;
最后一个属性，可以不要最后的英文分号，直接写成 property3: value3，当然还是建议加上分号保持统一。
不分先后，也不分大小，从上往下依次来就行啦。
属性与属性之间，可以用换行符，也可以用空格分隔，也可以不要分隔符，直接写成一堆 property1:value1;property2:value2;property3:value3;。
当然为了易于维护，还是推荐用空格或者换行符分隔属性。
多个属性值合并
例如外边距可以设置上、右、下、左四个方向，如果要设置4个方向，需要写成这样：
margin-top: 3px;
margin-right: 4px;
margin-bottom: 5px;
margin-left: 6px;
是否有点繁琐？
所以 CSS 语法规定：此类属性可以合并为一个，写成这样：
margin: 3px 4px 5px 6px;
CSS 这种合并写法的方向顺序基本都是 上右下左。
玩法升级
一个属性一个值的写法玩腻了，CSS 后面又升级了玩法，一个属性可以和多个值一起玩，大概这样：
property: value1, value2, value3;
/* 中文意思 */
属性：值1, 值2, 值3;
实战
前文介绍过 HTML 的 style 属性，用于为元素指定内联 CSS 样式。
以上的 CSS 语法规则，需要放在 style 属性里面，放在外面...嘿嘿，是另一种玩法。
第一例：单个 CSS 属性应用
给 HTML 文字添加一个颜色。
上代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<p style="color: red;">此处是文字</p>
</body>
</html>
注意这段代码 <p style="color: red;">此处是文字</p> 其中的 color: red; 就是 CSS 语法，意思是给 p 标签添加一个 color 颜色属性，值为红色 red。
瞅瞅渲染结果：
第二例：多个 CSS 属性应用
给 HTML 文字添加颜色和字体大小。
上代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<p style="
color: red;
font-size: 20px;
">此处是文字（换行符分隔属性）</p>
<p style="color: red; font-size: 20px;">此处是文字（空格分隔属性）</p>
<p style="color:red;font-size:20px;">此处是文字（不分割属性）</p>
</body>
</html>
注意 CSS 属性分隔符，分别使用了换行符分隔属性、空格分隔属性、不分割属性，达到的效果是一致的。
瞅瞅渲染结果：
第三例：单个 CSS 属性多个值应用
给元素添加多个阴影，多个字体大小，一个外边距。
上代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<div style="
box-shadow: 0 0 0 5px #ff6868, 0 0 0 10px #ff0000;
font-size: 20px, 40px;
margin: 20px;
">此处是文字</div>
</body>
</html>
瞅瞅渲染结果：
原因也很简单，font-size 仅支持单属性值，设置多个值被浏览器判断为属性值无效了。
总结
以上几个例子，展示了 内联样式 的基础语法应用。
内联样式又称为“行内样式”、“行间样式”，通过标签的 style 属性设置元素的样式。
思考一个问题：如果 a 元素和 b 元素，都需要设置字体和颜色，并且都还是一样的属性值，那是不是直接复制代码？
浙公网安备 33010602011771号