【零基础学web前端】走进CSS的大门,CSS引入方式,CSS基础选择器,CSS复合选择器

news2025/2/27 20:48:43

前言:
大家好,我是良辰丫,前面我们已经学了html的相关知识,今天我们一起去探索前端网页的css,那么css到底是什么呢?我们慢慢往下看.💞💞

🧑个人主页：良辰针不戳
📖所属专栏：零基础学web前端
🍎励志语句：生活也许会让我们遍体鳞伤，但最终这些伤口会成为我们一辈子的财富。
💦期待大家三连，关注，点赞，收藏。
💌作者能力有限，可能也会出错，欢迎大家指正。
💞愿与君为伴，共探Java汪洋大海。

在这里插入图片描述

目录

  • 1. 简介CSS
  • 2. CSS的引入方式
    • 2.1 内部样式表
    • 2.2 行内样式表
    • 2.3 外部(外联)样式表
  • 3. CSS基础选择器
    • 3.1 标签选择器
    • 3.2 类选择器
    • 3.3 id选择器
    • 3.4 通配符选择器
  • 4. 复合选择器
    • 4.1 后代选择器
    • 4.2 子选择器
    • 4.3 并集选择器
    • 4.4 伪类选择器(先了解)
      • 4.4.1 链接伪类选择器
      • 4.4.2 :force 伪类选择器

1. 简介CSS

  • 所谓CSS,全称为Cascading Style Sheet(层叠样式表),是用来控制网页外观的一门技术.
  • 在html中我们了解到html是网页的结构,可以比作汽车的骨架;在CSS中就是美观了汽车,给汽车装饰了外观.

在这里插入图片描述

当初网页刚出来的时候,只有html,没有CSS的概念,由此可见,当时等的网页是非常单调的,那时候的网页只是简单的搞一些像报纸一样的文字已经图片.

2. CSS的引入方式

2.1 内部样式表

所谓内部样式,就是把html的代码与CSS的代码放在桐楠格一个文件中(同一个html文件),我们经常把CSS放在style标签内,而且style标签对通常是放在head标签里面的,这是一种习惯,当然也可以放在body里面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>hello,叶良辰!!!</p>
</body>
</html>

在这里插入图片描述

2.2 行内样式表

行内样式表也是把html与CSS代码放在同一个html文件中,但是与内部样式表不同的是,CSS样式不是在标签对style中定义,而是在标签的style属性中定义,此时的style只是一个属性.

  • 只适合写简单的样式.
  • 这种写法优先级比较高,可能会覆盖其它样式.
<body>
   <h2 style="color: red;">行内样式表</h2>
</body>

在这里插入图片描述

2.3 外部(外联)样式表

  • 外部样式需要额外创一个css文件.
  • 外部样式是我们最常用的引用方式,这样可以提高网页的性能.
    外部样式在单独的文件中,我们可以在html文件的head标签对中使用link进行引入.

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link type="text/css" rel="stylesheet" href="./test6.css">
</head>
<body>
   <div>你好,叶良辰</div>
</body>
</html>

css文件

div{
    color: red;
    font-size: 50px;
}

在这里插入图片描述

3. CSS基础选择器

3.1 标签选择器

  • 能快速为同一类型的标签都选择出来.
  • 不能差异化选择.
<style>
        p{
            color: green;
            font-size: 50px;
        }
    </style>

<p>
        我是标签选择器
    </p>

在这里插入图片描述

3.2 类选择器

  • 差异化表示不同的标签
  • 可以让多个标签的都使用同一个标签.
  • 类名用 . 开头的.

下方的标签使用 class 属性来调用.

  • 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代
    码更好复用)
  • 如果是长的类名, 可以使用 - 分割.,注意,减号前后要有空格.
  • 不要使用纯数字, 或者中文, 以及标签名来命名类名
<body>
    <p class="class">
        我是类选择器
    </p> 
    <style>
        .class{
            color: green;
            font-size: 50px;
        }
    </style>
</body>

在这里插入图片描述

我们也可以一个标签选择两个类选择器,会有同样的效果.

<body>
    <p class="one two">
        我是类选择器
    </p> 
    <style>
        .one{
            color: green;
        }
        .two{
            font-size: 50px;
        }
    </style>
</body>

在这里插入图片描述

3.3 id选择器

  • CSS 中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别).
<body>
   <p id="one">我是id选择器</p>
   <style>
    #one{
        color: red;
    }
   </style>
</body>

在这里插入图片描述

html 的元素 id 不必带 #

<body>
   <p id="one">我是id选择器</p>
   <style>
    p{
        color: red;
    }
   </style>
</body>

在这里插入图片描述

3.4 通配符选择器

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

<body>
   <p>我是通配符选择器</p>
   <style>
    *{
        color: red;
        font-size: 25px;
    }
   </style>
</body>

在这里插入图片描述

小结:

  • 标签选择器,能选出所有相同标签,不能差异化进行选择.
  • 类选择器,能选出一个或多个标签,根据需求选择,非常灵活.
  • id选择器,能选出一个标签,同一个id在一个html中只能选择一次.
  • 通配符选择器,选出所有标签,特殊情况下使用,往往不会这样用.

4. 复合选择器

4.1 后代选择器

后代选择器又叫包含选择器. 选择某个父元素中的某个子元素.

<body>
    <div>
        <p>你好呀!</p>
        <span>叶良辰</span>
    </div>
    <style>
       div p{
        color: red;
       }
    </style>
</body>

在这里插入图片描述

后代选择器不一定是直系亲属,也可以是孙子(也就是隔代选择).

<body>
    <div>
        <p>你好呀!
            <span>莫西莫西!!</span>
        </p>
        <span>叶良辰</span>
    </div>
    <style>
       div p span{
        color: red;
       }
    </style>
</body>

在这里插入图片描述

后代选择器可以是任意基础选择器的组合,(包括类选择器, id 选择器),在这里我就不做举例了,和上面类似.

4.2 子选择器

和后代选择器类似, 但是子选择器只能选择子标签.

元素1>元素2 { 样式 }

  • 使用大于号分割
  • 只能选亲儿子, 不能选孙子元素(不能隔代选择)
<body>
    <div>
        <p>你好呀!
            <span>莫西莫西!!</span>
        </p>
        <span>叶良辰</span>
    </div>
    <style>
       div>p{
        color: red;
       }
    </style>
</body>

在这里插入图片描述

4.3 并集选择器

  • 并集选择器用于选择多组标签 (集体声明).
    元素1, 元素2 { 样式 }
  • 通过 逗号 分割等多个元素.
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
<body>
    <div>
        你好呀!!!
    </div>
    <p>叶良辰!!!</p>
    <style>
       div,p{
        color: red;
       }
    </style>
</body>

在这里插入图片描述

4.4 伪类选择器(先了解)

4.4.1 链接伪类选择器

  • a:link 选择未被访问过的链接
  • a:visited 选择已经被访问过的链接
  • a:hover 选择鼠标指针悬停上的链接(重点掌握)
    .- a:active 选择活动链接(鼠标按下了但是未弹起)
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <style>
       a:link{
        color: red;
       }
    </style>
</body>

在这里插入图片描述

4.4.2 :force 伪类选择器

选取获取焦点的 input 表单元素.

<body>
    <div class="one">
        <input type="text">
        <input type="text">
    </div>
    <style>
       .one>input:focus{
        color: red;
       }
    </style>
</body>

下面鼠标点上去,文本框里面的内容就变成了红色.

在这里插入图片描述

小结复合选择器:

  • 后代选择器,选择后代元素,可以隔代选择.
  • 子选择器,只能选择子元素,不能隔代选择.
  • 并集选择器,选择相同样式的元素,可以做到代码复用.
  • 链接伪类选择器,选择不同状态的链接.
  • :focuse伪类选择器,选择被选中的元素.

后序:
今天关于web前端的CSS相关的内容就学到这里了,我们下一篇文章再见.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/520427.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

二叉树层级遍历以及相关练习

二叉树层级遍历以及相关练习

二叉树层级遍历以及相关练习 文章目录 二叉树层级遍历以及相关练习思想步骤代码实现相关练习 力扣&#xff1a;102. 二叉树的层序遍历 - 力扣&#xff08;Leetcode&#xff09; 思想 层序遍历一个二叉树。就是从左到右一层一层的去遍历二叉树。 使用队列实现二叉树广度优先遍…
阅读更多...
算法修炼之练气篇——练气二十层

算法修炼之练气篇——练气二十层

博主&#xff1a;命运之光 专栏&#xff1a;算法修炼之练气篇 前言&#xff1a;每天练习五道题&#xff0c;炼气篇大概会练习200道题左右&#xff0c;题目有C语言网上的题&#xff0c;也有洛谷上面的题&#xff0c;题目简单适合新手入门。&#xff08;代码都是命运之光自己写的…
阅读更多...
实例演示如何结合Selenium和Requests进行自动化测试

实例演示如何结合Selenium和Requests进行自动化测试

下方查看历史精选文章 重磅发布 - 自动化框架基础指南pdfv1.1大数据测试过程、策略及挑战 测试框架原理&#xff0c;构建成功的基石 在自动化测试工作之前&#xff0c;你应该知道的10条建议 在自动化测试中&#xff0c;重要的不是工具 Selenium和Requests是两个常用的自动化测试…
阅读更多...
Meme和BRC-20的暴跌洗盘

Meme和BRC-20的暴跌洗盘

* * * 原创&#xff1a;刘教链 * * * 5月以来的Meme&#xff08;模因币&#xff0c;发音类似“谜姆”&#xff09;狂欢&#xff0c;有ERC-20版本的Meme比如Pepe&#xff08;青蛙佩佩&#xff09;&#xff0c;也有BRC-20版本的Meme比如ordi&#xff08;序数协议本身的名字&…
阅读更多...
IM即时通讯系统[SpringBoot+Netty]——梳理（二）

IM即时通讯系统[SpringBoot+Netty]——梳理（二）

文章目录 五、IM开发核心之构建TCP网关&#xff08;上&#xff09;1、编写LimServer2、编写LimWebSocketServer3、使用snakeyaml动态配置文件4、大白话讲通信协议—详解主流通讯协议4.1、文本协议4.2、二进制协议4.3、xml协议4.4、可以落地使用的协议 5、私有协议编解码—设计篇…
阅读更多...
ArcGIS栅格重采样与算法选择

ArcGIS栅格重采样与算法选择

本文介绍在ArcMap软件中&#xff0c;实现栅格图像重采样的具体操作&#xff0c;以及不同重采样方法的选择依据。 首先&#xff0c;如下图所示&#xff0c;是我们待重采样的栅格图像的属性界面。其中&#xff0c;可以看到此时栅格像元的边长为0.4867左右&#xff08;由于图层是地…
阅读更多...
“技术开发最应该做什么？”，聊聊我在服务端开发5年的理解和收获

“技术开发最应该做什么？”，聊聊我在服务端开发5年的理解和收获

我们新推出大淘宝技术年度特刊《长期主义&#xff0c;往往从一些小事开始——工程师成长总结专题》&#xff0c;专题收录多位工程师真诚的心路历程与经验思考&#xff0c;覆盖终端、服务端、数据算法、技术质量等7大技术领域&#xff0c;欢迎一起沟通交流。 本文为此系列第二篇…
阅读更多...
我的.net视频课程

我的.net视频课程

https://edu.csdn.net/lecturer/222?spm1002.2001.3001.4144
阅读更多...
9.并发基础与CAS基本原理

9.并发基础与CAS基本原理

线程的状态/线程的生命周期 初始化 Thread thread new Thread();运行 thread.start(); 运行中状态 ——> 调用yeild进入就绪状态就绪状态 ——> 通过系统调度(获取到cpu时间片),又会进入到运行中状态 等待 调用如下方法就从运行进入到等待状态: Object.wait()、Object.…
阅读更多...
2360. 图中的最长环

2360. 图中的最长环

方法一&#xff1a;拓扑排序加搜索 class Solution { public:bool vis[100005];vector<int>v[100005];int dfs(vector<int> &dist,int st,int step){vis[st]true; // cout<<st<<endl;int res0;for(int i0;i<v[st].size();i){int xv[st][i];if(…
阅读更多...
Angular开发之——Angular项目介绍(03)

Angular开发之——Angular项目介绍(03)

一 概述 Angular项目目录介绍Angular程序如何启动 二 Angular项目目录介绍 2.1 项目目录 2.2 目录结构说明 工作区配置文件 node_modules &#xff1a;第三方依赖包存放的目录src&#xff1a;应用源代码目录angular-cli.json&#xff1a; Angular命令行工具的配置文件&…
阅读更多...
设计模式之桥接模式释义与举例剖析

设计模式之桥接模式释义与举例剖析

文章目录 一、前言二、模式定义三、模式结构四、案例具体实现五、 模式优缺点六、 模式使用场景七、 模式总结 一、前言 开始学Java讲继承的时候&#xff0c;总喜欢用一个例子来讲解&#xff0c;那就是画图形。这里有一个画笔&#xff0c;可以画正方形、长方形、圆形。除了画出…
阅读更多...
OpenCV-答题卡识别-四点透视变换

OpenCV-答题卡识别-四点透视变换

目录 答题卡识别图片读取四点透视变换 划出区域处理选择题区域处理准考证号区域处理科目区域得分导出结果 封装成品 答题卡识别 使用opencv技术&#xff0c;实现对答题卡的自动识别&#xff0c;并进行答题结果的统计 技术目的&#xff1a; 能够捕获答题卡中的每个填涂选项;将…
阅读更多...
【新星计划-2023】TCP三次握手和四次挥手讲解

【新星计划-2023】TCP三次握手和四次挥手讲解

关于TCP三次握手和四次挥手&#xff0c;各位想必在读大学的时候或者是在面试的时候一定遇到过&#xff0c;三次握手和四次挥手本身是不是太难的&#xff0c;但它容易忘&#x1f61e;&#xff0c;今天我就在这里给大家讲解一下三次握手与四次挥手。 一、三次挥手 TCP三次握手建…
阅读更多...
我，大厂P9，找不到工作

我，大厂P9，找不到工作

作者| 老W 编辑| Emma 来源| 技术领导力(ID&#xff1a;jishulingdaoli) K哥写在前面的话&#xff1a;这是一位读者投稿&#xff0c;读者老W讲述了自己从大厂P9失业后、再就业的故事&#xff0c;并总结了自己的心路历程&#xff0c;很真实的记录与思考&#xff0c;值得大家借…
阅读更多...
SensorX2car：在道路场景下的完成传感器到车体坐标系标定

SensorX2car：在道路场景下的完成传感器到车体坐标系标定

文章&#xff1a;SensorX2car: Sensors-to-car calibration for autonomous driving in road scenarios 作者&#xff1a;Guohang Yan, Zhaotong Luo, Zhuochun Liu and Yikang Li 编辑&#xff1a;点云PCL 代码&#xff1a;https://github.com/OpenCalib/SensorX2car 作者单位…
阅读更多...
IDEA+maven+Springboot工程创建超详细过程示例

IDEA+maven+Springboot工程创建超详细过程示例

IDEAmavenSpringboot工程创建超详细过程示例 1、IDEA、Maven下载安装及IDEA配置Maven教程2、IDEAmavenSpringboot的web工程创建示例2.1 SpringBoot简介2.2 maven形式创建sprintboot工程2.3 导入相关依赖2.4 创建SpringBoot启动类2.5 创建 Controller2.6 启动项目2.7 配置端口信…
阅读更多...
springboot第22集：security，Lombok，token，redis

springboot第22集：security，Lombok，token，redis

Spring Security是一个基于Spring框架的权限管理框架&#xff0c;用于帮助应用程序实现身份验证和授权功能。它可以为Web应用程序、REST API和方法级安全性提供支持&#xff0c;并支持各种认证方式。 Spring Security最初是Acegi Security的前身&#xff0c;但由于其配置繁琐而…
阅读更多...
【第六期】Apache DolphinScheduler 每周 FAQ 集锦

【第六期】Apache DolphinScheduler 每周 FAQ 集锦

点击蓝字 关注我们 摘要 为了让 Apache DolphinScheduler 的广大用户和爱好者对于此项目的疑问得到及时快速的解答&#xff0c;社区特发起此次【每周 FAQ】栏目&#xff0c;希望可以解决大家的实际问题。 关于本栏目的要点&#xff1a; 本栏目每周将通过腾讯文档&#xff08;每…
阅读更多...
用排列组合来编码通信（六）——魔术《5张牌的预言》的魔术拓展之《My Fitch Four Glory》...

用排列组合来编码通信（六）——魔术《5张牌的预言》的魔术拓展之《My Fitch Four Glory》...

早点关注我&#xff0c;精彩不错过&#xff01; 在上一篇中&#xff0c;我们介绍了《5张牌的预言》这个魔术的一个精彩的扩展表演《Eigens Value》&#xff0c;把这个魔术和数学性质的结合做到了极致&#xff0c;相关内容请戳&#xff1a; 用排列组合来编码通信&#xff08;五&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023