CSS教程之css关于色彩和文本属性的把持

显示全部楼层 · 发表于 2015-1-16 00:10:46

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
原文：http://jorux.com/archives/property-1-if-you-love-CSS/
本教程次要先容css的基本常识,将逐一解说css的各个属性,历程大概对照单调,但会全力多举例申明.
css语法
例:用WebDeveloper的css检察功效检察Jorux.com首页的css文件,能够看到以下代码:
body{
font:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(images/bodybg.jpg)repeat-y;
}
是否是有点庞大,如今我们没有需要细究以上代码,先简化以上代码为:
body{text-align:left;}
这即是基础css语法布局:

登录/注册后可看大图

援用css:css文件的感化就在于把持Html文件的体现,而从Html文件中援用css文件的办法大抵有三种:外联(external),嵌进(in-line)和内联(internal),这里限于篇幅和使用频度,只先容外联办法.

例:一样翻开Jorux.com的主页,点击Firefox工具栏–>检察–>页面源代码,在<head></head>能够看到以下代码:

<linkrel="stylesheet"href="http://jorux.com/wp-content/themes/j_notebook/style.css"type="text/css"media="screen"/>

herf后的地点即为本网站css的地点,这里使用的地点为相对地点,而在当地调试时一样平常用绝对地点,将在后文申明.创建当地调试的文件布局:以下图所示创建名为local的文件夹,和其子文件夹style和image,分离用于寄存css文件和图片文件,在local文件夹的根目次下创立Html文件index.htm,在style文件夹的根目次下创立css文件style.css:

登录/注册后可看大图

用文本编纂器翻开index.htm,写进以下代码:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Myfirsthomepage</title>
<linkrel="stylesheet"href="style/style.css"_fcksavedurl=""style/style.css""media="screen"/></head>
<body>
<h1>Myfirsthomepage</h1>
</body>
</html>

然后翻开style.css,输出以下代码:

body{
background-color:#333;
}
h1{
color:#F00;
background-color:#FFF;
}

用Firefox翻开index.htm,假如你看到Example1的效果,那末祝贺你,一个基础的当地调试情况创建了.

上面入手下手逐一先容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:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(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_bodya{
color:#0061CA;
padding:0;
border-bottom:1pxdotted#0061CA;
}

4.text-transform:

这个属性大概人人不太熟习,由于这个属性是只为英文服务的,用于转换字母巨细写之用.其包含首字母年夜写,年夜写,小写和无变更四种属性值,代码以下:

text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;
text-transform:none;

例:假如你再本站留过言,并且用的是英文名的话,你就会发明不管你输出的姓名是有无将首字母年夜写,显现批评者姓名时首字母均被转化为年夜写,检察本站css代码以下:

.comment_author{
text-transform:capitalize;
}

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之css关于色彩和文本属性的把持

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子