css

最新推荐文章于 2024-10-02 23:33:51 发布

转载最新推荐文章于 2024-10-02 23:33:51 发布 · 79 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flashweb/archive/2013/01/26/2878101.html

本文深入探讨了CSS的优势，包括行内样式、内嵌式、链接式和导入式样式表的应用，以及如何通过标记选择器、类别选择器、id选择器等实现页面元素的精确控制。同时，介绍了CSS选择器的集体声明、嵌套声明和子选择器的概念，并通过实例展示了这些概念的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、传统html的缺陷

一行一行的进行修改

2、css的好处

head中有一个style

h2{

// font-f

}

3、css如何控制页面

1）行内样式

2）内嵌式

3）链接式

4）导入式

css选择器

1）标记选择器

2）类别选择器

<style type="text/css">
<!--
.first{
    color:blue;            /* 蓝色 */
    font-size:17px;        /* 文字大小 */
}
.second{
    color:red;            /* 红色 */
    font-size:20px;        /* 文字大小 */
}
.third{
    color:cyan;            /* 青色 */
    font-size:23px;        /* 文字大小 */
}
-->
</style>
</head>

<body>
    <p class="first">class类别选择器1</p>
    <p class="second">class类别选择器2</p>
    <p class="third">class类别选择器3</p>
    <h3 class="second">h3同样适用</h3>
</body>

3）id选择器

<style type="text/css">
<!--
#one{
    font-weight:bold;        /* 粗体 */
}
#two{
    font-size:31px;            /* 字体大小 */
    color:#999900;            /* 颜色 */
}
-->
</style>
</head>

<body>
    <p id="one">ID选择器使用1</p>
    <p id="two">ID选择器使用2</p>
    <p id="two">ID选择器使用3</p>
</body>

************************************

1）选择器的集体声明

<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{            /* 集体声明 */
    color:purple;                /* 文字颜色 */
    font-size:14px;                /* 字体大小 */
}
h2.special, .special, #one{        /* 集体声明 */
    text-decoration:underline;    /* 下划线 */
}
-->
</style>
</head>

<body>
    <h1>选择器集体声明h1</h1>
    <h2 class="special">选择器集体声明h2</h2>
    <h3>选择器集体声明h3</h3>
    <h4>选择器选择器集体声明h4</h4>
    <h5>集体声明h5</h5>
    <p>选择器集体声明p1</p>
    <p class="special">选择器集体声明p2</p>
    <p id="one">选择器集体声明p3</p>
</body>

2）选择器的嵌套声明

<style type="text/css">
<!--
p b{                            /* 嵌套声明 */
    color:maroon;                /* 颜色 */
    text-decoration:underline;    /* 下划线 */
    font-size:30px;                /* 文字大小 */
}
-->
</style>
</head>

<body>
    <p>选择器嵌套<b>使用CSS标</b>记的方法</p>
    选择器嵌套之外<b>的标</b>记并不生效
</body>

3）子选择器

<style type="text/css">
ul.myList > li > a{            /* 子选择器 */
    text-decoration:none;    /* 没有下划线 */
    color:#336600;
}
</style>
</head>

<body>
<ul class="myList">
    <li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a>
        <ul>
            <li><a href="#">CSS1</a></li>
            <li><a href="#">CSS2</a></li>
            <li><a href="#">CSS3</a></li>
        </ul>
    </li>
</ul>

转载于:https://www.cnblogs.com/flashweb/archive/2013/01/26/2878101.html