web标准建站:CSS入门教程

2022-07-15 80酷酷网 80kuku.com

　　css|web|web标准|教程|入门教程

　　原创教程，转载请注明出处：

　　CSS是“Cascading Style Sheets”的简称，中文翻译为“串接样式表”，也有人翻译为“样式表”。CSS用以作为网页的排版和风格设计，在web标准建站中，对CSS的熟悉和使用是相当重要的一个内容。CSS的作用是弥补HTML的不足，让网页的设计更为灵活。

　　这个文章只是为您介绍CSS的基础应用，指引您的一个入门的基础教程，主要目的是为推进web标准贡献自己的微薄之力。

　　说点我自己的体会，现在有好多人都在推广WEB标准，其实对初学者来说，不需要刚学的时候就学标准，学点简单的还是容易入门的，因为现在HTML还在照样用啊，所以我希望初学者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个人的实际来行动吧。下面开始学习了

　　一、如何在HTML中应用CSS。

　　您可以利用下列 3 种方式将 CSS 指定的格式加入到HTML中：

　　1. 在 HTML 文件里加一个超级连结，连接到外部的 CSS 文档。(外部连结 CSS)

　　这个方法最方便管理整个网站的网页风格，它让网页的文字内容与版面设计分开。您只要在一个 CSS 文档内（扩展名为 .CSS）定义好网页的风格，然后在网页中加一个超级连接连接到该文档，那么你的网页会按在CSS文档内定义好的风格显示出来了。

　　具体的使用防范是：

　　<HTML>

　　<HEAD>

　　<TITLE>网页文件的标题</TITLE>

　　</HEAD>

　　注意：style.css文件的位置。

　　2. 在 HTML 文件内的 <HEAD>.......</HEAD> 标签之间，加一段 CSS 的描述内容。(内定义CSS)

　　这个方法适用于指定某个网页，除了表现外部的 CSS 文档定义好的网页风格外，同时还要表现本身 HTML 文档内指定的 CSS 。

　　如果内在添加的 CSS 描述与外部连接的 CSS 描述相冲突的话，网页的表现将以内在添加的 CSS 描述为主，也就是外部的描述就不再起作用了。

　　具体使用方法是：

　　<HTML>

　　<HEAD>

<!--

　　BODY {font: 12pt}

　　H1 {font: 16pt}

　　P {font-weight: bold;

　　color: green}

　　-->

　　</STYLE>

　　</HEAD>

　　<BODY>

　　网页内容…

　　</BODY>

　　</HTML>

值得注意的是，为了防止不支持 CSS 的浏览器误将标签间的 CSS 风格描述当成普通字串，而表现于网页上，您最好将 CSS 的叙述文字插入在之间。

　　3. 在 HTML 文件的文本内容中，随时有需要，随时加一小段 CSS 的描述指定风格。( 文本间CSS)

　　这个方法适用于指定网页内的某一小段文字的呈现风格。

　　外部CSS与内定义CSS如果和此定义有相同的项，那么以此定义的 CSS 风格表现，外部 CSS文档与内定义CSS和此定义的没相同的项时那么还会正常显示，同时还会显示文本内容间的 CSS 风格。

　　具体使用方法是：

　　<HTML>

　　<HEAD>

　　</HEAD>

　　<BODY>

　　本页内容…

　　</P>

　　</BODY>

　　</HTML>

　　上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会覆盖外部连结的 CSS ，文本间的 CSS 会覆盖内在定义的 CSS 。

　　二、挑选者、属性和值。

　　先举个例子：H3{ COLOR : BLUE }表示在文本中只要使用H3标签的文字的颜色都是绿色。其中H3为挑选者，COLOR为属性，BLUE为COLOR属性的值。挑选者是套用样式的元件，通常为外部CSS或内定义CSS定义的风格的一个名字，在这个初级教程里理解为一个标签的名字也可以。属性是用语描述挑选者的特性，相当于HTML语法中的标签的属性。值就是属性的具体内容。

　　在CSS中当我们使用到属性值的时候，通常值是有一个度量依据的，也就是说值是有单位的。比如我们通常说你从家到学校走1，1什么呢？米，公里，还是走1小时。通常在CSS中的单位有：相对单位与绝对单位两种单位具体如下：

　　“em” (比如 font-size: 2em) ：相对于字母高度的比例因子。

　　“%” (比如 font-size: 80%)：相对于长度单位（通常是目前字型的大小）的百分比例。

　　'px' (比如 font-size: 12px) ：像素（系统预设单位）。

　　'pt' (比如 font-size: 12pt)：像点。

　　此外还有 'pc' (印刷活字单位), 'cm' (公分), 'mm' (公厘) 和 'in' (英寸)等单位。

　　当值为0时，我们就不需要设置单位了，比如你不想要边框那么我们直接设置border=0 。

　　在这我多说一句，就是强调单位的使用时，当我自己制作的网页想在分辨率改变时，字体大小也随着改变那么我们就使用单位%和em，如果你想时你的网页不管怎么调分辨率都是固定大小的那么我们使用px、pt等元素了。呵呵！

　　三、颜色的设置和使用。

　　CSS提供了16,777,216种颜色可以供我们来使用，通常表现颜色的方式有三种：颜色名字、RGB(red/green/blue) 数值和十六进制数形式，具体表现如下：

　　红色可以表示为：red、RGB(255,0,0)、rgb(100%,0%,0%)、#ff0000 和 #f00　五种方式。

　　#RRGGBB：以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。

　　#RGB：简略表示法，只用三个0到F的十六进位值分别表示红、绿、蓝三原色数值。而事实上，浏览器会自动扩展为六个十六进位的值，如『#ABC』将变为『#AABBCC』。但是，显见这样的表示法并不精确。

　　rgb(R,G,B)：以0到255十进位值的红、绿、蓝三原色数值来表示颜色。

　　rgb(R%,G%,B%)：以红、绿、蓝彼此相对的数值比例来表示颜色，如rgb (60%,100%,75%)。

　　Color_Name：直接以颜色名称来表示颜色，共有141种标准的颜色名称。

　　通常我们在设置颜色的时候通常是设置文字的颜色还有一个就是背景色。如按下图进行设置：

　　我们可以保存一下文荡然后浏览你就可以看到效果了。

　　四、关于文本的设置。

　　我们可以使用多种属性来改变网页文本的大小和形状,以使网页文本内容看起来更加美观。

　　font-family：设定文字字型可以取family-name值，范例：SPAN { family-name : " 楷体" }或范例：<SPAN 普通字、italic 斜体字；范例： SPAN { font-style : italic }。

　　font-weight：设定字型份量；可以取的值有normal 普通字、bold 粗体字、bolder 相对于父元素稍粗、lighter 相对于父元素稍细、100,200,300,400,500,600,700,800,900 数字由小到大代表笔画由细到粗，例如：normal=400　bold=700 ；范例：SPAN { font- weight : bolder }。

　　font-size：设定文字大小。

　　text-decoration：设定文字修饰，可能值有 none 普通字、underline 文字加底线、overline 文字加顶线、line-through 文字加删除线、blink 设定文字闪烁；范例： SPAN { text-decoration : blink }

　　text-transform：设定文字转换；可能值有none 普通字、capitalize 将英文单字地一个字母转换为大写、uppercase 将所有文字转换为大写、lowercase 将所有文字转换为小写；范例：SPAN { text-transform : uppercase }。

　　五、边缘和区块的设置。

　　MARGIN：边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。PADDING：补白，也就是内容元素与框架之间的这段距离与空间，也可以利用 CSS指令去控制大小。

　　把代码改为如图：

　　他们的属性有：margin-top(上边缘宽度), margin-right(右边缘宽度), margin- bottom(下边缘宽度), margin-left(左边缘宽度), padding-top(上方补白宽度), padding- right(右方补白宽度), padding-bottom(下方补白宽度) 和 padding-left(左方补白宽度)。

　　下面通过一个图来给大家说明：