CSS选择器的用法及常见属性

最新推荐文章于 2024-04-22 22:17:33 发布

来学习的小张

最新推荐文章于 2024-04-22 22:17:33 发布

阅读量2.5k

点赞数 15

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/dddddrrrzz/article/details/124291723

版权

一、CSS基本语法规范

选择器 + {
   应用的属性}

<style>
	p {
   
	/* 设置字体颜色 */
	color: red;
	/* 设置字体大小 */
	font-size: 30px;
	}
</style>
<p>hello</p>

p就是选择器.此处就表示选择页面中的所有p标签。
{}里面是键值对结构，就来表示CSS中的各种属性。键值对之间使用;来分割，习惯上会每个键值对独占一行。键和值之间使用:来分割，习惯上会在冒号后面加个空格。每个键值对就对应一个CSS的属性。
/* */这是CSS 中的注释(使用 ctrl + / 快速切换) 。
CSS 要写到 style 标签中。
style 标签可以放到页面任意位置，一般放到 head 标签内。

二、引入方式

2.1 内部样式表

写在 style 标签中. 嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.
优点: 这样做能够让样式和页面结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候.

2.2 内联样式

通过 style 属性, 来指定某个标签的样式.
只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.

<style>
        element.style{
   
            color: red;
        }
</style>
<p style="color: red">hello world</p>

在这里插入图片描述
这种写法优先级较高, 会覆盖其他的样式.如下：可以看到, red 颜色被覆盖了

<style>
        element.style{
   
            color: red;
        }
</style>
<p style="color:blueviolet">hello world</p>

在这里插入图片描述

2.3 外部样式–实际开发中用的最多

把CSS代码单独提取出来,放到了一个.css 文件中，然后再html 代码里,通过link标签,来引入该CSS文件。

在这里插入图片描述

<link rel="stylesheet" href="[CSS文件路径]"

创建test02.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <link rel="stylesheet" href="test.css">
    <p>这是一段话</p>
</body>
</html>

在这里插入图片描述
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效.

三、代码风格

3.1 样式格式

紧凑风格：

p{
    color: red; font-size: 30px;}

展开风格（推荐）：

p
{
    
	color: red; 
	font-size: 30px;
}

3.2 样式大小写

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母。
正因为都统一使用小写,在CSS中就不存在"驼峰命名法"
CSS里面通常会使用"脊柱命名法”，使用–来分割单词。

font_size这种下划线风格叫做“蛇形命名法"。

3.3 空格规范

冒号后面带空格；
选择器和 { 之间也有一个空格；

四、选择器

选择器的功能就是选中页面的元素(标签)可以一次选中一个,也可以一次选中一批。

4.1 选择器的种类

基础选择器: 单个选择器构成的

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

复合选择器: 把多种基础选择器综合运用起来.

后代选择器
子选择器
并集选择器
伪类选择器

CSS选择器参考手册

4.2 基础选择器

1. 标签选择器

写的选择器,就是一个html的标签名。
特点:能快速为同一类型的标签(如p标签)都选择出来，但是不能差异化选择。

<style>
	p{
   
	    color : red;
	}
</style>

2. 类选择器

通过类选择器,可以随心所欲的选择任意想要的元素.(理论上来说,只要有这一种选择器就够了)首先,需要在CSS代码中,创建一个类名，在对应的html元素中,通过class属性来引用这个类名.此时具有该类名的元素,就都会应用上相关的CSS属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        /*!*.开头的就是类名*!*/
        .red{
     
            color: red;
            font-size :40px;
        }
    </style>
     <p class="red">hello world</p>
     </body>
</html>

在这里插入图片描述

3.id选择器

和类选择器类似.先给被选中的元素,设定个id属性.(id在一个页面中,不能重复)
因此 id选择器只能选中一个元素,不能选中多个.

CSS 中使用 # 开头表示 id 选择器；
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>       
        /*id选择器*/
        #cpp{
     
            color: aquamarine;
        }
    </style>
     <p id="cpp">hello </p>
     </body>
</html>

在这里插入图片描述

4.通配符选择器

使用 * 的定义, 选取所有的标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>       
        /*通配符选择器，直接选中了页面的所有元素*/
        *{
     
            color: blue;
        }
    </style>
      <p id="cpp">hello </p>
     <p >hello java</p>
     <p>hello nihao</p>
     </body>
</html>

在这里插入图片描述

  *{
   
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

针对所有页面中的html都应用上述样式.
在这里插入图片描述

4.3 复合选择器

1. 后代选择器

通过多个选择器的组合,能够选中某个元素里面的子/孙子元素(后代元素)。

元素1 元素2 {
   样式声明}

元素 1 和元素 2 要使用空格分割；
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1；
选择器(元素)1和⒉都可以是标签选择器/类选择器/id选择器.

把 `ol` 中的 `li` 修改颜色, 不影响 `ul`

最低0.47元/天解锁文章

来学习的小张

关注

15
点赞
踩
23

收藏

觉得还不错? 一键收藏
12
评论
CSS选择器的用法及常见属性

目录一、CSS基本语法规范二、引入方式2.1 内部样式表2.2 内联样式2.3 外部样式--实际开发中用的最多三、代码风格3.1 样式格式3.2 样式大小写3.3 空格规范四、选择器4.1 选择器的种类4.2 基础选择器1. 标签选择器2. 类选择器3.id选择器4.通配符选择器4.3 复合选择器1. 后代选择器把 `ol` 中的 `li` 修改颜色, 不影响 `ul`代码示例: 元素 2 不一定非是儿子, 也可以是孙子.可以是任意基础选择器的组合. (包括类选择器, id 选择器）2. 子选择器3.并集
复制链接

扫一扫