web标准建站:CSS入门教程(2)

　　#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 style="family-name:楷体">。

　　font-style：设定字体样式，可以取的值有normal 普通字、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(左方补白宽度)。

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

　　看看上图理解点了吧！下面我们开始讲讲边框。

　　六、边框border性质设定。

　　边框也能应用到大多数的HTML标签中，可以来使网页更加美观，边框的具体属性有 border-top：综合设定上边框性质 、border-right：综合设定右边框性质 、border-bottom ：综合设定下边框性质、 border-left：综合设定左边框性质。

　　border-style　综合设定边框样式 ，可能值：solid(实线), dotted(虚线), dashed( 短直线), double(双直线), groove (3d凹线), ridge (3d凸线), inset (3d嵌入) 和 outset (3d隆起)。

　　border-width　综合设定边框宽度,可以设置的有 border-top-width(设定上边框宽度 ), border-right-width(设定右边框宽度), border-bottom-width(设定下边框宽度) 和 border-left-width(设定左边框宽度).

　　border-color　综合设定边框颜色。

　　把下面代码加到你的网页中可以看到效果了：

　　这片文章就介绍到这里了，因为是一个初学者的入门教程，所以内容显得少的可怜。 以后会给大家介绍一些比较高级的内容，希望大家支持我啊！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有