设计师学习HTML/CSS之路-06
2018-08-19 本文已影响0人
HU_Wei
不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!
第6章 开始学习CSS，为网页添加样式
6-1 认识CSS样式
CSS全称：Cascading Style Sheets叠层样式表
主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：
p{
font-size:12px;
color:red;
font-weight:bold;
}
6-2 CSS样式的优势
以下举例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
span{
color:blue
}
</style>
</head>
<body>
<p>CSS全称：<span>Cascading Style Sheets</span>叠层样式表
主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。</p>
</body>
</html>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
注：掘金markdown只能识别内联式style。
6-3 CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成：
选择符又称选择器，指明网页中要应用样式规则的元素。
声明在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size:12px;
color:red;
}
6-4 CSS注释代码
如同<html>的<!--声明内容-->一样
> CSS的注释语法为：<br>
> /*这是注释内容*/ <br>
> p{<br>
> color:green;<br>
> font-size:24px;<br>
}
tips：注释内容可以放在任意地方。
