当前位置:园子博客 » Css » CSS入门

CSS入门

1月 7th, 2009 | Filed under Css, 网页标准 | 共有6,584次浏览

css是Cascading Style Sheets(层叠样式表单)的缩写,是一种对web文档添加样式的简单机制,属于表现层的布局语言。符合标准化的网站,仅仅通过更换一个不同的CSS文件,就可以瞬间实现整站所有页面改变更新的显示效果。可以这么说:CSS统一了网页的表现层,你眼睛可以看到的图像、色彩、布局方式都可以用CSS强大的功能来定义。

  1. 基本语法规范
    分析一个典型CSS的语句:
    p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

    • 其中”p”我们称为”选择器”(selectors),指明我们要给”p”定义样式;
    • 样式声明写在一对大括号”{}”中;
    • COLOR和BACKGROUND称为”属性”(property),不同属性之间用分号”;”分隔;
    • “#FF0000″和”#FFFFFF”是属性的值(value)。
  2. 定义字体
    WEB标准推荐如下字体定义方法:
    body { font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

    • 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推;
    • Lucida Grande字体适合Mac OS X;
    • Verdana字体适合所有的Windows系统;
    • Lucida适合UNIX用户;
    • “宋体”适合中文简体用户;
    • 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
  3. 颜色值
    颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
  4. 群选择器
    当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,例如:
    p, td, li { font-size : 12px ; }
  5. 派生选择器
    可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
    li strong { font-style : italic; font-weight : normal;}
    就是给li下面的子元素strong定义一个斜体不加粗的样式。
  6. 类别选择器
    在CSS里用一个点开头表示类别选择器定义,例如:
    .14px {color : #f60 ;font-size:14px ;}
    在页面中,用class=”类别名”的方法调用:
    <span class=”14px”>14px大小的字体</span>
    这个方法比较简单灵活,可以随时根据页面需要新建和删除。
  7. id选择器
    用CSS布局主要用层”div”来实现,而div的样式通过”id选择器”来定义。例如我们首先定义一个层
    <div id=”menubar”></div>
    然后在样式表里这样定义:
    #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
    其中”menubar”是你自己定义的id名称。注意在前面加”#”号。
    id选择器也同样支持派生,例如:
    #menubar p { text-align : right; margin-top : 10px; }
    这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
  8. 定义链接的样式
    CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
    a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
    a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
    a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
    a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
    以上语句分别定义了”链接、已访问过的链接、鼠标停在上方时、点下鼠标时”的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

更详细的CSS语法结构请看:css语法结构
使用CSS应该注意的问题

  • 使用内联样式还是外联样式?
    样式表分为内联样式表和外联样式表,成型的网站架构要求对样式表统一管理,所有的样式表都需要独立出来,作为一个或几个外联样式表文件;除非是极特殊的情况,该CSS只在这一个页面中出现,不会有另外的页面需要复用它,那么可以考虑使用内联,而内联样式很多时候会被视为不太专业的做法。
  • 合理的使用注释
    再科学、再规范的代码,也不见得能一眼就被其他人读懂,所以这个时候需要代码注释。CSS的注释很简单,在HTML里的DIV注释因为其层级嵌套关系的问题,需要使用<!—头部begin–>和<!—头部end–>的方式进行包含处理,这样能使代码更加模块化。
  • 大小写和一些简写方式
    有些编辑器产生的CSS代码会出现大写字符,建议统一修改成小写,而对color:#666666之类的颜色代码,可以缩写为color:#666。这对维护没增加什么困难,而且确实减小了文件体积。
  • 关于空格和换行是否保留的问题
    关于CSS代码中的空格问题一直被激烈地讨论着,我的主张是,在页面发布之前,因为代码的规整而产生的空格是没有问题的,这样更便于编辑与调试,而在网站定稿上线后,可以将CSS类里的空格换行都删除,每个定义类都并成一行代码,这样既能压缩文件空间,也能使所有类的名称整齐划一,便于查找。
  • 更多技巧请看:CSS技巧汇总
目前还没有任何评论.
您必须在 登录 后才能发布评论.