为什么会出现CSS?
之前,我们已经学习了如何写一个HTML文件,用浏览器打开之后,你会很惊喜地发现,这竟然就是一个小小的网页了!
但很快,你也会感到一些遗憾:这些网页看起来如此的单调乏味,甚至还不如用word写出来的好。

▲历史上的第一个网页,现在还可以访问
这样的网页看上去就是一些文本的堆砌,实在难以让热衷于追求美感的人们感到满意。
在这种情况下,CSS就应运而生了。
不过,什么是CSS?

CSS(Cascading Style Sheets),层叠样式表。
看起来好像有点复杂……让我们换一种简单通俗的理解方式。


比如上面这两张图片,很明显,第二张的图片有了颜色,有了排版,尽管这也很简陋,但它前进了一步。
如果你查看这两张图片所在的HTML文件的源代码,就会发现他们的body部分一模一样,只是第二张图片多了一部分,那就是CSS。
其实呀,CSS就是告诉HTML里面的元素,你应该怎么排版,长成什么样子。
总的来说,CSS还是比较复杂的,特别是涉及到对具体元素的定位选择,很是让人脑阔疼。不过我们可以先对一个小目标发起冲击,比如,对一小段文字的美化。



一个小目标:美化一小段文本
在CSS中,对文本的样式设置有以下几个关键字。
基本都是英文原意,比较好记,做出来的效果也很明显。
color 声明颜色
background 声明背景颜色
font-size 设置字体大小
font-family 设置字体样式
text-align 设置字体对齐方式


▲一串普普通通的HTML代码
我们怎么样改变它的外观呢?
很简单,我们只需要在
里面插入style="......."就可以了。
英文引号之间的,就是我们的CSS样式了。

▲插入CSS后的HTML代码
这里,我们可以看到,在CSS中对文本五个参数的设置。
1、首先最容易设置的就是color和background,我们只需要写入简单的颜色英文名就可以了。
2、其次对于font-size,我们可以写成“数字+单位”的格式,简单常用的单位有"px"(像素)。当然,还有一些其它的相对单位。
3、而font-family就是设置文本的字体了,一般地,中文可以使用的有KaiTi(楷体)和SimSun(宋体),其中宋体是大部分浏览器对中文的默认字体。
4、最后,text-align一般有三种设置,left是常见的左对齐,center是居中对齐,而right就是右对齐啦。

TIPS
这次我们的CSS设置采取的是内联样式,
也就是直接在元素里面插入CSS代码。
不太明白的小伙伴也别担心,
其他的方法我们也会在以后介绍的哦。
文字|肖罗杰
图片|肖罗杰
编辑|肖罗杰
将每一件小事做到极致,是一种态度
自动化新闻宣传中心
努力的打造每一期作品,将精品呈现给您
更多精彩请关注:成电automan

CSS(层叠样式表)是为了弥补HTML在网页设计中的局限,提供页面样式和布局控制。通过CSS,我们可以设定颜色、背景、字体大小、字体样式和文本对齐等属性,使网页变得更加美观。本文以一个简单的例子介绍了如何使用CSS美化一小段文本,包括color、background、font-size、font-family和text-align等关键样式,并提供了内联样式设置的示例。

被折叠的 条评论
为什么被折叠?



