zoukankan      html  css  js  c++  java
  • 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- <值>

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

      初始值: medium

      适用于: 所有对象

      向下兼容: 否

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

      2.右边框宽度

      语法: border-right- <值>

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

      初始值: medium

      适用于: 所有对象

      向下兼容: 否

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

       3.下边框宽度

      语法: border-bottom- <值>

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

      初始值: medium

      适用于: 所有对象

      向下兼容: 否

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

       4.左边框宽度

      语法: border-left- <值>

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

      初始值: medium

      适用于: 所有对象

      向下兼容: 否

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

      5.边框宽度

      语法: border- <值>

      允许值: [ 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.宽度

      语法: <值>

      允许值: <长度> | <百分比> | 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 表格行

  • 相关阅读:
    Linux shell中运行命令后加上字符“&”的作用(转)
    初探Nginx架构
    NeoLoad系列- 快速上手教程
    Web服务器性能压力测试工具
    Web页面性能测试工具浅析
    主流压力测试工具推荐
    Jmeter系列-webdriver代码范例
    Jmeter系列-webdriver插件
    Jmeter系列-自动生成html报告
    loadrunner如何监控windows系统的资源
  • 原文地址:https://www.cnblogs.com/moonbay/p/2220712.html
Copyright © 2011-2022 走看看