Web前端-CSS层叠样式表-1-优快云博客

本文链接：https://blog.youkuaiyun.com/Javaw1212/article/details/126489807

本文详细介绍了CSS在HTML页面中的三种引入方式：内联、内部和外部，以及各种选择器的用法，如标签名、ID、类、分组、属性和任意元素选择器。通过实例展示了如何应用这些选择器来设置元素样式，包括颜色、背景和边框等。同时，还提供了一个包含不同选择器应用的HTML代码示例。

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

Cascading Style Sheet, 作用: 美化页面, 相当于装修

如何在HTML页面中添加CSS样式代码

三种引入方式:
- 内联: 在标签的style属性中添加样式代码, 弊端:不能复用
- 内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用
- 外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用

选择器

作用: 用来查找元素的, 找到之后才能添加样式

标签名选择器: 通过标签的名称选择页面中所有同名元素

格式: 标签名{样式代码}

id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复

格式: #id{样式代码}

类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择

格式: .class{样式代码}

分组选择器: 将多个选择器合并成一个选择器

格式: div,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名='值']{样式代码}

任意元素选择器: 选取页面中所有标签

格式: *{样式代码}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /* id选择器 */
    #p1{color: red;}
     /* 类选择器 */
    .c1{color: blue;}
    /*分组选择器 */
    h3,#p1,.c1{background-color:yellow}
    /* 属性选择器 */
      input[type='text']{background-color: red}
      input[type='password']{color: green}
      /*任意元素选择器*/
      *{
          /*边框：粗细 样式   颜色 */
          border: 1px solid pink;
      }
  </style>

</head>
<body>
<input type="text">
<input type="password">
<h3>我是h3</h3>
<p id="p1">苹果</p>
<p class="c1">香蕉</p>
<p>橘子</p>

<div>冰箱</div>
<div class="c1">洗衣机</div>
<div>电视</div>

</body>
</html>