R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

【CSS教程第一篇】随心所欲挪元素

注意:本文发布于 2082 天前,文章中的一些内容可能已经过时。

本篇教程需要对HTML有基本的了解。

如何把网页搞的美观一点,这是一门艺术。网站的样子定下来了,真正的实现方法却有好多。例如用bgcolor属性控制背景颜色,用width和height属性控制表格宽高……不过如果每一页都这么写的话:

<span style="font-size: 0.857142857rem; line-height: 1.714285714;">
    <img src="a.png" width="120" height="40" align="center" border="2">
</span>

坑爹呢?我可不喜欢复制粘贴。

既然每一页样式差不多都一样,为什么不能把样式分离出来呢?

于是就有了CSS这么个东西,它是专门控制网页样式的东西。这样我们在写HTML的时候,主要关注的不再是如何实现样式,而是网页结构是否合理。

跟CSS相配合的标签是div和span等标签。div是一个块(跟h1、p一样同为块级元素,一个元素占一行),span可以用来存储一小段文本(跟b、i一样同为行内元素,可以和文字一样一行显示多个)。

在开始学习CSS之前,先介绍两个元素属性:id和class。这俩都是字面意思,id就是元素的id,class就是元素的类。它俩都可以用来给元素打标记,不同的是,一个页面的id必须唯一(更像学号),而class可以不唯一(更像班号)。例如:

<div id="menu">
    <span class="item">主页</span>
    <span class="item">博客</span>
    <span class="item">关于我</span>
</div>

当然,在CSS出来之前,这段代码的效果真是丑的要死。

我们新建一个文件,文件后缀为.css(例如common.css),这就是我们接下来放CSS代码的地方。

然后我们在head标签中加上这么一句:

<link rel="stylesheet" href="common.css">

link标签可以被理解为用来引入一个CSS文件(当然也可以干别的),rel是引入的类型,href是文件的路径。这里用到了相对路径。

如果CSS特别少的话,也可以直接嵌入在HTML中,方法是在head标签中加一个style标签,style里面就可以放CSS了,另外一种方法是直接设置元素的style属性(这个在后面我会用到)。

要为这个div以及里面的三个span设置样式,首先得知道如何选中它们吧。在CSS中,有各种各样的选择器:

id选择器:【#id】,例如【#menu】
类选择器:【.class】,例如【.item】
标签选择器:【tag】,例如【div】
派生选择器:【father child sub_child ...】,例如【div span】

因此,对于刚才那个menu,下面几种写法等价,都用来选择所有的span:

div span
div .item
#menu span
#menu .item
span
.item

至于怎么搞最好,看情况。正常情况下一个网页会有很多个div和span,所以一般不会用标签选择器。

要给#menu设置宽度为100%,高度为48个像素,我们可以这么搞:

#id {
    width: 100%;
    height: 48px;
}

先写一个选择器,然后在接下来的大括号里写上需要设置的样式即可。注意样式之间要用分号隔开。

刚才提到了块级元素和行内元素,这个显示方法可以用display属性来修改,display有三个常用的值:

inline:行内,不可以设置宽高(就是简单地把里面的元素组合起来),一行可以放多个inline
block:块级,可以随意设置宽高,但是同一行只能放一个block
inline-block:行块结合,可以设置宽高,而且一行可以放多个inline-block

例如,可以对一个div设置CSS为【display:inline-block】,这个div从此可以在一行中出现多次。

CSS可以修改元素的背景,可以用图片也可以用颜色:

/* 这里的颜色可以是英文例如【blue】,也可以是十六进制颜色【#123456】*/
background-color: 颜色;
/* 路径可以用相对路径或者绝对路径 */
background-image: url(图片路径);
/* 控制背景图片是否平铺,以及在哪个方向上平铺 */
background-repeat: repeat-x / repeat-y / repeat / no-repeat;

还有好多属性,这里就不一一列举了。

CSS还支持边框和边距。在你的浏览器中按下F12(以chrome为例),点开“Elements”,把右边的框使劲往下拉,仔细找找应该可以找到一个形如这样的东西:

CSS框模型

一个框可以有margin(外边距)、border(边框)和padding(内边距),这三个东西都可以加上【top/bottom/left/right】这些后缀,例如【margin-left:20px】会只设置左边的外边框为20像素。而border比较特殊,它的语法为:【border: 宽度 边框类型 颜色】,其中边框类型可以是实线(solid)、短横线(dashed)、点(dotted)等,例如下面有一个很好的例子:

<div style="margin: 20px; border: 5px solid black; padding: 30px;">abc</div>

<div style="margin: 20px; border: 5px solid black; padding: 30px;">abc</div>

黑色的实线边框宽度为5px,黑框外面有20px的空白,黑框与文字之间有30px的空白。

CSS可以对一个块进行精确定位,定位方式有:

position
relative:相对定位,元素位置根据其本来应有的位置进行计算,即使元素被移动,在页面上的所占空间还是原来的空间,只是内容的位置变了(有点像错位)
absolute:绝对定位,元素位置的计算是相对于最近的已经被定位的父元素,元素在页面上没有占用空间
fixed:页面中固定,位置计算是相对于整个页面,元素在页面上没有占用空间

float
取值为left或者right。元素可以向左或向右移动,直到它的外边框外围碰到父元素的内边框内部,或者碰到另一个float的外边框外围。

而具体坐标的计算则可以用left、right、top、bottom来进行计算,例如【left:20px】会将元素从本来占位的地方往右挪动20个像素(因为设置的左边的距离,所以当然是往右挪动啦)。

大家可以生成几个div,多用用position和float,多改改元素的位置,看看具体会发生什么变化。

作业:生成一个网页,里面有4个div,大小均为100像素,附加条件如下:

1.行块结合,相对定位,往下挪动10像素,背景颜色为红色;

2.绝对定位,距离底部20像素,边框为1像素的黑色短横线框;

3.相对页面固定,left和top均设为50px,背景颜色设为绿色;

4.浮动至页面右侧,边框为2像素橙色实线框。

下一篇中我们会学到如何用DIV+CSS的方式对一个网页进行布局。

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 【HTML教程第二篇】我有特殊的属性
下一篇: 【CSS教程第二篇】合理的网页布局

这是我们共同度过的

第 1553 天