【JavaWeb学习专栏 | CSS篇】css简单介绍 css常用选择器集锦

个人主页:[兜里有颗棉花糖(https://xiaofeizhu.blog.csdn.net/)
欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创
收录于专栏【JavaWeb学习专栏】【Java系列】
希望本文内容可以帮助到大家,一起加油吧!!!💌
在这里插入图片描述

前言

css(Cascading Style Sheets),即层叠样式表。css可以对网页中元素位置进行像素级别的精细控制,可以一定程度上美化页面的效果,能够做到页面的样式和结构进行分离。结合以下html来说,html决定了页面的整体结构,而css则可以控制页面的展示效果。

目录

  • 前言
  • 一、css基本语法规范
  • 二、css引入方式
  • 三、CSS选择器
    • 基础选择器
      • 类选择器
      • id选择器
      • 通配符选择器
    • 复合选择器
      • 后代选择器
      • 伪类选择器

一、css基本语法规范

css的基本语法格式:选择器 + {一条/n条声明}

  • 选择器决定了对谁进行修改
  • 声明决定了修改啥
  • 声明的属性键值对键值对;进行区分,用:区分键与值。

下面我们来进行一个举例:
在这里插入图片描述
演示结果如下:
在这里插入图片描述

二、css引入方式

css主要有三种引入方式内部样式表、行内样式表、外部样式(实际开发中最常用的引入方式)

内部样式表:
内部杨样式表是通过stytle标签嵌套在html内部中的。
优点:能够让页面结构和样式进行分离。
缺点:只是一定程度上将页面结构和样式进行了分离(当css比较多的时候,就会显得页面非常的乱),即分离的还不够
举个栗子:
在这里插入图片描述
演示结果如下:
在这里插入图片描述

行内样式表:通过style属性, 来指定某个标签的样式。
举个栗子:<h1 style = "color : blue;font-size : 50px">hello world</h1>
演示结果如下:
在这里插入图片描述
行内样式表的优先级要高于内部样式表,举个栗子:在这里插入图片描述
演示结果如下:
在这里插入图片描述
所以,当行内样式表和内部样式表重复的时候以行内样式表为主

现在我们来看最后一种引入方式:外部样式(同时也是实际开发过程中最常用的引入方式)。
引入方式分为两步:首先创建一个css文件,然后通过link标签来引入刚刚创建的css文件。
样例演示:
在这里插入图片描述
在这里插入图片描述
外部样式恰好解决了内部样式表的一个弊端,即可以将页面样式和页面结构进行更进一步的分离,同时一定程度上提高了代码的可读性。

三、CSS选择器

注意:下面内容的选择器是css2标准中支持的选择器。

CSS 选择器用于选择 HTML 文档中的元素,并将样式应用于这些元素。通过 CSS 选择器,可以对网页的各个元素进行样式化和布局控制。简单来说如果我们相对标签中的元素某些属性进行修改的话,必须先选中该元素,然后才能对该元素中的某些属性进行修改。

CSS选择器主要分为两种:基础选择器和复合选择器。

基础选择器:

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

复合选择器:

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

基础选择器

类选择器

我们先通过一个样例再来学习类选择器的语法,请看举例:
在这里插入图片描述
在这里插入图片描述
运行结果如下:
在这里插入图片描述

类选择器语法如下:

  • 如果是长的类名, 可以使用 - 分割
  • 下方的标签使用class属性来调用。一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
  • 一个标签可以使用多个类名,多个类型之间用空格间隔。

下面我们来看看使用多个类型的具体实例:
在这里插入图片描述
演示结果如下:
在这里插入图片描述

id选择器

id选择器的语法格式:

  • id选择器和类选择器的最大区别就是id选择器不能被多个标签使用(id是唯一的)。
  • css中使用#开头来表示id选择器。
  • id 选择器的值和 html 中某个元素的 id 值相同。

举个栗子:
在这里插入图片描述
在这里插入图片描述
运行结果如下:
在这里插入图片描述

通配符选择器

通配符选择器语法格式:

// 页面中的所有内容结构都会被改为红色
// 不需要被页面结构调用
* {
	color:red;
}

通配符选择器在实际的开发中最主要的作用就是用来对页面中的所有元素样式的默认样式进行消除,消除主要针对的就是用来消除边距。

样例演示:
在这里插入图片描述
演示结果如下:
在这里插入图片描述

复合选择器

复合选择器简单来说就是将之前学过的基础选择器进行组合来进行使用。

后代选择器

后代选择器又称为包含选择器,选择某个父元素中的子元素。

语法格式如下:元素1 元素2 {样式声明}

我们现在来进行举例:
在这里插入图片描述
在这里插入图片描述
现在我们如果想把上述有序列表中的文字字体更换为红色,请看下面几种修改方法。

修改方式1(使用内部选择器):
在这里插入图片描述
这种方式有种缺陷就是如果列表中的元素非常多,使用内部选择器的方式就非常的麻烦。
修改方式2(后代选择器):
在这里插入图片描述
修改方式3(选择器的组合:类选择器和后代选择器的组合使用):在这里插入图片描述

关于后代选择器的语法格式中,元素1和元素2之间的关系不仅仅可以是父子关系,也可以是爷爷和孙子之间的关系。
请看举例:
在这里插入图片描述
上述语句中元素1ol、元素2a之间的关系我们可以理解为爷爷和孙子之间的关系。
其实我们换成下面的写法也可以完成和上述代码一样的效果。在这里插入图片描述
上述的两种写法的最终演示结果如下:
在这里插入图片描述

伪类选择器

伪类选择器简单来说就是用来定义元素状态的一个选择器。

链接伪类选择器:

  • a:link 选择未被访问的链接
  • a:visited 选择已经被访问过的链接
  • a:hover 选择鼠标指针悬停上的链接
  • a:active 选择活动链接(鼠标按下了但是未弹起)

这里我们直接来进行举例:
在这里插入图片描述在这里插入图片描述
现在我想对这个链接做出如下修改:这里链接默认显示是黑色的,当鼠标悬停在该链接时显示颜色为红色,当鼠标点击链接但是没有弹起的时候显示的颜色为绿色。
在这里插入图片描述

伪类选择器不仅仅可以对链接标签生效,对其他的标签依然可以生效。
在这里插入图片描述
在这里插入图片描述
现在对该按钮元素进行设置:默认显示颜色是蓝色,鼠标悬停在该按钮上时显示颜色为红色,鼠标点击但是并未弹起时的显示颜色为绿色。
在这里插入图片描述

好了,本文到这里就结束了,主要讲解了css中一些常用的选择器。嗯,就到这里吧,再见啦友友们!!!

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安全访问服务边缘(SASE):解决第三方风险的全方位解决方案

随着数字化时代的到来&#xff0c;企业和组织对于网络安全的需求越来越迫切。传统的安全解决方案已经无法满足复杂多变的网络环境&#xff0c;因此新兴的安全访问服务边缘&#xff08;SASE&#xff09;应运而生。本文将介绍SASE的概念和工作原理&#xff0c;并重点阐述它作为第…

第二百回 如何获取App自身的信息

文章目录 1. 概念介绍2. 使用方法2.1 ClipOval2.2 ClipRRect 3. 示例代码 我们在上一章回中介绍了AspectRatio Widget相关的内容&#xff0c;本章回中将介绍剪裁类组件(Clip).闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在这里说的剪裁类组件主要是指对…

Koa2从零搭建restful API

Koa2从零搭建restful API: 创建项目文件夹并进入 mkdir koa-projectcd koa-project 初始化项目 npm init 安装 Koa npm install koa koa-router --save 编写示例代码&#xff0c;在 app.js 文件中编写以下代码&#xff1a; // koa项目的入口文件 const Koa require("koa…

018 OpenCV 人脸检测

目录 一、环境 二、分类器原理 2.1、概述 2.2、工作原理 三、人脸检测代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、分类器原理 CascadeClassifier是OpenCV&#xff08;开源计算机视觉库&#xff09;中的一个强大的类…

想进阶JAVA高级程序员吗?多线程必学

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…

Truffle的基础语法与js测试语法

truffle编译 truffle compiletruffle部署 truffle migratetruffle测试 使用test文件夹下的所有文件测试 truffle test使用单个文件 测试 truffle test 文件所在位置assert断言 assert.equal 是一种常见的断言函数&#xff0c;用于测试两个值是否相等。它接受两个参数&…

代码随想录算法训练营第四十六天 _ 动态规划_背包问题总结。

学习目标&#xff1a; 动态规划五部曲&#xff1a; ① 确定dp[i]的含义 ② 求递推公式 ③ dp数组如何初始化 ④ 确定遍历顺序 ⑤ 打印递归数组 ---- 调试 引用自代码随想录&#xff01; 本文大多数内容引用自代码随想录 60天训练营打卡计划&#xff01; 学习内容&#xff1a; …

银行插件导致的Outlook客户端无法连接服务器问题

问题现象 最近遇到好些同事出现outlook客户端无法连接服务器的情况&#xff0c;具体现象就是右下角一直显示【正在尝试连接…】或者【需要密码】&#xff0c;点击【需要密码】按钮&#xff0c;输密码的弹窗是一个完全空白的页面。 此时打开word&#xff0c;右上角那里去登录o…

Postman获取token

问题描述 登录接口中带有token参数&#xff0c;其他接口需要带上token才能正确访问&#xff0c;利用接口查询用户信息时手动在headers中更新token信息并不方便。 解决方案 在登录接口中设置一个名为“token”的环境变量&#xff0c;value为登录接口跑通之后responseBody中返回…

科技提升安全,基于YOLOv4开发构建商超扶梯场景下行人安全行为姿态检测识别系统

在商超等人流量较为密集的场景下经常会报道出现一些行人在扶梯上摔倒、受伤等问题&#xff0c;随着AI技术的快速发展与不断普及&#xff0c;越来越多的商超、地铁等场景开始加装专用的安全检测预警系统&#xff0c;核心工作原理即使AI模型与摄像头图像视频流的实时计算&#xf…

⭐Unity 搭建UDP客户端(01) 配合网络调试助手测试

1.接收来自服务器的消息 using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; using UnityEngine;public class UDPManager:MonoBehaviour {public string recvStr; //服务器返回值public string UDPClientAddRess "192.168.2.39&q…

【算法系列篇】递归、搜索和回溯(二)

文章目录 前言1. 两两交换链表中的节点1.1 题目要求1.2 做题思路1.3 代码实现 2. Pow(X,N)2.1 题目要求2.2 做题思路2.3 代码实现 3. 计算布尔二叉树的值3.1 题目要求3.2 做题思路3.3 代码实现 4. 求根节点到叶结点数字之和4.1 题目要求4.2 做题思路4.3 代码实现 前言 前面为大…

Uniapp - 环境搭建 vscode开发

uni-app 基础 创建 uni-app 项目方式 uni-app 支持两种方式创建项目&#xff1a; 通过 HBuilderX 创建&#xff08;需安装 HBuilderX 编辑器&#xff09; 通过命令行创建&#xff08;需安装 NodeJS 环境&#xff09; HBuilderX 创建 uni-app 项目 创建步骤 1.下载安装 H…

Demystifying DeFi MEV Activities in Flashbots Bundle

目录 笔记后续的研究方向摘要引言贡献 Demystifying DeFi MEV Activities in Flashbots Bundle CCS 2023 笔记 本文介绍了对 Flashbots 捆绑包中的去中心化金融 &#xff08;DeFi&#xff09; 矿工可提取价值 &#xff08;MEV&#xff09; 活动的研究。作者开发了ActLifter&am…

SiC SBD/超结MOS在工业电源上的应用-REASUNOS瑞森半导体

一、前言 工业电源是指用于工业及相关领域中的电子设备与设施的电源系统&#xff0c;其重要性体现在为各类工业设备提供稳定的电力保障&#xff0c;维护设备正常运行&#xff0c;故需具有稳定可靠、高效节能、安全耐用等特点。 常见的工业电源类型包括&#xff1a;交流电源、…

优优聚:美团外卖,领跑外卖市场,打造全新就餐体验

随着互联网的快速发展&#xff0c;外卖行业逐渐崛起&#xff0c;成为了人们日常生活中不可或缺的一部分。作为中国最大的外卖平台之一&#xff0c;美团外卖凭借其卓越的服务和不断创新的精神&#xff0c;成为了市场的领导者。本文将详细分析美团外卖的发展现状以及其未来的发展…

使用cmake构建的工程的编译方法

1、克隆项目工程 2、进入到工程目录 3、执行 mkdir build && cd build 4、执行 cmake .. 5、执行 make 执行以上步骤即可完成对cmake编写的工程进行编译 &#xff0c;后面只需执行你的编译结果即可 $ git clone 你想要克隆的代码路径 $ cd 代码文件夹 $ mkdir bu…

年入百万的知识付费网站如何搭建:如何以低成本实现高转化?

我有才知识付费平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一大挑战。本文将…

服务器GPU占用,kill -9 PID 用不了,解决办法

PID&#xff08;progress ID 进程ID&#xff09; 上图为占用情况&#xff0c;使用下面的指令都不管用 kill -9 PID kill -15 PID # 加入sudo 还是不行 # 等等网上的 chatgpt 提供的其他办法&#xff0c;一圈试了下来还是不管用最后解决办法 首先用下面的指令查看进程的树结构…

Linux基础命令-期末复习

目录 一、Linux文件和目录 1.mkdir创建目录 2.ls列出目录 3.pwd显示当前所在目录 4.cd切换目录 5.rmdir删除空的目录 6.rm删除文件或目录 7.touch创建文件 8.cp复制文件或目录 1.把文件从该目录复制到下一级目录中去 2.把文件从该目录复制到上一级目录中去 3.把文件…