CSS

2024-06-26 21:07| 来源: 网络整理| 查看: 265

概述

想要实现对 HTML 页面中的元素进行一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器；CSS 选择器有很多，大致可分为：基础选择器、高级选择器、伪类选择器和 CSS3 选择器

基础选择器标签选择器(就是标签的名字)

所有的标签，都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等

无论这个标签藏的多深，一定能够被选择上

标签选择器，选择的是所有，而不是一个

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

嵌套了 ul "我是很深的p"

CSS:

/* 选择页面中所有的 p 标签 */ p { color: green; } /* 选择页面中所有结构为 ul li 中的 li 标签 */ ul li { /* 设置 li 的边框 */ border: 1px solid gray; }

能够让很深的p变绿在这里插入图片描述

id选择器通过 id 选择器给指定 id 的元素添加样式，网页中 HTML 标记的 id 属性的值，任何的HTML标签都可以有id属性，其值必须是唯一的id 属性一般是给 JS 使用的，id 选择器的名称，必须以 “#” 开头这个标签的 id 属性值的命名规则：只能有字母、数字、下划线必须以字母开头不能和标签同名；比如 id 不能叫做 body、img、a 等一个HTML页面，不能出现相同的 id(id必须是唯一的)，哪怕他们不是一个类型的标签，比如页面上有一个 id 为 myId 的 p 标签，一个 id 为 myId 的 div 标签，是非法的！ id 选择器

CSS:

#myId{ color:orange; background-color:pink; }

h1 标签中的文字的颜色会变成橙色，背景色会变成粉红色在这里插入图片描述

class选择器(类选择器)

给一类 HTML 标签设置样式

class 属性是公共属性，任何的标签都可以携带class属性

class 属性和 id 非常相似，使用时需要给 class 属性命名（设置属性值）

类选择器的名称，必须以 “.” (英文状态下的点) 开头，class 属性只能给 CSS 用

class 属性可以重复，比如，页面上可能有很多标签都有 “teshu” 这个类（一对多，多个标签使用同一个类）

同一个标签，可能同时属于多个类（多对一，多个类选择器作用于一个元素），多个类用空格隔开，例如：

我是一个h3啊

这样，这个 h3 标签就同时属于 teshu 类和 zhongyao 类

示例：

我是一个h3啊我也是一个h3啊巧了，我也是一个h3啊我是一个段落啊我也是一个段落啊真巧，我也是一个段落啊

CSS:

.teshu{ color: red; }

所有 class="teshu" 的元素中的文本都会变成红色在这里插入图片描述

类选择器的综合使用

需求

段落1：60px+绿色段落2：绿色段落3：60px+下划线

思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：

.lv{ /*字体颜色为绿色*/ color:green; } .da{ /*字体大小为 60px*/ font-size: 60px; } .xian{ /*为文字添加下划线*/ text-decoration: underline; }

每个标签，就去选取自己想要的类：

段落1 段落2 段落3

在这里插入图片描述也就是说：

不要去试图用一个类名，把某个标签的所有样式写完；这个标签要多携带几个类，共同造成这个标签的样式每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用尽可能的用 class，除非极特殊的情况可以用 id 原因：id是js用的；也就是说，js要通过id属性得到标签，所以我们 css 层面尽量不用 id 一个标签可以同时被多种选择器选择，标签选择器、id选择器、类选择器；这些选择器都可以选择上同一个标签，从而影响样式，这就是css的 cascading“层叠式” 的第一层含义通配符 * “*” 就表示所有元素效率不高，如果页面上的标签越多，效率越低h1标签 ul li 标签 p标签 div标签 span 标签 CSS：*{ color:red; } 所有标签中的文本内容都会变成红色在这里插入图片描述

【本文地址】

公司简介

联系我们