CSS基本用法

最新推荐文章于 2024-09-09 15:18:53 发布

YKiOS

最新推荐文章于 2024-09-09 15:18:53 发布

阅读量1.1k

点赞数

分类专栏： HTML学习文章标签： html css

本文链接：https://blog.csdn.net/ykios/article/details/85113698

版权

HTML学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.CSS引入方法

内联式：通过标签的style属性，在标签上直接写样式。如：

  <div style="width: 200px;height: 400px;background: red">这是一个div标签</div>
  <p style="width: 300px;height: 80px;background: green">这是一个段落。</p>

嵌入式：通过style标签，在网页上创建嵌入的样式表。如：

  <style type="text/css">
    div {
      width: 200px;
      height: 400px;
      background: red;
    }
    p {
      width: 300px;
      height: 80px;
      background: green;
    }
  </style>

外联式：通用样式，写在专门的css文件中，直接在本文件中引用。如：

<head>
  <title>CSS外联式</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
</head>

2.CSS选择器

(1).标签选择器：此选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中，通用格式如下：

标签名 {
    属性名：属性值；
    ...
}

示例：

    p {
      width: 300px;
      height: 80px;
      background: green;
    }

注：一旦使用标签选择器，则当前页面上的所有该标签全部都用该样式。

(2).类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

常见格式：

.类名 {
   属性名: 值;
   ...
}

示例：

  <h1 class="header">这是一个标题标签</h1>
  <div class="red header">这是一个div标签</div>
  <p class="header">这是一个段落标签</p>

  <style>
    .red {
      color: red;
    }
    .header {
      font-size: 18px;
    }
  </style>

(3).层级选择器：主要应用在标签嵌套的结构中，层级选择器是结合上面两种选择器来写的选择器，它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。按照标签的层级来匹配对应的标签。示例如下：

  <div class="con">
    <span>这是span标签的内容</span>
    <div class="pink">这是div中包含的div标签, 我是粉色</div>
  </div>
  <style>
    .con {
      width: 200px;
      height: 200px;
    }
    .con span {
      color: green;
    }
    .con .pink {
      color: pink;
    }
  </style>

(4).id选择器：通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能服用，id名一般给程序使用，所以不推荐使用id作为选择器。

使用格式：

#id名 {
    属性名: 值
}

示例：

  <p id="box">这是第一个段落标签</p>
  <p>这是第二个段落标签</p>
  <p>这是第三个段落标签</p>

  <style>
    #box {
      color: red
    }
  </style>

(5).伪类选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。

示例：

  <div class="box">常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。</div>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background: red;
    }
    .box:hover {
      width: 500px;
    }
  </style>

a:link {color: red} /* 未访问时的状态 */ a:visited {color: orange} /* 已访问过的状态 */ a:hover {color: pink} /* 鼠标移动到链接上时的状态 */ a:active {color: yellow} /* 鼠标按下去时的状态 */