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

　　适用于: 所有对象

　　向下兼容: 否

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

　　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 网页文档的主体元素，所有的可见范围都在元素内

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

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

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

　　INPUT 输入表单域

　　MARQUEE 移动字幕效果

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

　　TEXTAREA 文本区域

　　TFOOT 多行输入文本框

　　TH 表格标题单元格

　　THEAD 表格标题

　　TR 表格行

　　-

　　资料引用:http://www.knowsky.com/533213.html

评论总数：3 条 [ 查看全部 ] 网友评论