您的位置：首页 > Web前端 > CSS

CSS知识总结

2008-03-15 11:01 127 查看

CSS基础

一、样式表定义
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法结构： Selector { property: value }
参数说明：
Selector – 选择器
property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开

选择器可分为HTML选择器、类选择器、ID选择器。
（1） HTML选择器：使用HTML本来就固有的标签来标识。如P(段落)、SPAN（块）。
语法： HTML选择器{ property:value; }
[align=left]<head>[/align]
[align=left] <title>CSS</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] P{ font-family:System;color:red;font-size:25px;}[/align]
[align=left] </style>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<p>我是中国人</p>[/align]
</body>
[align=left]
（2）类选择器(Class)：语法： . 类名{样式规则…}
<head>[/align]
[align=left] <title>CSS</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] .test{ font-family:System;color:red;font-size:25px;}[/align]
[align=left] </style>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<p class="test">我是中国人</p>[/align]
[align=left]</body>[/align]
</html>

（3）ID选择器:使用HTML元素的ID属性（不常用）。语法： #ID名{样式规则…}
[align=left]<head>[/align]
[align=left] <title>CSS</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] #IDP{ font-family:System;color:red;font-size:25px;}[/align]
[align=left] </style>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<p ID="#IDP">我是中国人</p>[/align]
[align=left]</body>[/align]
</html>

二、样式表的结构
<style>和</style>标签之间的所有内容都是样式规则。样式表一般位于<head>与</head>之间。
[align=left]<head>[/align]
[align=left] <title>CSS</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] P{ [/align]
[align=left] font-family:System;[/align]
[align=left] color:red;[/align]
[align=left] font-size:25px;[/align]
[align=left] }[/align]
[align=left] </style>[/align]
</head>

[align=left]三、样式表的分类：按其使用功能为分：行内样式表、内嵌样式表、外部样式表。
（1）行内样式表：使用style属性来定义。如果希望某段文字和其它段落的文字显示风格不一样。可选用行内样式。
<head>[/align]
[align=left] <title>CSS</title>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<p style="color:Red; font-style:italic;">我是中国人</p>[/align]
[align=left]<p style="color:Blue">我是美国人</p>[/align]
[align=left]</body>[/align]
</html>
[align=left]
（2）内嵌样式表：内嵌样式只对某张网页起作用。它是写在<head></head>里面的。
<head>[/align]
[align=left] <title>CSS</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] .p1{color:Red; font-size:30px;}[/align]
[align=left] .p2{color:Blue}[/align]
[align=left] </style>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<p class="p1">我是中国人</p>[/align]
[align=left]<p class="p2">我是美国人</p>[/align]
[align=left]</body>[/align]
</html>
（3）外部样式表：如果希望多个页面甚至于整个网站所有页面都采用统一风格，可选用外部样式表。
根据样式文件与网页的关联方式，又分为两种：链接外部样式表和导入样式表。
[align=left]A 链接外部样式表：
<head>[/align]
[align=left] <link rel="Stylesheet" type="text/css" href="mycss.css"/>[/align]
</head>

B 导入样式表
[align=left]<head>[/align]
[align=left] <style type="text/css">[/align]
[align=left] @import mycss.css[/align]
[align=left] </style>[/align]
</head>

注意：
如果有多个样式规则用于现一个页面时，样式规则起作用的优先级别是：行内样式表（写在标签内的）>内嵌样式表（写在文档头部的）>外部样式表（在外部文件中）。

四、常用样式属性CSS的属性非常大，庞大的几本书都写不完，这里仅列出常用的且实用的CSS属性。

1 字体属性Font：（1）font-style：设置字体样式
（2）font-size：设置字体大小
（3）font-family：设置字体类型如:宋体
（4）font-weight : normal | bold | bolder | lighter | number
设置字体粗细
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder :特粗体
lighter :细体
2 文本属性Text:
（1）text-align :设置文本对齐方式。
（2）text-decoration : none || underline || blink || overline || line-through
设置文本装饰
none : 　无装饰
blink : 　闪烁
underline : 　下划线品
line-through : 　贯穿线
overline : 　上划线

3 背景属性Background：（1）background-color：设置背景颜色。
（2）background-image：设置背景图像。background-image: url(图像地址)
（3）background-repeat：设置一个指定的背景图像如何被重复显示。

4 定位属性position（1）position : static | absolute | relative
设置对象的定位方式
static : 默认值。无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中流出，即将其转化为一个“层”，并使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
（2）z-index : auto | number
设置对象的层叠顺序。
auto : 　遵从其父对象的定位
number : 　无单位的整数值。可为负数

5 方框属性Box:
常用的方框属性有：边界属性Margin、边框属性Border、填充属性Padding。
（1）边界属性Margin：
(1-1)margin-top 设置对象的上边距
(1-2)margin-right 设置对象的右边距
(1-3)margin-bottom 设置对象的下边距
(1-4)margin-left 设置对象的左边距
（2）边框属性Border：
(2-1)border-style 设置对象的样式
(2-2)border-width 设置对象的宽度
(3-3)border-color 设置对象的颜色
（3）填充属性Padding：
(1-1)padding-top 设置对象与上边框之间的距离
(1-2) padding -right 设置对象右边框之间的距离
(1-3) padding -bottom设置对象下边框之间的距离
(1-4) padding -left设置对象左边框之间的距离

6 表格属性Table:
（1）border-collapse : separate | collapse
separate : 　边框独立（标准HTML）
collapse : 　相邻边被合并
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

7 特殊样式

[align=center]超链接样式[/align]	[align=center]说明[/align]
A:link{color:red}	未被访问的链接样式
A:visited{color:green}	已被访问的链接样式
A:hover{color:yellow}	Mouse悬停在链接上时的样式
A:active{color:blue}	Mouse正在按下时链接文字的样式

例1：将按钮显示为图片背景图片垂直平铺
[align=left]<head>[/align]
[align=left] <title>CSS1</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] .in{ border-style:solid;}[/align]
[align=left] .picbtn{[/align]
[align=left] background-image:url(images/bt.jpg); [/align]
[align=left] margin:0px; [/align]
[align=left] border:0px; [/align]
[align=left] padding:0px; [/align]
[align=left] height:23px; [/align]
[align=left] width:82px; [/align]
[align=left] font-size:14px;[/align]
[align=left] }[/align]
[align=left] </style>[/align]
[align=left]</head>[/align]
[align=left]<body style="background-image:url(images/back.jpg); background-repeat:repeat-y;"> <table>[/align]
[align=left] <tr><td style="height: 26px">会员名:</td><td> <input type="text" name="user" class="in"/></td></tr>[/align]
[align=left] <tr><td style="height: 26px">密码:</td><td ><input type="text" name="pwd" class="in"/></td></tr>[/align]
[align=left] <tr>[/align]
[align=left] <td colspan="2">[/align]
[align=left] <input type="reset" value="重填" class="picbtn" /> [/align]
[align=left] <input type="submit" value="提交" class="picbtn"/>[/align]
[align=left] </td>[/align]
[align=left] </tr>[/align]
[align=left] </table>[/align]
</body>

例2：实现如下图单边框表格

[align=left]<head>[/align]
[align=left] <title>CSS1</title>[/align]
[align=left] <style type="text/css">[/align]
[align=left] .tr1{font-size:16px; color:#2A1FFF; font-weight:bold;}[/align]
[align=left] .tdRed{font-size:20px; color:Red;}[/align]
[align=left] td{color:#2A1FFF; font-size:14px; padding:5px;}[/align]
[align=left] a{color:#333333;text-decoration:none;}[/align]
[align=left] a:hover{color:#FF5500;text-decoration:underline;}[/align]
[align=left] [/align]
[align=left] table[/align]
[align=left] { [/align]
[align=left] border-collapse:collapse;[/align]
[align=left] background-color:#ffccff;[/align]
[align=left] } [/align]
[align=left] td[/align]
[align=left] { [/align]
[align=left] font-family: "宋体"; [/align]
[align=left] font-size:9pt;[/align]
[align=left] border:1px #145aa0 solid;[/align]
[align=left] }[/align]
[align=left] th{[/align]
[align=left] font-family: "宋体"; [/align]
[align=left] font-size:9pt;[/align]
[align=left] border:1px #145aa0 solid;[/align]
[align=left] }[/align]
[align=left] </style>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left] <table>[/align]
[align=left] <tr>[/align]
[align=left] <th>首饰套装</th>[/align]
[align=left] <th>首饰套装</th>[/align]
[align=left] <th>首饰套装</th>[/align]
[align=left] <th>首饰套装</th>[/align]
[align=left] </tr>[/align]
[align=left] <tr class="tr1">[/align]
[align=left] <td colspan="4">珠宝首饰</td>[/align]
[align=left] </tr>[/align]
[align=left] <tr>[/align]
[align=left] <td>首饰套装</td>[/align]
[align=left] <td>首饰套装</td>[/align]
[align=left] <td>首饰套装</td>[/align]
[align=left] <td>首饰套装</td>[/align]
[align=left] </tr>[/align]
[align=left] <tr>[/align]
[align=left] <td><a href="#">流行饰品</a></td>[/align]
[align=left] <td><a href="#">流行饰品</a></td>[/align]
[align=left] <td><a href="#">流行饰品</a></td> [/align]
[align=left] <td><a href="#">流行饰品</a></td> [/align]
[align=left] </tr>[/align]
[align=left] <tr >[/align]
[align=left] <td class="tdRed">仿真饰品</td>[/align]
[align=left] <td>仿真饰品</td>[/align]
[align=left] <td>仿真饰品</td> [/align]
[align=left] <td>仿真饰品</td> [/align]
[align=left] </tr>[/align]
[align=left] </table>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航