分享
 
 
 

CSS全解收藏

王朝学院·作者佚名  2009-02-17
窄屏简体版  字體: |||超大  

CSS全称Cascading Style Sheet。层叠式样式表。

一、CSS的四种实现方式:

1.内嵌式:

2.外链式:

3.导入式

4.属性式:

二.CSS的定义:

选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}

如:

td{font-size:12px;color:#FFFF00}

.myname{font-size:12px;color:#FFFF00}

a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}

三.四种选择对象

1.HTML selector (TagName)

2.class selector (.NAME)

3.ID selector (#IDname)

4.特殊对象 (a:hovera:linka:visiteda:active)

1.HTML selector

HTML selector就是HTML的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。

例:

td

{

color: #FF0000;

}

-->

注意:代码的作用是使表格单元格内文字自动变红色。

2.class selector

定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。

例:

.fontRed

{

color: #FF0000;

}

-->

注意:在第二个中没有“class="fontRed"”,所以文字没有变红色。

3.ID selector

定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。

例:

#fontRed

{

color: #FF0000;

}

-->

注意:在第二个中没有“ID="fontRed"”,所以文字没有变红色。

4.特殊对象

特殊对象包括四种,是针对链接对象设置的:

a:hover 鼠标移上时的超链接

a:link 常规,非访问超链接

a:visited 访问过的超链接

a:active 鼠标点击时的超链接

特殊对象的作用范围是所有置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。

例:

a:hover

{

color: #0000FF;

text-decoration: underline;

}

-->

注意下面,很有用!!!

a.classname:hover

a#IDname:hover

这两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。

四.应用:

1.置标符自动应用

2.特制类class="NAME"

3.ID ID="IDname"

4.特殊对象自动应用

五.CSS属性

CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了。

CSS 标签属性/属性参考

这里列出了目前支持的样式表(CSS)标签属性。

CSS 标签属性/属性

行为属性 behavior

字体和文本属性 direction

direction [di?rek??n] 指南

font

font-family

font-size

font-style

font-variant [?v??ri?nt] 变形

font-weight [weit]重量

ime-mode [m?ud]方式

layout-grid [?leiaut] 布局排版[ɡrid]格子

layout-grid-char [t?ɑ:](把..)烧焦

layout-grid-line

layout-grid-mode

layout-grid-type

letter-spacing [?let?]字母[?speisi?]间距

line-break[breik]打破

line-height [hait]高度

min-height

ruby-align[?ru:bi]红宝石

ruby-overhang[??uv??hæ?]伸出

ruby-position [p??zi??n]定位

text-align

text-autospace [speis]自动间距

text-decoration [?dek??rei??n]装饰

text-indent [in?dent]缩进排版

text-justify[?d??stifai]对齐

text-kashida-space

text-overflow [??uv??fl?u]溢出

text-transform [træns?f?:m]改变

text-underline-position

unicode-bidi [?bi:di]

vertical-align

white-space

word-break

word-wrap

writing-mode

颜色和背景属性 background-attachment

background-color

background-image

background-position

background-position-x

background-position-y

background-repeat

color

版面属性 border

border-bottom

border-bottom-color

border-bottom-style

border-bottom-width

border-collapse*

border-color

border-left

border-left-color

border-left-style

border-left-width

border-right

border-right-color

border-right-style

border-right-width

border-style

border-top

border-top-color

border-top-style

border-top-width

border-width

clear

float

layout-flow

margin

margin-bottom

margin-left

margin-right

margin-top

padding

padding-bottom

padding-left

padding-right

padding-top

scrollbar-3dlight-color

scrollbar-arrow-color

scrollbar-base-color

scrollbar-darkshadow-color

scrollbar-face-color

scrollbar-highlight-color

scrollbar-shadow-color

table-layout

zoom

分类属性 display

list-style

list-style-image

list-style-position

list-style-type

定位属性 bottom

clip

height

left

overflow

overflow-x

overflow-y

position

right

top

visibility

width

z-index

打印属性 page

pageBreakAfter

pageBreakBefore

滤镜属性 filter

伪类和其它属性 :active

@charset

cursor

:first-letter

:first-line

@font-face

:hover

@import

!important

:link

@media

@page

:visited

实现CSS图片边框效果的方法

图片边框效果主要有两种,较简单的方法是直接在CSS文件中对img定义边界(border),例如我在CSS中定义了:

img.framed {

padding: 6px;

border: 1px solid #CCCCCC;

background-color: #FFFFFF; }

那么在HTML文件中,或者在网页更新的时候,针对嵌入的图片定义使用class="framed"就会有相应的边框效果。

上面的方法的优点是比较简单,但实现的效果比较单调,并不一定能达到令人满意的效果和一些特殊效果,例如阴影,色彩变化等等。运用图象替代与定位平移就可以很好地做到这点,在这里就不多讲了,相信等你学会了基本的CSS,再向更高级的CSS效果挑战就不是什么难事了。

有关表格边框的css语法整理

我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框。

有关表格边框的css语法

具体内容包括:上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

1.上边框宽度

语法: border-top-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。

2.右边框宽度

语法: border-right-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。

3.下边框宽度

语法: border-bottom-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。

4.左边框宽度

语法: border-left-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。

5.边框宽度

语法: border-width: <值>

允许值: [ thin | medium | thick | <长度> ]{1,4}

初始值: 未定义

适用于: 所有对象

向下兼容: 否

边框宽度属性用一到四个值来设置元素的边界,值是一个关键字或长度。不允许使用负值长度。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。 这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略写的边框属性。

6.边框颜色

语法: border-color: <值>

允许值: <颜色>{1,4}

初始值: 颜色属性的值

适用于: 所有对象

向下兼容: 否

边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。也可以使用略写的边框属性。

7.边框样式

语法: border-style: <值>

允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

初始值: none

适用于: 所有对象

向下兼容: 否

边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。也可以使用略写的边框属性。

none:无样式;

dotted:点线;

dashed:虚线;

solid:实线;

double:双线;

groove:槽线;

ridge:脊线;

inset:内凹;

outset:外凸。

8.上边框

语法: border-top: <值>

允许值: <上边框宽度> || <边框式样> || <颜色>

初始值: 未定义

适用于: 所有对象

向下兼容: 否

上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

9.右边框

语法: border-right: <值>

允许值: <右边框宽度> || <边框式样> || <颜色>

初始值: 未定义

适用于: 所有对象

向下兼容: 否

右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

10.下边框

语法: border-bottom: <值>

允许值: <下边框宽度> || <边框式样> || <颜色>

初始值: 未定义

适用于: 所有对象

向下兼容: 否

下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

11.左边框

语法: border-left: <值>

允许值: <左边框宽度> || <边框式样> || <颜色>

初始值: 未定义

适用于: 所有对象

向下兼容: 否

左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。

12.边框

语法: border: <值>

允许值: <边框宽度> || <边框式样> || <颜色>

初始值: 未定义

适用于: 所有对象

向下兼容: 否

边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。

边框声明的例子包括:

H2 { border: groove 3em }

A:link { border: solid blue }

A:visited { border: thin dotted #800080 }

A:active { border: thick double red }

边框属性只能设置四种边框;只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

13.宽度

语法: width: <值>

允许值: <长度> | <百分比> | auto

初始值: auto

适用于: 块级和替换元素

向下兼容: 否

宽度属性的初始值为“auto”,即为该元素的原有宽度(有就是元素自己的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。

14.高度

语法: height: <值>

允许值: <长度> | auto

初始值: auto

适用于: 块级和替换元素

向下兼容: 否

高度属性的初始值为“auto”,即为该元素的原有高度(有就是元素自己的高度,)。百分比参考上级元素的宽度。不允许使用负的长度值。

15.有关标签

table 表格标签,对整个表格样式的定义要放在table中;

td 单元格标签,对单元格样式的定义要放在td中。

BODY 网页文档的主体元素,所有的可见范围都在<BODY>元素内

BUTTON 表单域的按钮,可以有“发送(submit)”、“重置(reset)”等形式

DIV 定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的

IMG 图片元素,通过指定“src"属性来指定图片的来源

INPUT 输入表单域

MARQUEE 移动字幕效果

SPAN 定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的

TEXTAREA 文本区域

TFOOT 多行输入文本框

TH 表格标题单元格

THEAD 表格标题

TR 表格行

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有