CSS文本
CSS背景
CSS颜色
CSS前景色
CSS入门例子
使用CSS的好处
什么是CSS?
The six level drop-down menu with overlap and overrun - cent
CSS语法 -- 最基本的
作者：佚名 教程来源：本站原创 点击数： 更新时间：2007-12-25
使用 link 标签引用CSS
示例
<head><linkrel="stylesheet"type="text/css"href="http://www.xx521.com/style.css"/></head>
使用 @import 引用CSS
示例
<head><styletype="text/css">@import url(http://www.xx521.com/style.css);</style></head>相对路径与绝对路径
加载文件的时候可以使用相对路径或者绝对路径.
绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径.
http://www.dreamdu.com/html/default.html就是绝对路径,/html/default.html也是绝对路径,
C:winntsystem.sys也是绝对路径
相对路径:相对于我们查看文档的路径.
../default.html或者default.html或者../../default.html都是相对路径.
双表发:
一些老式的浏览器不支持@import方法.网上流传着一种叫双表法的技术,
就是利用了一些老式的浏览器不支持@import这个特性.
内部引用CSS
示例
<styletype="text/css"><![CDATA[ /* ----------文字样式开始---------- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px { color:white; font-size:12px; } /* 梦之都黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } /* ----------文字样式结束---------- */ ]]></style>内联引用CSS示例
<pstyle="font-size: 10px; color: #FFFFFF;">使用CSS内联引用表现段落.</p>
CSS 选择符
CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.
怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS样式.
选择符语法
选择符名字{声明;}
一个CSS选择符就定义了一个样式
比如下面这三个例子
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}
dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.
选择符取名规则
CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.
- 英文字母大写与小写 A-Z a-z
- 数字 0-9
- 连字号 -
- 下划线 _
- 冒号 "
- 句号 .
猴子提示: CSS选择符只能以字母开头.
常用的三种选择符
(我感觉这是初级教程中最难的地方:)
- xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如
p{font-size:12px;} - id选择符,唯一性选择符,比如
#dreamdured{color:red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). - class选择符,多重选择符,比如
.dreamdublue{color:blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法).示例
<p>梦之都xhtml标签选择符</p><pid="dreamdured">梦之都id选择符</p><pclass="dreamdublue">梦之都class选择符</p><pclass="dreamdublue dreamdu18px">梦之都class选择符2,出现了多次.</p>一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.
选择符用法总结
| CSS中的写法 | XHTML中的写法 | |
|---|---|---|
| xhtml标签选择符 | p{font-size:12px;} | <p>www.xx521.com</p> |
| id选择符 | #id_selector{font-size:12px;} | <p id="id_selector">星星雨</p> |
| class选择符 | .class_selector{font-size:12px;} | <p class="class_selector">星星雨</p> |
CSS 声明
CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.
语法:
属性:属性值;
示例
font-size:12px;
font-size代表字体大小.12px字体大小的值.
下面介绍两个常用的技巧
1,选择符的名字一样,声明是可以组合的
例如:
选择符名字{声明1;}选择符名字{声明2;}选择符名字{声明3;}
可以组合为:
选择符名字{声明1;声明2;声明3;}
示例
div{color:black;}div{font-size:12px;}
与下面的是等价的
div{color:black;font-size:12px;}
2,声明全部一样,选择符的名字也可以组合
选择符名字1{声明1;声明2;}选择符名字2{声明1;声明2;}选择符名字3{声明1;声明2;}
可以组合为:
选择符名字1,选择符名字2,选择符名字3{声明1;声明2;}
示例
.dreamdudivwhite12px{color:white;font-size:12px;}h1{color:white;font-size:12px;}div{color:white;font-size:12px;}
与下面的是等价的
.dreamdudivwhite12px,h1,div{color:white;font-size:12px;}
CSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍.
示例
h1{color:red;}p{color:black;font-size:12px;}div{color:lightblue;font-size:16px;}h1, p, div{border:1px solid black;}
通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.
CSS 注释
就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.
CSS注释的开始使用/*,结束使用*/
语法
/* 注释内容 */
示例
/* ----------文字样式开始---------- *//* 梦之都白色12象素文字 */.dreamduwhite12px{color:white;font-size:12px;}/* 梦之都黑色16象素文字 */.dreamdublack16px{color:black;font-size:16px;}/* ----------文字样式结束---------- */
精彩视频
最新教程
最新热门