本系列教程取名为 “入门精要”，首先是为入门读者准备的，如果你想在本文中找到关于CSS的高级知识，请绕行. 其次，”精要” 二字表明本文只讲述关于CSS的入门要点，力求精简，不求广博。
边看教程边实验大概需要3 ~ 5小时，剩下的就需要读者大量的实践与经验积累了。
这里假设你已掌握 HTML，并有所实践。若假设不成立，请先学习并实践 HTML…
本教程分为四个部分:
CSS是英文Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS与HTML、JavaScript共同构成了网页开发的三大基础, 又称前端三大技术。
个人观点：
HTML主要用于描述网页里的元素是什么（内容), CSS主要用于描述网页里的元素是什么样子 (外观), 而JavaScript则用于增强网页的交互能力和逻辑控制能力. 它们之间应尽可能地各行其道, 避免过多耦合.
因此，应只使用HTML来说明网页中的元素是什么，而尽量避免使用HTML来描述元素的外观。
极端点说，诸如：<font>、<b>、<u>、<i>这样的标签就是HTML标签中的”怪胎”，应避免使用。
<b>和<i>目前也经常被用于 HTML 文档中, 但其所表达的意思通常已不再是原意”加粗”和”斜体”, 而是 bedge 和 icon
曾经听到两位同学的这样一段对话：
A：<p>标签是干什么用的？
B：就是让文字另起一行……
本人认为，B同学完全忽视的<p>标签真正的作用是”定义一个段落”，换句话说是说明”这是一个段落”。而”让文字另起一行”这只是<p>标签作为块标记的一个”副作用”而已，我们完全可以使用CSS令其不另起一行。况且，”让文字另一起行”这是在控制元素显示效果（外观），这不应该是HTML标签的主要作用，而应该由CSS来承担。
上述言论完全是个人观点，若有异议，欢迎讨论，若打击到了某人，敬请海涵 :)
OK，进入正题（ 请一边阅读，一边**实验 **）……
1. CSS 基本使用方法与语法
看个例子：
<p style="color:red;font-size:18px">段落中文字是红色，大小为18像素</p>
上述代码告诉浏览器，<p></p>中的文字显示为红色，大小为18像素。（快试一下吧！）
我们看到，要为一个标签说明样式，只需在标签中插入”style”属性即可。
语法格式：样式属性1:值1;样式属性2:值2;……
属性与值之间使用冒号分隔，多个样式说明之间使用分号分隔。
好了，现在的问题是，到底有些什么样式属性可以使用呢？关于这个问题，本文不作阐述，读者可以查阅别的资料。或者，最简单的办法，使用IDE (如:Dreamweaver, VSCode) 的代码提示功能，如下图所示：
相信你在实验上面的例子时已经发现了怎么把这个提示框调出来了吧……
从头至尾浏览一下提示框中显示的所有样式属性，中学英语水平应该可以足以看懂了，不行就查下字典嘛！ （花5~10分钟时间浏览完了再继续往下读…）
浏览的目的在于了解有些什么样式属性可用。就像你知道了有些什么材料，当你要盖房子时你就能灵活使用了。
当然能逐个试一下就更好了 :)
本人非常反对一开始就找一本厚厚的参考书，看完了才来实践！大胆猜测、大胆实验才是王道。
也别成天抬着嘴到处问，动不动就问别人”推荐一本书”，哎，又上火了，打击到你的话，我只能说 sorry了:）
应该注意，输入提示框里出现的那些样式属性不是所有属性在所有浏览器里都有效，所以要避免使用那些”非主流”的样式。
下面是本人小结的”主流”样式属性，分了类以方便记忆:
星号(*)表示此处有 0 个或多个字符
| # | 类别 | 说明 |
|---|---|---|
| 1 | background* | 元素背景相关 |
| 2 | font*, text* | 文字外观相关 |
| 3 | border* | 元素边框相关 |
| 4 | margin* | 元素外边距 |
| 5 | padding* | 元素内边距 |
| 6 | list* | 设置<li>标签的外观 |
| 7 | 其它 | color、 line-height position、left/right/top/bottom、width/height、z-index display、visibility float、clear、overflow、cursor |
下面我们直接举例，请对照实践，并注意观察和总结。
1.1 background*
以background开头的这一组样式属性主要说明元素的背景。例：
| 代码 | 说明 |
|---|---|
| background-color : red; | 背景为红色，支持多种颜色表示法, 如RGB表示法:#FF0000或#F00 |
| background-image : url(“bg.jpg”); | 设置背景图片为bg.jpg（相对路径表示） 设置了背景图，背景色就看不到了，除非背景图片失效 |
| background-repeat : repeat-x; | 背景图只在X方向（水平方向）上重复，还有其它值 ( repeat-y, no-repeat )，请自行实验 |
| background-attachment : fixed; | 背景图固定，不随滚动条滚动 |
| background-position : 5px 10px; | 设置背景图相对于元素左上角向右偏移5px, 向下偏移10px。可取负值。 注意善用此属性，可有意外惊喜! |
可以把上面的代码简写为： background : red url('bg.jpg') repeat-x fixed 5px 10px;
1.2 font*、text*、color、line-height
这一组属性均是说明文字的呈现形式，因此就一起举例说明了：
| 代码 | 说明 |
|---|---|
| font-size : 12px; | 设置文字大小为12像素 (请查阅其它资料了解其它单位) |
| font-family : 宋体; | 设置文字字体为”宋体”。应避免使用非主流字体，原因此处暂略，请自行思考 |
| font-weight : bold; | 文字加粗 |
| text-align : center; | 文字水平居中 |
| text-decoration : underline; | 文字加下划线 |
| text-indent : 24px; | 首行缩进24像素 |
| color : red; | 文字为红色，支持多种颜色表示法, 如RGB表示法:#FF0000或#F00 |
| line-height : 24px; | 每行文字的行高为24像素 |
请实验下面2段代码（省略号部分请自行填充不少于200字的一段文字）：
<p>...</p>
<p style="font-size:12px; line-height:22px">……</p>
第二段是否比第一段要美观，呵呵，自行小结一下吧！
再实验下面这段代码：
<div style=”border:1px solid blue; width:200px; height:100px; text-align: center; line-height:100px;“>文字</div>
文字是否在div里垂直方向上居中了? 注意红色部分代码，又可以小结一下了！
1.3 border*
以 border 开头的这一组修饰元素的边框。边框分上、右、下、左四个方向，每个方向的边框可分别修饰”型”、”色”、”宽”。
看例子 (对于边框宽度须同时说明”型”、”色”、”宽”才有效)
| 代码 | 说明 |
|---|---|
| border-left-color: red; border-left-style: solid; border-left-width:2px; |
设置元素左边框为2px宽的红色, 实线边框 |
| border-left : 2px solid red; | 设置元素左边框为2像素宽的红色实线边 (上例的简写形式) |
| border : 1px dotted red; | 设置元素四周边框为1px宽的红色虚线边 |
| border : 1px solid red; border-width : 2px 5px 10px 15px; |
四周边框均为红色实线边，上、右、下、左边框宽度分别为2px、5px、10px、15px 小结： (1) 第2行的代码覆盖了第1行中关于宽度的说明 (2) 四个方向的边框可属性可一起简写说明，中间以空格分隔，顺序为从”上”开始顺时针方向一周 |
| border : 1px solid red; border-width : 5px 10px; |
四周边框均为红色实线边，上下边为5px宽，左右边为10px. |
| border : 1px solid red; border-width : 5px 10px 15px; |
等同于 border-width : 5px 10px 15px 10px; |
1.4 margin*、padding*
margin指的是元素边框之外的空白，而padding则指元素边框之内与内容之间的空白。
是不是看得一头雾水? 没关系，暂时放一下，我们继续往下看，等读完”CSS入门精要（二）”就明白了。
1.5 list*
以list开头的这一组属性修饰<li>的外观，其中，list-style-type和list-style-image由字面即可猜到其用途，不行么试一下就知道了。
下面只讨论 list-style-position，直接看图：
左图为 list-style-position:outside 的情形，右图为 list-style-position:inside 的情形。
可以看到，未设置margin、padding 时：
a) outside（默认值）：li元素内容紧靠相邻元素，项目符（那黑点）深入到了相邻元素内部
b) inside: li 元素项目符紧靠相邻元素，内容相应后缩。
1.6 其它样式属性
这一组相对零散，下面配合例子说明：
| 代码 | 说明 |
|---|---|
| width:50px; height:100px; |
定义元素宽50px，高100px |
| color: red; | 设置元素中文字为红色，支持RGB表示的颜色，如:#FF00AB |
| line-height:24px; | 设置元素中文字行高24px |
| cursor: pointer; | 鼠标处于元素上方时显示为手指形状，类似处于超链接上方的效果 |
| display: none; | 隐藏元素。 注意下面2行代码的作用： display: block; 设置元素以块标签方式显示 display: inline; 元素以行内标签方式显示 还记得本文开头那两位同学的对话吗? 实验一下： <p style="display:inline">段落文字1</p><p style="display:inline">段落文字2</p>现在P标记不再是换行的作用了吧…… |
| visibility: hidden; | 隐藏元素。 与display: none的区别在于： 使用visibility: hidden隐藏元素后元素原来占据的空间仍然保留，相邻元素并不侵占若原有空间。 而display: none将元素隐藏后，原来占据的空间不再保留（试试就知道了） |
| position: absolute; | 设置元素的定位方式为绝对定位。 关于position属性的几个取值及作用相对复杂，本文作为精简入门不再赘述，请参阅其它资料。 |
| left:50px; | 设置元素左外边距边界与其父容器左边界之间的偏移为50px left、top、right、bottom 4个属性的效果与position属性的取值有很大关系 |
| z-index:999; | 设置元素的叠放层次，z-index值越大，就越靠上层。 |
| float:left; | 元素向左浮动, 参阅 CSS入门精要（二） |
| clear:both; | 清除浮动效果, 参阅 CSS入门精要（二） |
| overflow:scroll; | 若元素中的内容超出了元素本身的大小，则显示滚动条。 关于此属性的几个取值有一些让人很迷惑的效果和用途，读者可先实验，再上网搜索别的文档看看。 |
好了，至此我们已经初步了解了CSS的基本语法，以及常用样式属性的用途。
还是那句话，由于是精要入门教程，所以未对所有样式属性进行说明，即使文中提到的样式也未对其每一个取值用途进行详述，读者可自行实验、总结或查阅别的资料以学习本文未尽之处……
前文中提到的的 float、clear、border、margin、padding 几个属性还有更多的内容需要讨论.
如果你已经基本理解了前文所述内容，那就继续看 CSS 入门精要(二) ( CSS 选择符 )吧！
Revised on 2020/05/27 03:58:59 by Bailey
-
Next PostCSS入门精要 (二)
-
Previous PostJava入门精要 (五)