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
颜色和 |