制作一张简单的网页（HTML+CSS+JS) 【2】

最新推荐文章于 2025-07-18 16:17:19 发布

原创

最新推荐文章于 2025-07-18 16:17:19 发布 · 3.5w 阅读

663 ·

CC 4.0 BY-SA版权

文章标签：

#css #盒子模型 #选择器

在上一篇文章中，我总结了一下HTML，这一篇我把CSS简单做一下归纳，使网页变得富有美感。

一.CSS样式的基本知识

1.关于注释：

/*注释内容*/

2.最常见的css样式格式——嵌入式

例如对span里的内容的字改为蓝色：

<style type=text/css>
  span{
            color:blue;
      }   
</style>

3.介绍两种选择器：类选择器和ID选择器

（1）类选择器

.类选择器名字{css样式代码；}

举例:在body部分这样写：

<span class="happy">你好</span>

在style部分这样写：

.happy{color:pink;}/*你好的颜色变成了粉色*/

(2)ID选择器

#ID选择器{css样式代码；}
与类选择器一样，只不过class变成ID。

注意点：类选择器可以使用很多次，很多个地方class等于一样都没问题，但是ID选择器只能用一次。

4.子选择器和包含（后代）选择器

直接举例：

 <html>     
        <style>
            .hello>li{
                border:1px solid blue;
            }
        </style>
    </head>
    <body>
        <ul class="hello">
            <li>hello world!
                <ul>
                    <li>HELLO WORLD!</li>