您的位置：首页 > Web前端 > CSS

CSS学习初探

2012-02-19 11:25 176 查看

CSS概述：

CSS（Cascading Style Sheet），俗称“风格样式表”。是一种网页设计辅助工具。其核心是一种类似于C/S中的控件属性设置框。由于网页中控件的呈现形式比较特殊，因此就引入了CSS这样一种快速辅助管理界面风格的工具。它在工作的时候利用的是一种“挂钩原理”，就是事先在网页编码页面中布下一个标签，然后通过这样一个标志统一管理。

CSS类标签的优先级：

程序中总会有层次关系，因此，就要考虑优先级的问题，换句话说就是分得更细的标签对其内部的作用效果要强于外部的父类，这就是CSS标签类的优先级问题，因此对于CSS中“ID选择器>类选择器>标签选择器”这样一个优先级问题就很容易理解了。

CSS中的面向对象思想：

选择器中用空格表示“父子”的继承关系；用逗号表示同等级别的并列关系；同一个类中可以有多个同等级别的标签。

下面看一下相关的代码：

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
    创建人：李黎敏
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS测试</title> 
    <!-- 将CSS和Html连接起来
    -->
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <span id="special" class ="menu">  栏目一   </span >
    <span class ="menu  niu">  栏目二  </span >
    <span class ="menu">  栏目三   </span >
    <span class ="title">  这是 <span> 一 </span> 个标题 </span >  
</body>
</html>

CSS中的代码：

/*
    创建人：李黎敏
    创建日期：2012/2/18
    内容描述：第一个CSS实例操作，实现网页和样式的分离，
        通过CSS类的标签快速修改网页字体颜色
    功能特色：类标记选择器
    CSS选择器优先级：由小单位到大单位，ID选择器>类选择器>标签选择器
*/

body {                  /* Html标签选择器 */
                        
    color :Gray 
    
}

.menu {                 /* 项目样式 */
                        
    color:#00f;         /* 文字颜色 */
    
    }
.title                  /* 新闻标题样式 */
{
    color :Red ;        /* 文字颜色 */
    
    }
#special                /* id选择器的优先级要高于类选择器 */
{
    font-weight :bold ;
    color :Green ;   
     
    }

.title span             /* title类下的span标签，用英文状态下的空格表示 */
{
    font-size :12px;    /* 字号 */
    
    } 

.title, .menu           /* 并列关系的title和menu类标签，用逗号表示 */
{
    background-color :Green ;
    
    }    
    
.niu                    /* 同一类中的多个标签，最终运行效果以CSS中的代码顺序为准 */
{
    text-decoration:underline ;
    
    }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航