css基本用法（层叠、群选择符、派生选择符、颜色值）

最新推荐文章于 2022-10-24 08:06:32 发布

sure_viola

最新推荐文章于 2022-10-24 08:06:32 发布

阅读量569

点赞数

分类专栏： Html+css

Html+css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS 选择符【总结】
(1) div{...}
(2) .myStyle1{...} , 对应HTML引用:< p class=myStyle1>欢迎使用ASP.NET2.0技术< /p >

(3) #myStyle2{...} , 对应HTML引用:< span id=myStyle2>ASP.NET2.0引入了许多新的技术</span>

<span style="font-family:FangSong_GB2312;font-size:14px;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

        <meta http-equiv="Content-Language" content="zh-CN" />

        <title>CSS 选择符示例 -- CSS教程</title>

        <style type="text/css" media="all">

            p

            {

                font-size:12px;

            }



            .dreamdublue

            {

                color:blue;

            }

            

            .dreamdu18px

            {

                font-size:18px;

            }



            #dreamdured

            {

                color:red;

            }

        </style>

    </head>

    <body>

        <p>梦之都 <a href="http://www.dreamdu.com/css/">CSS教程</a>,<strong><a href="http://www.dreamdu.com/css/selector_novice/">选择符</a></strong>示例</p>

        <p>梦之都xhtml<strong>标签选择符示例</strong></p>

        <p id="dreamdured">梦之都<strong>id选择符示例</strong></p>

        <p class="dreamdublue dreamdu18px">梦之都<strong>class选择符示例</strong>,注意class的用法,请查看源代码.</p>

        <p class="dreamdublue dreamdu18px">梦之都<strong>class选择符示例2</strong>,class选择符出现了多次.</p>

    </body>

</html><span style="white-space:pre">	</span></span>

下面是一些选择符应用的写法：
（1）P{font-family:"sans serif"} //如果属性的值由多个单词组成，则必须加引号

（2）P{text-align:left;color:green} //如果是多个属性，则用分号

（3）div , table {font-size:8} // 等同分开写：div {font-size:8} table {font-size:8}

（4）table.line1{border-bottom:#4a4a4a 0px solid;border-collapse:collapse}

table.line2{border-bottom:#5a56a3 0px solid;border-collapse:collapse}

HTML引用: <table class="line1"><tr><td>TEST</td></tr></table>

<table class="line2"><tr><td>TEST</td></tr></table>

（5）.fontclass{font-size:8}

（6）#top {backround-color:#ccc}

#top h1{backround-color:#cac}

#top p{backround-color:#c2c}

HTML引用：<div id="top">

<h1>...........</h1>

<p>.............</p>

</div>

一、类型选择符

什么是类型选择符？指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型，div,p,span都是。
如下：

body {}
div {}
p {}
span {}

二、群组选择符

对于XHMTL对象，可以对一组同时进行了相同的样式指派。
使用逗号对选择符进行了分隔，这样书写的优点在于同样的样式只需要书写一次即可，减少代码量，改善CSS代码结构。
使用时应该注意”逗号”是在半角模式下，并非中文全角模式。
如下：

h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family: arial;
}

三、包含选择符
对某对象中的子对象进行样式指点定，这样选择方式就发挥了作用。
需要注意的是，仅对此对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式设置。
这样做的优点在于，帮我们避免过多的id、class设置，直接对所需的元素进行定义。
如下：

h2 span
{
color:red;
}

如下：

body h1 span strong
{
font-weight:bold;
}

四、id选择符

根据DOM文档对象模型原理所出现的选择符，对于一个XHTML文件，其中的每一个标签都可以使用一个id=”"的形式进行一个名称指派，但需要注意，在一个XHTML文件中id是具有唯一性而不可以重复的。
在div css布局的网页中，可以针对不同的用途进行命名，如头部为header、底部为footer。
XHTML如下：

<div id="content"></div>

CSS如下：

#content
{
font-size:14px;
line-height:120%;
}

五、class选择符

其实id是对于XHTML标签的扩展，而class是对SHTML多个标签的一种组合，class直译的意思是类或类别。
对于XHTML标签使用class=”"进行名称指派。与id不同，class可以重复使用，对于多个样式相同的元素，可以直接定义为一个class。
使用class的优点已不言自明，它对CSS代码重用性有良好的体现，众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
XHTML如下：