CSS

最新推荐文章于 2025-06-03 16:49:51 发布

loetca

最新推荐文章于 2025-06-03 16:49:51 发布

阅读量321

点赞数

分类专栏： CSS 文章标签： css 层叠样式表

本文链接：https://blog.youkuaiyun.com/adsl624153/article/details/71106044

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS的基本概念、语法及常用的选择器，展示了如何利用CSS设置网页元素的颜色、宽度、高度等样式，并通过实例演示了标签选择器、ID选择器、类选择器等多种选择器的应用。

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

1、概念

CSS 指层叠样式表 (Cascading Style Sheets)。
主要用来设置网页中元素的样式。如边框，颜色，位置等

2、基本语法

编写位置

内联样式

写在标签style属性内。这种方式使用不多，因为它的耦合度较高

HTML大部分标签都提供了一个style属性
属性值可以直接使用CSS样式
style=”属性1:属性值1; 属性2:属性值2;”
多个属性之间，用分号（;）隔开

注意：CSS使用像素时，需要在值后面加px

内部样式表

  写在<stlye type="text/css"></style>标签中

注意：相同的CSS样式，哪个离标签近【最下面的】哪个就起作用（其实是后面的样式覆盖了前面的样式）

外部样式表

<link rel="stylesheet" type="text/css" href="文件路径" />

外部创建css文件，然后在HTML页面中引用
rel：Relationship 关系。即引入的css文件和当前文档的关系
href：HyperText Reference 引用的资源

外部css文件的顶部，推荐加上字符集编码声明：

@CHARACTER "UTF-8";

注意：相同的CSS样式，CSS文件中最下面的那个样式，会起作用（其实是后面的样式覆盖了前面的样式）

作用顺序

三种样式起作用的顺序，就是文档的加载顺序，从上到下执行，离标签最近的起作用

语法规则

    选择器{
        样式1:样式值1;
        样式2:样式值2;
    }

规范

⑴ CSS对大小写不敏感，但建议使用小写。
不过存在一个例外：class 和 id 名称对大小写是敏感的。

⑵ CSS注释：/* 注释内容 */

3、常用选择器

标签选择器

标签名 { 属性:属性值; }
选择符合的标签设置样式

  a { color:red; }

ID选择器

#id名 { 属性:属性值; }
每一个标签都有id属性。id属性用于区分唯一的标签，在一个页面中，同一个id只能使用一次

  #div1 { background-color:green; }

类选择器

.类名 { 属性:属性值; }
每一个标签都有class属性。通过class来分组，class属性值相同的多个标签，代表同一组标签

  .mini { background-color:red; }

组选择器

标签名, #id名, .类名 { 属性:属性值; }
多个选择器组合到一起，多个选择器之间用逗号（,）隔开

  #div1,.mini{ background-color:red; }

派生选择器

后代元素选择器
祖先元素后代元素 { 属性:属性值; }
选中指定元素的指定后代元素

  div a{ color:#BFA;}

通配选择器

  * { }

可以选择页面中所有的元素

4、相关标签

div【块级标签】

其没有任何效果，只是为了选中一部分内容设置样式
使用后，紧接着标签写的内容就会换行，这个标签就是一个块级元素

span【行内标签】

和div类似，它也没有任何效果，也是为了选中一部分内容设置样式。
唯一不同的是：span使用后，紧接写的内容不会换行

5、常用样式

颜色

color：red；
颜色可以写颜色名如：black, blue, red, green等
颜色也可以写rgb值：如rgb(255,0,0)
或十六进制表示值（3个两位的16进制的数表示）：#00F6DE，如果写十六进制值必须加#

宽度

width:19px;
宽度可以写像素值：19px;
也可以写百分比值：20%;

高度

height:20px;
高度可以写像素值：19px;
也可以写百分比值：20%;

背景颜色

background-color:#0F2D4C

字体样式

color:#bbffaa; 字体颜色
font-size:20px; 字体大小

黑色1像素实线边框

border:1px solid black;

div居中

margin:auto;

文本居中

text-align:center;

超链接去下划线

text-decoration:none;

表格细线

table {
  border:1px solid black; /*设置边框*/
  border-collapse:collapse; /*将边框合并*/
  }
td, th {
  border:1px solid black; /*设置边框*/
}

无序或有序列表去除修饰【去除黑点或序号】

ul, ol {
  list-style:none;
}

6、布局

盒子模型

浮动

7、使用示例

常用样式

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>常用样式</title>

    <!-- 内部样式表 -->
    <style type="text/css">
      /* 标签选择器 */
      body {
        /* 背景颜色 */
        background-color:#BFA;
      }

      div {
        /* 字体大小 */
        font-size:36px;
        background-color:orange;
        /* 居中
          【第一个div因为没有设置宽度，默认占一行。所以居中没有效果】
        */
        margin:auto;
      }

      /* id选择器 */
      #d1 {
        /* 宽度【占当前浏览器窗口的百分比】 */
        width:50%;
        /* 高度【注意：必须写px】 */
        height:36px;
        /* 覆盖了刚才的背景色 */
        background-color:green;
      }

      span {
        background-color:#AEB3D3;
      }

      /* 类选择器 */
      .c1 {
        width:300px;
        background-color:#599980;
        font-size:30px;
        /* 文本居中 */
        text-align:center;
      }

      a {
        font-size:30px;
        /* 去掉超链接的下划线 */
        text-decoration:none;
      }

      /* 组合选择器 */
      ul, ol {
        /* 去掉列表的修饰符号 */
        list-style:none;
      }
    </style>

    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <!-- 内联样式 -->
    <!-- 字体颜色 -->
    <h1 style="color:red;">这是一级标题</h1>

    <div>这是div里的话</div>
    <div id="d1">这是div里的话</div>

    <br /><br />

    <span>这是span里的话</span>
    <span>这是span里的话</span>

    <p class="c1">这是一段话</p>
    <h3 class="c1">这是h3里的话</h3>

    <br /><br />

    <a href="#">没有下划线的超链接</a>

    <br /><br />

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>

    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ol>

    <table>
      <tbody>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
        </tr>
        <tr>
          <td>1行1列</td>
          <td>1行2列</td>
          <td>1行3列</td>
        </tr>
        <tr>
          <td>2行1列</td>
          <td>2行2列</td>
          <td>2行3列</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

【外部样式表style.css】

@CHARACTER "UTF-8";

table {
  /* 设置表格边框 */
  border:1px solid black;
  /* 将边框合并 */
  border-collapse:collapse;
  /* 表格外边距 */
  margin:90px;
}

th, td {
  /* 设置单元格边框 */
  border:1px solid black;
  /* 单元格内边距 */
  padding:26px;
}

/* 覆盖写在页面中的内部样式表的样式 */
body {
  background-color:yellow;
}

浮动【导航条】

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>导航条</title>

    <style type="text/css">
      ul {
        width:1200px;
        /* 去掉列表的修饰符号 */
        list-style:none;
        margin:100px auto;
      }

      li a {
        width:25%;
        font-size:24px;
        color:white;
        /* 字体居中 */
        text-align:center;
        /* 上下内边距 */
        padding-top:5px;
        padding-bottom:5px;
        background-color:#8383D3;
        /* 去掉下划线 */
        text-decoration:none;

        /* 左浮动所有的li标签 */
        float:left;
      }

      li a:hover {
        background-color:#FA0;
      }

      .clear:before,
      .clear:after {
        contant:"";
        display:table;
        clear:both;
      }
      .clear {
        zoom:1;
      }
    </style>
  </head>
  <body>
    <ul class="clear">
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">体育</a></li>
      <li><a href="#">娱乐</a></li>
    </ul>
  </body>
</html>