【JavaEE初阶】 CSS的引入方式和选择器

文章目录

  • 🌲CSS是什么？
  • 🍀CSS基础语法规范
  • 🎄引入方式
    • 🚩内部样式表
    • 🚩行内样式表
    • 🚩外部样式
  • 🌴代码风格
  • 🌳选择器
    • 🚩选择器的种类
      • 🛫基础选择器
        • 🎈标签选择器
        • 🎈类选择器
        • 🎈id 选择器
        • 🎈通配符选择器
        • ⭕基础选择器小结
      • 🛬复合选择器
        • 🎈后代选择器
        • 🎈子选择器
        • 🎈并集选择器
        • 🎈伪类选择器
          • 1) 链接伪类选择器
          • 2) :force 伪类选择器
        • ⭕复合选择器小结
  • ⭕总结

🌲CSS是什么？

层叠样式表 (Cascading Style Sheets).

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

用来美化HTML所写的界面，就如同化妆一样
在这里插入图片描述

🍀CSS基础语法规范

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改 (找谁)

  • 声明决定修改啥. (干啥)

  • 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.

</head>
<style>
    p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 30px;
    }
</style>
<body>
    <p>遇事问春风乄</p>
</body>

在这里插入图片描述

注意:

  • CSS 要写到 style 标签中(后面还会介绍其他写法)
  • style 标签可以放到页面任意位置. 一般放到 head 标签内.
  • CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)

🎄引入方式

我们引入CSS的方式大致分为以下几种

🚩内部样式表

写在 style 标签中. 嵌入到 html 内部.

理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签
在这里插入图片描述

优点: 这样做能够让样式和页面结构分离.

缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

🚩行内样式表

通过 style 属性, 来指定某个标签的样式.

只适合于写简单样式. 只针对某个标签生效

<p style="color: red;">遇事问春风乄</p>

缺点: 不能写太复杂的样式

注意：

  • 这种写法优先级较高, 会覆盖其他的样式.

比如以下代码：

<style>
    div {
        color: red;
    }
</style>
<body>
    <div style="color:green">想要生活过的去, 头上总得带点绿</div>
</body>

在这里插入图片描述
我们可以看到, red 颜色被覆盖了

🚩外部样式

外部样式也是实际开发中最常用的方式.

  1. 创建一个 css 文件.

  2. 使用 link 标签引入 css

link格式如下：

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

接下来我们首先创建一个CSS文件，名为style.css,与我们的html文件在同一路径下

div {
    color: red;
}

html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遇事问春风</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>遇事问春风乄</div>
</body>
</html>

结果演示：
在这里插入图片描述
这样一来

  • 优点: 样式和结构彻底分离了.

  • 缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效

为什么不立即生效呢？

这是因为网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.

我们可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件

🌴代码风格

  1. 紧凑风格
p{ color: red; font-size: 30px;}
  1. 展开风格(推荐)
p {
	color: red;
	font-size: 30px;
}

在代码样式大小写时

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

我們需要注意一下空格规范

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

那什么时选择器呢？

🌳选择器

选中页面中指定的标签元素

要先选中元素, 才能设置元素的属性

就像王者荣耀，我们需要先选定英雄，才能进行接下来的操作
在这里插入图片描述

🚩选择器的种类

以下内容只是 CSS2 标准中支持的选择器

  1. 基础选择器: 单个选择器构成的
    标签选择器
    类选择器
    id 选择器
    通配符选择器
  2. 复合选择器: 把多种基础选择器综合运用起来.
    后代选择器
    子选择器
    并集选择器
    伪类选择器

这里博主也提供了 CSS选择器参考手册 供大家参考学习

🛫基础选择器

🎈标签选择器

特点:

  • 能快速为同一类型的标签都选择出来.

  • 但是不能差异化选择

<style>
    p {
    color: red;
    }
    div {
    color: green;
    }
</style>
<body>
    <p>咬人猫</p>
    <p>咬人猫</p>
    <p>咬人猫</p>
    <div>阿叶君</div>
    <div>阿叶君</div>
    <div>阿叶君</div>
</body>

在这里插入图片描述

🎈类选择器

特点:

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

代码示例如下所示：

<style>
    .one {
        color: red;
        font-size: 30px;
    }
</style>
<body>
    <div class="one">遇事问春风乄</div>
    <div>遇事问春风乄</div>
</body>

在这里插入图片描述
语法细节:

  • 类名用 . 开头的

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

  • 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)

  • 如果是长的类名, 可以使用 - 分割.

  • 不要使用纯数字, 或者中文, 以及标签名来命名类名

还可以使用多个类名，中间用空格隔开

<style>
	.box {
		width: 200px;
		height: 150px;
	}
	.red {
		background-color: red;
	}
	.green {
		background-color: green;
	}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

注意:

  • 一个标签可以同时使用多个类名

  • 这样做可以把相同的属性提取出来, 达到简化代码的效果

🎈id 选择器

和类选择器类似.

  • CSS 中使用 # 开头表示 id 选择器

  • id 选择器的值和 html 中某个元素的 id 值相同

  • html 的元素 id 不必带 #

  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

<style>
    #one {
        color: red;
    }
    #two {
        font-size: 60px;
    }
</style>
<body>
    <div id="one">遇事问春风乄</div>
    <div id="two">遇事问春风乄</div>
    <div id="one two">遇事问春风乄</div>
    <p id = "one">遇事问春风乄</p>
</body>

在这里插入图片描述
我们可以看到，id只有为一个的时候才能生效

我们可以认为姓名是类选择器, 可以重复，身份证号码是 id 选择器, 是唯一的。

🎈通配符选择器

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

<style>
    *{
        color: red;
        font-size: 60px;
    }
</style>
<body>
    <div >遇事问春风乄</div>
    <p >遇事问春风乄</p>
</body>

页面的所有内容都会被改成 红色 .

不需要被页面结构调用

在这里插入图片描述

⭕基础选择器小结
选择器作用特点
标签选择器能选出所有相同标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择, 最灵活, 最常用.
id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次
通配符选择器选择所有标签特殊情况下使用

🛬复合选择器

🎈后代选择器

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

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

  • 元素 1 和 元素 2 要使用空格分割

  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

<style>
    ul li{
        color: red;
        font-size: 30px;
    }
</style>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
</body>

在这里插入图片描述
上述代码中，把 ol 中的 li 修改颜色和大小, 不影响 ul的li

元素 2 不一定非是 儿子, 也可以是孙子

<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li><a href="#">ccc</a></li>
</ul>

ul li a {
	color: yellow;
}
或者
ul a {
	color: yellow;
}

这里就不演示了

还可以是任意基础选择器的组合. (包括类选择器, id 选择器)

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>

.one li a {
	color: green;
}
🎈子选择器

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

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

  • 使用大于号分割

  • 只选亲儿子, 不选孙子元素

后代选择器

<style>
    ul p{
        color: red;
        font-size: 30px;
    }
</style>
<body>
    <ul>
        <p>遇事问春风乄</p>
        <li><p>遇事问春风乄</p></li>
    </ul>
</body>

在这里插入图片描述

两个都会做出改变

子选择器的写法,

<style>
    ul>p{
        color: red;
        font-size: 30px;
    }
</style>
<body>
    <ul>
        <p>遇事问春风乄</p>
        <li><p>遇事问春风乄</p></li>
    </ul>
</body>

在这里插入图片描述
只会选择第一个遇事问春风乄

🎈并集选择器

用于选择多组标签. (集体声明)

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

  • 通过 逗号 分割等多个元素.

  • 表示同时选中元素 1 和 元素 2

  • 任何基础选择器都可以使用并集选择器.

  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

代码示例如下：

<style>
    p,
    div，
    ul p{
        color: red;
        font-size: 30px;
    }
</style>
<body>
    <p>111遇事问春风乄</p>
    <div>222遇事问春风乄</div>
    <ul>
        <li><p>333遇事问春风乄</p></li>
    </ul>
</body>

在这里插入图片描述

🎈伪类选择器
1) 链接伪类选择器

  • a:link 选择未被访问过的链接

  • a:visited 选择已经被访问过的链接

  • a:hover 选择鼠标指针悬停上的链接

  • a:active 选择活动链接(鼠标按下了但是未弹起)

<style>
    a:link{
        color: red;
    }
</style>
<body>
    <a href="#">小猫</a>
</body>

在这里插入图片描述
点击该链接时，小猫就会变为红色

<style>
    a:visited{
        color: green;
    }
</style>
<body>
    <a href="#">小猫</a>
</body>

未点击时：
在这里插入图片描述
访问过后：
在这里插入图片描述

如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可. ctrl + shift + delete

hover 选择鼠标指针悬停上的链接

<style>
    a:hover{
        color: green;
    }
</style>
<body>
    <a href="#">小狗</a>
</body>

此时只有当你鼠标悬浮在上面才会变色

active 选择活动链接(鼠标按下了但是未弹起)

<style>
    a:active{
        color: green;
    }
</style>
<body>
    <a href="#">小狗</a>
</body>

此时你的鼠标会变颜色

这里博主不太好演示效果，大家可以自己试一下

注意事项

  • 按照 上述的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 我们称为记忆规则 “绿化”

  • 浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.

  • 实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多

2) :force 伪类选择器

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

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

此时被选中的表单的字体就会变成红色.
在这里插入图片描述

⭕复合选择器小结
选择器作用注意事项
后代选择器选择后代元素可以是孙子元素
子选择器选择子元素只能选亲儿子, 不能选孙子
并集选择器选择相同样式的元素更好的做到代码重用
链接伪类选择器选择不同状态的链接重点掌握 a:hover 的写法.
:focuse 伪类选择器选择被选中的元素重点掌握 input:focus

⭕总结

关于《【JavaEE初阶】 CSS的引入方式和选择器》就讲解到这儿，HTML 只是描述了页面的骨架结构.使用 CSS 可以针对页面进行进一步美化。CSS后续介绍请关注博主后续创作，感谢大家的支持，欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注，点赞，收藏支持一下！

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

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

相关文章

【代码随想录】算法训练计划23

【代码随想录】算法训练计划23

1、669. 修剪二叉搜索树 题目&#xff1a; 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元素的相对结构 (即&#xff0c;如果没有被移除&…
阅读更多...
Windows安装Java环境（OracleJDK）

Windows安装Java环境（OracleJDK）

在下载之前&#xff0c;我们先了解一下java的前世今生 1991年&#xff1a;Java 的前身 Oak 由 James Gosling 和他的团队在 Sun Microsystems 公司开发。1995年&#xff1a;Oak 更名为 Java&#xff0c;并在同年发布。Java 1.0 版本正式推出。1996年&#xff1a;Sun Microsyst…
阅读更多...
springboot项目中没有识别到yml文件解决办法

springboot项目中没有识别到yml文件解决办法

springboot项目中没有识别到yml文件解决办法 ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传] 1、这个意思就是没有配置数据库的数据源路径。所以需要配置数据源&#xff0c;比如mysql的驱动和路径。检查是否在properties或者yml文件中是否已经配置好。…
阅读更多...
车载开发岗位如何？Android程序员是否转行

车载开发岗位如何？Android程序员是否转行

这几年的大环境让大家都过的不安逸&#xff1b;社会动荡与就业问题一直困扰了不少人。在大家都认为的高薪工作程序员行业中&#xff0c;现在也是费力不讨好裁员风潮大部分指向互联网。 我们Android开发基本上已经感受很久了&#xff0c;就这就业问题很难存活。对此我们的目光都…
阅读更多...
CI/CD - jenkins

CI/CD - jenkins

目录 一、部署 1、简介 2、部署 二、配置 三、实时触发 四、自动化构建docker镜像 五、通过ssh插件交付任务 六、添加jenkins节点 七、RBAC 八、pipeline 九、jenkins结合ansible参数化构建 1、安装ansible 2、新建gitlab项目 3、jenkins新建项目playbook 一、部…
阅读更多...
使用Lychee搭建个人图片存储系统并进行远程访问设置实现公网访问本地私人图床

使用Lychee搭建个人图片存储系统并进行远程访问设置实现公网访问本地私人图床

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站&#xff0c;可以看做是云存储的一部分&#xff0c;既可…
阅读更多...
LeetCode Hot100之十：239.滑动窗口最大值

LeetCode Hot100之十：239.滑动窗口最大值

题目 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 提示&#xff1a; 1 < nums.length < 10^5 -10^4 < nums[i…
阅读更多...
管理类联考——逻辑——知识+记忆篇——综合推理——考点+记忆

管理类联考——逻辑——知识+记忆篇——综合推理——考点+记忆

文章目录 整体目录大纲法汇总分类法记忆宫殿法绘图记忆法 考点记忆/考点汇总——按大纲 局部数字编码法归类记忆法重点记忆法歌决记忆法谐音记忆法理解记忆法比较记忆法 本篇思路&#xff1a;根据各方的资料&#xff0c;比如名师的资料&#xff0c;按大纲或者其他方式&#xff…
阅读更多...
【新闻稿】Solv 与 zCloak 联合开发跨境贸易场景下可编程数字凭证项目，获得新加坡、加纳两国央行支持...

【新闻稿】Solv 与 zCloak 联合开发跨境贸易场景下可编程数字凭证项目，获得新加坡、加纳两国央行支持...

关于昨天 Solv 携手 zCloak 与新加坡和加纳两个央行合作的 Project DESFT&#xff0c;很多朋友都发来恭喜和祝福&#xff0c;并希望了解详情。这个事我们秘密努力了半年多&#xff0c;终于有一个阶段性的成果。这里我转载中文版官宣新闻稿&#xff0c;欢迎大家关注。等我忙过这…
阅读更多...
无需公网IP、简单3步，直连远程NAS实现高速访问

无需公网IP、简单3步，直连远程NAS实现高速访问

面对NAS远程访问难题 蒲公英旁路组网盒子X1 一招搞定&#xff01; 无需公网IP、无需设置原有路由 简单3步&#xff0c;即可实现异地组网 更有点对点直连&#xff08;P2P&#xff09;模式 不限流量、不限速 传输速率取决于实际网络带宽 贝锐蒲公英X1&#xff0c;无需改变原…
阅读更多...
mac系统安装docker desktop

mac系统安装docker desktop

Docker的基本概念 Docker 包括三个基本概念: 镜像&#xff08;Image&#xff09;&#xff1a;相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。比如说nginx,mysql,redis等软件可以做成一个镜像。容器&#…
阅读更多...
基于深度学习的单帧图像超分辨率重建综述

基于深度学习的单帧图像超分辨率重建综述

论文标题&#xff1a;基于深度学习的单帧图像超分辨率重建综述作者&#xff1a; 吴 靖&#xff0c;叶晓晶&#xff0c;黄 峰&#xff0c;陈丽琼&#xff0c;王志锋&#xff0c;刘文犀发表日期&#xff1a;2022 年9 月阅读日期 &#xff1a;2023.11.18研究背景&#xff1a; 图像…
阅读更多...
【C#】字符串拼接相关

【C#】字符串拼接相关

目录 1.字符串拼接方式1 用号进行字符串拼接 复合运算符 2.字符串拼接方式2 3.控制台打印拼 4.例子 1.字符串拼接方式1 之前的算数运算符 只是用来数值类型变量进行数学运算的而 string 不存在算数运算符 不能计算 但是可以通过号来进行字符串拼接 用号进行字符串拼接 …
阅读更多...
【Linux】进程替换

【Linux】进程替换

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法…感兴趣就关注我吧&#xff01;你定不会失望。 本篇导航 1. 进程替换库函数接口execl与execv如何用makefile同时编译多文件execlp与execvpexecle与execvpe 2. 进程替换系统调用接口 # 0…
阅读更多...
STM32-基本定时器

STM32-基本定时器

一、基本定时器的作用 定时触发输出直接驱动DAC。 二、基本定时器的框图 以STM32F103系列为例&#xff0c;具体开发板请查看开发手册。 类别定时器总线位数计数方向预分频系数是否可以产生DMA捕获/比较通道互补输出基本定时器TIM6 / TIM7APB116位向上1~65536可以0无通用定时…
阅读更多...
链式前向星

链式前向星

性质 一种邻接表的写法 关键点&#xff1a; 数据结构 // 边 class Edge {int next; // 指向相同起始点的下一条边int to; // 邻接点int w; // 权重 } Edge[] edge new Edge[9]; // edge[cnt]表示编号为cnt的边// 用数组表示 int[] next new int[MAX]; int[] to new int[M…
阅读更多...
算法-二叉树-简单-二叉树的遍历

算法-二叉树-简单-二叉树的遍历

记录一下算法题的学习6 首先我们要回忆一下怎么样遍历一个树&#xff1a; 三种遍历概念 先序遍历&#xff1a;先访问根节点&#xff0c;再访问左子树&#xff0c;最后访问右子树。 后序遍历&#xff1a;先左子树&#xff0c;再右子树&#xff0c;最后根节点。 中序遍历&…
阅读更多...
人工智能轨道交通行业周刊-第65期（2023.10.30-11.19）

人工智能轨道交通行业周刊-第65期（2023.10.30-11.19）

本期关键词&#xff1a;高铁自主创新、智慧城轨、调车司机、大模型垂直应用、大模型幻觉 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMetro轨道…
阅读更多...
掌握深度学习利器——TensorFlow 2.x实战应用与进阶

掌握深度学习利器——TensorFlow 2.x实战应用与进阶

掌握深度学习利器——TensorFlow 2.x实战应用与进阶 摘要&#xff1a;随着人工智能技术的飞速发展&#xff0c;深度学习已成为当下最热门的领域之一。作为深度学习领域的重要工具&#xff0c;TensorFlow 2.x 备受关注。本文将通过介绍TensorFlow 2.x的基本概念和特性&#xff…
阅读更多...
蓝桥杯每日一题2023.11.18

蓝桥杯每日一题2023.11.18

题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 本题使用搜索&#xff0c;将每一个格子进行初始赋值方便确定是否为相邻的数&#xff0c;将空出的两个格子首先当作已经填好数值为100&#xff0c;此时从第一个格子右边的格子开始搜索&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023