css基础教程属性篇(2)
作者:Jorux 来源:Jorux.com 发布时间:2008-07-23 12:44:00
下面开始逐个介绍css属性
颜色(color)
css能够控制的颜色主要包括文本颜色,边框颜色等,对于背景颜色和边框颜色会在以后说明,在这主要解释文本颜色的表现.
在如上所示style.css的选择器h1中,文本颜色的属性是用color表示的,h1的颜色的属性值为#FF0000(一个#加上十六进制值),简写为#F00. 我们甚至可以用英文单词red表示属性值: color: red; 效果是一样的. 颜色的其他属性值还有RGB值,在css中不太常用,这里就不再叙述.
例:查看Jorux.com首页的css文件,可以看到以下代码:
a {
color: #545454;
text-decoration:none;
}
a:hover {
color: #919191;
}
在选择器a中,文本颜色的属性值为#545454, 即存在超级链接的文本颜色为#545454; 而a:hover为伪类选择器(表现依赖于浏览器的状态), 它的属性值为#919191, 即鼠标在超级链接上悬停时文本的颜色. 你可以用ColorZilla验证本站首页的标题文字颜色.
文本(text)
css控制的文本属性主要包括以下四个: text-indent, text-align, text-decoration, text-transform;
1. text-align:
属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式:
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
例:查看Jorux.com首页的css文件,可以看到以下代码:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
在选择器body中声明属性text-align为left,可以避免在其他需要文本左对齐的选择器中重复声明.
2. text-indent:
属性text-indent指段落首行的缩进, 既然是段落的属性,一般用于选择器p(段落)中,代码如下:
p {
text-indent: 26px;
}
本站的段落缩进为0, 所以在css文件中能找到text-indent: 0;,不声明即此属性,即默认为0.
3. text-decoration:
属性text-decoration为文本修饰, 其包括下划线, 上划线, 中划线和无四种修饰方式, 代码如下:
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
在这就不例举具体的下划线, 上划线, 中划线的例子, 相信大家很容易想像的到它的效果. 需要强调的是属性值none, 如果你查看本站css的话, 可以看到所有属性text-decoration的值均为none. 这是因为目前的浏览器对于选择器a(即超级链接), 默认text-decoration属性值为underline. 这就会使很多你不希望出现的下划线大量涌现, 而且由于无法约束下划线的粗细, 以及浏览器之间的差异, 甚至会出现各种粗细, 不同浏览器显示不同的下划线.
例:你可以看到本站文章内的超级链接的文本修饰是点划线, 这个效果不是属性text-decoration所能实现的, 其需要下边框属性的支持, 将会在边框属性时说明. 实现方法如下(请查看本站css代码):
1.在全局声明中将选择器a的text-decoration属性值设为none, 代码如下:
a {
color: #545454;
text-decoration:none;
}
2.为使文章正文部分的超级链接显示蓝色点划线的效果,代码如下(读者目前只需了解,目前暂不说明):
.post_body a{
color:#0061CA;
padding:0;
border-bottom:1px dotted #0061CA;
}
4. text-transform:
这个属性可能大家不太熟悉, 因为这个属性是只为英文服务的, 用于转换字母大小写之用. 其包括首字母大写, 大写, 小写和无变化四种属性值, 代码如下:
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
例:如果你再本站留过言, 而且用的是英文名的话, 你就会发现无论你输入的姓名是有没有将首字母大写, 显示评论者姓名时首字母均被转化为大写, 查看本站css代码如下:
.comment_author {
text-transform:capitalize;
}
猜你喜欢
- 数据库开发数据库应用,选择一个好的数据库是非常重要的。下面从一些方面比较了SQL Server与Oracle、DB2三种数据库,为你选择数据
- 提起Apple,大部分人都会提起Apple的设计,除了Apple里拥有一批天才设计师外,还因为乔布斯对于设计有着苛刻的要求。所以在IT界,A
- 因为我们现在的前端框架做性能优化,为了找到各个组件及框架的具体解析耗时,需要在框架中嵌入一个耗时测试工具,性能测试跟不同的计算机硬件配置有很
- <% dim week_ymd(8) '测出可以手动设定日期,比如this_ymd=#2008-04-1
- 佛爷去了公司的年夜饭,我有点无聊就在公司 Coding 点东西玩玩,于是就有了这玩意。请允许我很猥·琐得将这个游戏称之为“是男人坚持 100
- 对于注入而言,错误提示是极其重要。所谓错误提示是指和正确页面不同的结果反馈,高手是很重视这个一点的,这对于注入点的精准判断至关重要。本问讨论
- 如何取得刚添加的记录自动增加的ID字段的号码?我们用下面这个程序就行:rs(1)=oldrname &nb
- 1.新建四个层,放入相应图片,模特层的z-index值设为0。2.把第一个层移到模特身上,找出衣服刚好穿上时层的top和left值,记下来,
- 如何制作一个防止多次刷新计数的图片计数器?请问如何做一个专业的图片计数器? <%countlong
- 译者按:在iOS HIG已经强大经典了N年之后,Android终于推出了一套比较系统的HIG(大概是为了配合Android 4.0 Ice
- 好多网友问起来,·深度学习网址导航·深度学习整站系统 的后台管理能否增加批量删除功能,如何加:就是列出N篇文章或网址信息,每篇文章或网址前有
- <script language="vbscript" runat="s
- 代码如下:Set Catalog_object= Server.CreateObject("ADO
- 用CSS+DIV编写的实现在网页中显示圆角矩形的代码!希望对大家有用!谢谢支持!以下为CSS代码:<style> div.bg{
- 随着网络技术的不断发展,网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站,更是人们关注的热点:政府利用网站宣传自己的施政纲领
- 作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中
- 标量(scalar)数据类型标量(scalar)数据类型没有内部组件,他们大致可分为以下四类:. number. character. da
- 处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果
- 在产品开发中,由UED发起的项目越来越多,但是现在的问题是很难为其设定商业价值的目标。如果没有明确的商业价值目标,很多公司根本没办法花大成本
- 我见到有的网站好像可以把数据库的记录读到表格里去,是这样的吗?如何做到的?可能是这样的,因为我们确实能把数据库里的记录用表格来储存,看看下面