SQL吧 网站源码下载 企业网站源码下载 免费网站源码下载

当前位置: 主页 > 教程 > 网页 > CSS教程 >

CSS全解保藏

时间:2013-04-03 14:11来源:网络整理 作者:SQL吧 点击:
CSS全解收藏
企业站建365全包!先制作!后付款!600多套模版任你选择!晴网www.138.la专注企业站建仿站、域名、空间、云主机、服务器, 咨询电话:020-29031983 qq:2769485357

  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"就会有相应的边框效果。

(责任编辑:编辑部)
顶一下
(0)
0%
踩一下
(0)
0%
0
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
栏目列表
推荐内容