HTML(8)——CSS选择器

目录

CSS引入方式 

选择器

标签选择器 

类选择器

id选择器

 通配符选择器


CSS层叠样式表是一种样式表语言,用来描述HTML文档的呈现

书写位置:title标签下方添加style双标签,style标签里写CSS代码

<title>css</title>

<style>

  /*选择器*/

  p{

    /*css属性*/

    }

</style>

<p>文字</p>

CSS引入方式 

内部样式表:CSS代码写在style里面

外部样式表:在HTML使用link标签引入单独的CSS文件

<link rel="stylesheet" href="地址">

 行内样式:CSS写在标签的style属性值里

<div style ="color:red";>文字</div>

选择器

作用:查找标签,设置样式

常见的基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器 

使用标签名作为选择器,选中同名标签设置相同的样式

类选择器

作用:查找标签,差异化设置标签的显示效果

步骤:

  • 定义类选择器  .类名
  • 使用类选择器,标签添加class="类名"

class属性可以写多个类名,中间用空格隔开。类名最好见名知意。

id选择器

作用:查找标签,差异化设置标签的显示效果

id选择器一般配合JS使用

步骤:

  • 定义id选择器  #id名
  • 使用id选择器,标签添加id="id名"

注:同一个id选择器在一个页面只能使用一次

 通配符选择器

作用:查找页面所有标签,设置相同的样式

通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

*{

color:red

}

相关推荐

  1. HTML(8)——CSS选择

    2024-06-18 21:52:03       36 阅读
  2. HTML/CSS学习】CSS常见选择

    2024-06-18 21:52:03       43 阅读
  3. HTML_CSS学习:CSS选择

    2024-06-18 21:52:03       29 阅读
  4. html css样式选择介绍

    2024-06-18 21:52:03       60 阅读
  5. 编程笔记 html5&css&js 037 CSS选择

    2024-06-18 21:52:03       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-18 21:52:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-18 21:52:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-18 21:52:03       82 阅读
  4. Python语言-面向对象

    2024-06-18 21:52:03       91 阅读

热门阅读

  1. LeetCode 2288.价格减免:模拟

    2024-06-18 21:52:03       32 阅读
  2. 给wordpress网站添加瀑布流效果

    2024-06-18 21:52:03       37 阅读
  3. 文件系统更新initrd的方法

    2024-06-18 21:52:03       27 阅读
  4. 广东省省站节能检测试题库(2024年)

    2024-06-18 21:52:03       29 阅读
  5. git\repo

    git\repo

    2024-06-18 21:52:03      26 阅读
  6. Kotlin 中,data class 和普通 class

    2024-06-18 21:52:03       31 阅读