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的标准化设计到底有什么好处？

只看该作者 · 发表于 2015-1-17 10:33:28

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-1-20 18:13:33

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-1-29 13:56:15

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-2-14 21:52:24

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-4 10:44:23

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-11 18:25:52

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-3-19 07:44:15

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-27 16:08:19

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-27 16:08:22

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

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

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

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

相关帖子