CSS全解收藏

01-01 19:59:59浏览次数:238栏目:HTML与CSS教程
标签:html与css教程,css教程,html网页设计教程,暂无联系方式 CSS全解收藏,
电脑知识

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:hover a:link a:visited a: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

  适用于: 所有对象

[1] [2]  下一页

,CSS全解收藏
《CSS全解收藏》相关文章
给资讯打分:
网友评论: