CSS基础学习十二:CSS样式

最后更新于:2022-04-01 11:29:34

CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式。我们就目前用到的 CSS样式简单地介绍一下。 下面只是总结性的一些东西,具体的可以参考:[CSS样式教程](http://www.phpstudy.net/e/css/css_background.html) (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) transparent:默认的,背景颜色透明 inherit:继承父元素的背景色 (2)背景图片 background-image 设置背景图片 值:url(图片目录) background-repeat 设置背景图片是否重复 值: repeat   横向和纵向都重复(默认的) repeat-x  横向重复 repeat-y  纵向重复 no-repeat 不重复 (3)background-position 设置背景图片的位置 值: 一些关键词  top,left,right,bottom,center 百分比:x% y% 像素值:xpx,ypx 注意:养成习惯,两个值,一个表示水平方向,一个表示垂直方向。 (4)字体颜色 color 设置字体颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) inherit:继承父元素的背景颜色 (5)文字缩进 text-indent 设置文字的缩进,注意,多行内容只有第一行缩进 可能的值:像素 xpx 像素 x% 基于父元素宽度的百分比 inhertit 继承父元素的文字缩进属性 (6)文本对齐方式 text-align 设置文本的对齐方式,注意基于块级元素 可能的值: left   把文本排列在左边,左对齐 right 把文本排列在右边,右对齐 center 文本居中 和center的区别: 对于文本的效果是一样的 对于非文本,center依然可以把内容居中 (7)字体大小 font-size 设置文本的字体大小 可能的值: xpx 文本大小为xpx xem 文本大小为xem (8)px和em解释 px :像素,计算机上的一个点 em:相对大小,1em,1倍当前字体大小的尺寸,2em,2倍当前字体大小的尺寸。如字体大小是16px,那么1.75em就等于28像素。 设置字体大小的时候,xem是相对于父元素的字体大小的x倍来设置。 (9)字体 font-family 设置使用什么类型的字体 可能的值: 字体名称   如Times,Georgia,serif等 规则: 可以定义多种字体,逗号隔开,先使用前面的字体,当前面的字体没有,使用下一种,以此类推。 (10)字体风格 font-style 设置文本正常或斜体 可能的值: normal  文本正常显示 italic 文本倾斜显示 oblique 文本倾斜显示设置 (11)字体加粗 font-weight 设置文本加粗 可能的值: normal 正常字符,默认 bold   粗体字符 bolder  更粗的字符 lighter 更细的字符 100-900 整百值,400相当于normal,700相当于bold20 (12)字母间距 letter-spacing 设置字母之间的间距,默认为0 可能的值: xpx 字母之间的间距是xpx xem 字母之间的间距是xem (13)字间距 word-spacing 设置字(单词)之间的间距 可能的值: xpx 字之间的间距是xpx xem 字之间的间距是xem (14)字符转换 text-transform 设置字母大小写 可能的值: none 不做任何处理 uppercase  全部大写显示 lowercase  全部小写显示 capitalize 单词首字母大写 (15)文本装饰 text-decoration 设置文本装饰效果 可能的值: none 不作任何处理 underline 文本添加下划线 overline  文本添加上划线 line-through 文字中间添加一个贯穿线 bink 文本闪烁,不推荐使用 (16)字母间距和字间距在中文的区别 在中文中的应用 在中文中没有子母和单词的概念 在外国人看来,每个汉字相当于letter 所以,对于中文,我们一般使用letter-spacing 每个汉字在英文中相当于一个字母,因此使用letter-spacing效果起作用,word-spacing对汉字不起作用 (17)列表的标志的类型 list-style-type 设置列表项标志的类型 常用的值: none 无标志 disc  实心圆标志 circle  空心圆标志 square  实心方块标志 decimal 数字标志,从1开始的自然数 lower-roman 小写罗马数字 upper-roman  大写罗马数字 lower-alpha 小写字母 upper-alpha  大写字母 (18)表格边框 boeder属性设置表格边框 border-collapse 属性设置表格边框折叠为单一边框: width 和 height 属性定义表格的宽度和高度。 text-align 和 vertical-align 属性设置表格中文本的对齐方式。 text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中: vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐: padding 属性控制表格中内容与边框的距离 border-spacing设置分隔单元格边框的距离。 caption-side设置表格标题的位置。 empty-cells设置是否显示表格中的空单元格。 table-layout设置显示单元、行和列的算法。 (19)轮廓 outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 outline在一个声明中设置所有的轮廓属性 outline-color设置轮廓的颜色 outline-style设置轮廓的样式 outline-width设置轮廓的宽度      接下来我们就具体演示一下这些CSS样式的效果: ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS样式样式</title></head> <style type="text/css"> .test1{ background-color:#FF0000; } .test2{ height:400px; border:1px solid #FF0000; background-image:url('http://zx.kaitao.cn/UserFiles/Image/beijingtupian6.jpg'); background-repeat:no-repeat; background-position:center; } .test3{ color:#0000FF; } .test4{ text-indent:30px; }.test5{ text-align:center; } img{ display:block; } .test6{ font-size:40px; }.test7{ font-family:"华文行楷", "华文仿宋", "黑体"; font-size:24px; } .test8{ font-style:oblique; font-size:36px; } .test9{ font-weight:bold; font-size:36px; } .test10{ letter-spacing:30px; font-size:36px; } .test11{ word-spacing:30px; font-size:36px; } .test12{ letter-spacing:20px; word-spacing:30px; font-size:36px; } .test13{ text-transform:uppercase; font-size:36px; } .test14{ text-decoration:underline; font-size:36px; } .test15{ list-style-type:square; } .test16{ list-style-position:inside; } .test17{ list-style-image:url("01.png"); } table{ width:200px; border-collapse:collapse; } table,tr,th,td{ border:1px solid #0000FF; text-align:center; vertical-align:middle; } th{ background-color:#00FF00; height:50px; } td{ background-color:#999999; } .test18{ border:1px solid #00FF00; outline-color:#FF0000; outline-style:dotted; outline-width:3px; } </style> </head> <body> <p align="center">背景色演示</p> <div class="test1">攻城课堂</div> <hr/> <p align="center">背景图片演示</p> <div class="test2"></div> <hr/> <p align="center">字体颜色演示</p> <div class="test3">攻城课堂</div> <hr/> <p align="center">文字缩进演示</p> <div class="test4">攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行) 攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)攻城课堂(只作用于文本第一行)</div> <div>攻城课堂</div> <hr/> <p align="center">文字对齐方式演示</p> <div class="test5">攻城课堂</div> <div>攻城课堂(浏览器默认的效果)</div> <span class="test5">攻城课堂(span标签是行内元素,因此不会生效)</span> <div class="test5"><span>攻城课堂(嵌套在块级元素内的可以生效)</span></div> <hr/> <p align="center">与center标签作比较</p> <div class="test5">攻城课堂</div> <center>攻城课堂(使用center标签的效果)</center> <div class="test5"><img src="http://zx.kaitao.cn/UserFiles/Image/beijingtupian6.jpg" /></div> <center><img src="http://zx.kaitao.cn/UserFiles/Image/beijingtupian6.jpg" />(使用center标签居中的效果)</center> <hr/> <p align="center">字体大小演示</p> <div>攻城课堂(浏览器默认的字体大小)</div> <div class="test6">攻城课堂(字体大小为40px)</div> <hr/> <p align="center">字体演示</p> <div>攻城课堂(浏览器的默认效果)</div> <div class="test7">攻城课堂(华文行楷)</div> <hr/> <p align="center">字体风格演示</p> <div>攻城课堂(浏览器的默认效果)</div> <div class="test8">攻城课堂</div> <hr/> <p align="center">字体加粗演示</p> <div>攻城课堂(浏览器的默认效果)</div> <div class="test9">攻城课堂</div> <hr/> <p align="center">字母间距演示</p> <div style="font-size:36px">important(浏览器的默认效果)</div> <div class="test10">important</div> <hr/> <p align="center">字间距演示</p> <div style="font-size:36px">This is very impotant(浏览器的默认效果)</div> <div class="test11">This is very impotant</div> <hr/> <p align="center">字母间距和字间距在中文中的应用演示</p> <div style="font-size:36px">欢迎来到攻城课堂(浏览器的默认效果)</div> <div class="test12">欢迎来到攻城课堂(每个汉字在英文中相当于一个字母,因此使用letter-spacing效果起作用,word-spacing对汉字不起作用)</div> <hr/> <p align="center">字符转换演示</p> <div style="font-size:36px">This is very impotant(浏览器的默认效果)</div> <div class="test13">This is very impotant(全部大写)</div> <hr/> <p align="center">文本装饰演示</p> <div style="font-size:36px">攻城课堂(浏览器的默认效果)</div> <div class="test14">攻城课堂</div> <hr/> <p align="center">列表项标志的类型演示</p> <ol> <li>足球</li> <li>篮球</li> <li>排球</li> </ol> <ul> <li>权利的游戏第一季</li> <li>权利的游戏第二季</li> <li>权利的游戏第三季</li> </ul> <ol class="test15"> <li>足球</li> <li>篮球</li> <li>排球</li> </ol> <ul class="test15"> <li>权利的游戏第一季</li> <li>权利的游戏第二季</li> <li>权利的游戏第三季</li> </ul> <hr/> <p align="center">列表项标志的位置演示</p> <ul> <li>权利的游戏第一季</li> <li>权利的游戏第二季</li> <li>权利的游戏第三季</li> </ul> <ul class="test16"> <li>权利的游戏第一季</li> <li>权利的游戏第二季</li> <li>权利的游戏第三季</li> </ul> <hr/> <p align="center">图片型列表项标志演示</p> <ul> <li>权利的游戏第一季</li> <li>权利的游戏第二季</li> <li>权利的游戏第三季</li> </ul> <ul class="test17"> <li>权利的游戏第一季</li> <li>权利的游戏第二季</li> <li>权利的游戏第三季</li> </ul> <hr/> <p align="center">表格演示</p> <table align="center"> <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <td>张国庆</td> <td>男</td> </tr> <tr> <td>李思思</td> <td>女</td> </tr> </table> <hr/> <p align="center">轮廓演示</p> <p align="center">落霞与孤鹜齐飞,秋水共长天一色</p> <p align="center" class="test18">落霞与孤鹜齐飞,秋水共长天一色</p> <hr/> </body> </html> </span> ~~~ 火狐浏览器运行的结果为: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_5721559797ffb.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_57215597b1120.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_57215597c227a.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_57215597e1217.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_5721559802566.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_57215598175b9.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_5721559831209.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-28_572155984333d.jpg)
';