【JavaEE】CSS

CSS

文章目录

    • CSS
      • 语法
      • 引入方式
        • 内部样式表
        • 行内样式表
        • 外部样式
      • 选择器
        • 基础选择器
          • 标签选择器
          • 类选择器
          • id选择器
          • 通配符选择器
        • 复合选择器
          • 后代选择器
          • 伪类选择器
            • 链接伪类选择器
      • 字体设置
        • 设置文本颜色
        • 粗细
        • 样式
        • 文本对齐
      • 背景
          • 背景颜色
          • 背景平铺
          • 背景尺寸
      • 圆角矩形
      • 元素显示模式
        • 块级元素
      • 盒模型
        • 内边距
        • 外边距
      • chrome调试工具
      • 案例
        • 广告版
        • 百度热搜

层叠样式表 (Cascading Style Sheets).

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

也就是控制页面展示效果

语法

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

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

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

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

引入方式

内部样式表

将css嵌套到html页面中

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

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

行内样式表

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>p{color: red;/* 这是注释 */}
</style>
<body><p>hello world</p><h1 style="color: blue; font-size: 80px;">你好</h1>
</body>
</html>

这个示例说明行内样式表的优先级比内部样式表的优先级高~

外部样式

实际开发中最常用的方式.

  1. 创建一个 css 文件.

  2. 使用 link 标签引入 css

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

选择器

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

  • 标签选择器

  • 类选择器

  • id 选择器

  • 通配符选择器

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

  • 后代选择器

  • 子选择器

  • 并集选择器

  • 伪类选择器

文档

基础选择器
标签选择器

特点:

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

  • 但是不能差异化选择

<style>
p {color: red;
}
div {color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>
类选择器

特点:

  • 差异化表示不同的标签

  • 可以让多个标签的都使用同一个标签.

<style>.blue {color: blue;}
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div>

可以多个类名，会叠加效果

id选择器

和类选择器类似.

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

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

  • html 的元素 id 不必带 #

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

通配符选择器

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

* {color: red;
}

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

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

不需要被页面结构调用

作用特点
标签选择器能选出所有相同的标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择，最灵活，最常用
id选择器能选出一个标签同一个id在一个HTML中只能出现一次
通配符选择器选择所有标签特殊情况使用
复合选择器

将基础的选择器进行组合

后代选择器

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

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

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

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

</head>
<!-- 将有序列表改成红色 -->
<style>/* 第一种方法： *//* ol li {color: red;} *//* 第二种方法 *//* .hobby li {color: red;} *//* 第三种方法 */
li a{color: red;
}
</style><body><ul><li>吃饭</li><li>吃饭</li><li>吃饭</li></ul><ol class="hobby"><li>吃饭</li><li>吃饭</li><li><a href="#">吃饭</a></li></ol>
</body></html>
伪类选择器

使用来定义元素状态的

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 需求：默认展示黑色当鼠标悬停到上卖弄的时候，此时展示红色当鼠标按下去但是鼠标没有弹起来此时展示绿色 --><style>a{color: black;}a:hover{color: red;}a:active{color: green;}input{color: blue;}input:hover{color: aqua;}input:active{color: yellow;}</style>
</head>
<body><a href="#">不跳转</a><br><input type="button"  value="按钮" name="" id="">
</body>
</html>
选择器作用注意事项
后代选择器选择后代元素可以是孙子元素
子选择器选择子元素只能选亲儿子，不能选孙儿子
并集选择器选择相同样式的元素代码重用
链接伪类选择器选择不同状态的链接a:hover
：focuse伪类选择器选择被选中的元素input:focus

字体设置

参考文档CSS 参考手册 (w3school.com.cn)

<style>div{font-family: '宋体';font-size: 80px;}</style>
设置文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
粗细

font-weight

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

样式

font-style

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

文本对齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{text-align: left;}h2{text-align: center;text-decoration: overline;}h3{text-align: right;text-decoration: line-through;}p{/* text-indent: 20px; */text-indent: 2em;text-decoration: underline;line-height: 200px;}a{text-decoration: none;}</style>
</head>
<body><h1>靠左</h1><h2>居中</h2><h3>靠右</h3><p>哥，别学了。我承认我被卷破防了，我再也不和你比学习了，我彻彻底底的被击败了，就像小丑一样落荒而逃，和你相比我的努力实在是太可笑了，没有意义的，我已经认识到了，无论我怎么努力也不可能超过你，就算我一天学25个小时也永远追不上你的进度，看着你的笔尖落在算草纸上，就好像刀尖划在我的自尊心上一样，我彻彻底底的被击败了，甚至没有一点还手的能力。就这样吧，我天生不是这块料，书已经出门的时候被我扔垃圾桶里了，面对天书一样的数学你谈笑间就的出答案而我抓耳挠腮憋红了脸只能说一句：这道题是不是应该…这么做？你无情的嘲笑把我的内心深处的自尊打的粉碎，是我错了一开始就错了，从我决定跟着你去图书馆偷偷看你学习的进度的时候就错了，妄图和你追求同样的进度就好比和霍金比赛跑步和科比直升机驾驶一样荒唐无稽。那就到此为止吧，再继续学就不礼貌了！你是未来之星，国家栋梁，是成语里面的学富五车，才高八斗，是都市小说里的城市之光，是俗语里的天秀之人，是粤语里的巴鸠撚闭，是武侠小说里的人中龙，是吾日三省吾身的自律者，是相亲节目里面的心动嘉宾，是自然界的丛林之王，是世间所有丑与恶的睡弃者，是世间所有美与好的创造者，一想到我与你这群优秀的人呼吸同一股空气，我就忍不住羞耻与自卑。再见，我去睡觉了。</p>
<a href="#">不跳转</a>
</body>
</html>

背景

背景颜色
background-color: [指定颜色]#####
背景平铺
background-repeat: [平铺方式]

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

背景尺寸
background-size: length|percentage|cover|contain；

圆角矩形

通过 border-radius 使边框带圆角效果.

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

border-radius: 10px 20px 30px 40px;
等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

元素显示模式

  • 块级元素
  • 行内元素
块级元素
h1 - h6
p
div
ul
ol
li

特点：

  • 独占一行

  • 高度, 宽度, 内外边距, 行高都可以控制.

  • 宽度默认是父级元素宽度的 100% (和父元素一样宽)

  • 是一个容器(盒子), 里面可以放行内和块级元素

<style>a{display: block;}</style>
</head>
<body><a href="#">链接1</a><a href="#">链接2</a>
</body>
</html>

盒模型

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<style>div{width: 200px;height: 100px;/* border-color: black;border-style: solid;border-width: 10px; */border: black solid 10px;box-sizing: border-box;}</style>
</head>
<body><div></div>
</body>
内边距

padding 设置内容和边框之间的距离.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

 <style>div{width: 200px;height: 100px;/* padding-left: 5px;padding-right: 5xp;padding-top: 5px;padding-bottom: 5px; */padding: 5px 5px 5px 5px;}</style>
</head>
<body><div>这是一个div</div>
</body>
</html>
外边距

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<style>div{border: solid green 5px;width: 200px;height: 100px;margin: auto;text-align: center;}</style>
</head>
<body><div>sasas</div><div>sasaa</div><div>aasas</div>
</body>
</html>

chrome调试工具

有两种方式可以打开 Chrome 调试工具

  • 直接按 F12 键

  • 鼠标右键页面 => 检查元素

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

案例

广告版
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 308px;height: 204px;border: #d8dad8 solid 2px;}.title{padding-left: 40px;border-bottom: 2px dotted #e8ebe8;}.item{font-size: 16px;flood-color: #898b76;padding-left: 25px;line-height: 28px;padding-top: 10px;}</style>
</head><body><div class="box"><div class="title">广告版</div><div class="content"><div class="item">赔钱清仓甩卖，全场一律一折</div><div class="item">赔钱清仓甩卖，全场一律一折</div><div class="item">赔钱清仓甩卖，全场一律一折</div><div class="item">赔钱清仓甩卖，全场一律一折</div></div></div>
</body></html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

百度热搜
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{color: blue;text-decoration: none;}a:hover{text-decoration: underline;}table{width: 536px;}.title .col-1{font-size: 20px;font-weight: bolder;}.col-1{width: 80%;text-align: left;}.col-2{width: 20%;text-align: center;}.icon{background-image: url(./刷新.png);width: 24px;height: 24px;background-size: 100% 100%;display: inline-block;vertical-align: bottom;}.content{font-size: 18px;line-height: 40px;}.content .col-1,.content.col-2{border-bottom: 2px solid #f3f3f3;}.num{font-size: 20px;color: #fffff3;}.first{background-color: #f54545;padding-right: 8px;}.second{background-color: #ff8547;padding-right: 8px;}.third{background-color: #ffac38;padding-right: 8px;}.other{background-color: #8eb9f5;padding-right: 8px;}</style>
</head>
<body><table cellspacing="0px"><th class="title col-1">百度热榜</th><th class="title col-2"><a href="#">换一换<span class="icon"></span></a></th><tr class="content"><td class="col-1"><span class="num first">1</span><a href="#">浙大回应不开除强奸犯学生</a></td><td class="col-2">474万</td>         </tr><tr class="content"><td class="col-1"><span class="second first">2</span><a href="#">浙大回应不开除强奸犯学生</a></td><td class="col-2">474万</td>         </tr><tr class="content"><td class="col-1"><span class="third first">3</span><a href="#">浙大回应不开除强奸犯学生</a></td><td class="col-2">474万</td>         </tr><tr class="content"><td class="col-1"><span class="other first">4</span><a href="#">浙大回应不开除强奸犯学生</a></td><td class="col-2">474万</td>         </tr></table>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

接下来会持续更新，敬请期待~

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

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

相关文章

Pikachu靶场——XXE 漏洞

Pikachu靶场——XXE 漏洞

文章目录 1. XXE1.1 查看系统文件内容1.2 查看PHP源代码1.3 查看开放端口1.4 探测内网主机 1. XXE 漏洞描述 XXE&#xff08;XML External Entity&#xff09;攻击是一种利用XML解析器漏洞的攻击。在这种攻击中&#xff0c;攻击者通过在XML文件中插入恶意实体来触发解析器加载…
阅读更多...
计算机图像处理-高斯滤波

计算机图像处理-高斯滤波

高斯滤波 高斯滤波是一种线性平滑滤波&#xff0c;适用于消除高斯噪声&#xff0c;广泛应用于图像处理的减噪过程。通俗的讲&#xff0c;高斯滤波就是对整幅图像进行加权平均的过程&#xff0c;每一个像素点的值&#xff0c;都由其本身和邻域内的其他像素值经过加权平均后得到…
阅读更多...
1340. 跳跃游戏 V；2039. 网络空闲的时刻；2767. 将字符串分割为最少的美丽子字符串

1340. 跳跃游戏 V；2039. 网络空闲的时刻；2767. 将字符串分割为最少的美丽子字符串

1340. 跳跃游戏 V 核心思想&#xff1a;动态规划记忆化搜索。定义dfs(i)&#xff0c;表示从i开始最多可以访问多少个下标&#xff0c;然后统计往左跳和往右边跳的最大值&#xff0c;思路其实比较简单&#xff0c;但是代码我感觉还是不太好想。 2039. 网络空闲的时刻 核心思想…
阅读更多...
W5100S_EVB_PICO快速入门之MQTT篇（十二）

W5100S_EVB_PICO快速入门之MQTT篇（十二）

目录 1. 前言 2. MQTT介绍 2.1 什么是mqtt&#xff1f; 2.2 特点 2.3 应用场景 2.4 MQTT协议实现方式 3. 硬件及接线方式 3.1 硬件准备 3.2 硬件介绍 3.3 接线图 4. 测试 4.1 MQTT测试流程图 4.2 相关代码 4.3 测试现象 5. 相关链接&#xff1a; 1. 前言 随着物…
阅读更多...
蓝桥等考Python组别十级002

蓝桥等考Python组别十级002

第一部分：选择题 1、Python L10 （15分） 已知s = Good Luck，下列说法正确的是（ ）。 s[0]对应的字符是os[2]对应的字符是os[-1]对应的字符是cs[4]对应的字符是L正确答案：B 2、Python L10 （15分） 运行下面程序，输入字符串“pencil”，输出的结果是
阅读更多...
vue下载在前端存放的pdf文件

vue下载在前端存放的pdf文件

vue下载在前端存放的pdf文件 注意&#xff0c;这里要在public文件夹中新建文件夹存放静态资源&#xff0c;不能在src文件夹中新建文件夹存放静态资源&#xff0c;因为public文件夹中的文件资源不会被npm run build打包编译。大家打包一下&#xff0c;就会发现 模板.pdf文件 是存…
阅读更多...
【C++入门指南】类和对象（上）

【C++入门指南】类和对象（上）

【C杂货店】类和对象&#xff08;上&#xff09; 一、面向过程和面向对象初步认识二、类的引入三、类的定义四、类的访问限定符及封装4.1 访问限定符4.2 封装 五、类的作用域六、类的实例化七、类对象模型7.1 类对象的存储规则7.2 例题7.3结构体内存对齐规则 八、this指针8.2 t…
阅读更多...
R语言对加载的数据归一化

R语言对加载的数据归一化

# 自定义归一化函数 custom_normalize <- function(x) {# 在这里编写你的归一化逻辑normalized <- (x - min(x)) / (max(x) - min(x))return(normalized) }# 加载CSV数据 data <- read.csv("your_data.csv", header TRUE)# 应用自定义归一化函数 data_scal…
阅读更多...
Spring Boot集成redis集群拓扑动态刷新

Spring Boot集成redis集群拓扑动态刷新

项目场景&#xff1a; Spring Boot集成Redis集群&#xff0c;使用lettuce连接Cluster集群实例。 问题描述 redis其中一个节点挂了之后&#xff0c;springboot集成redis集群配置信息没有及时刷新&#xff0c;出现读取操作报错。 java.lang.IllegalArgumentException: Connec…
阅读更多...
第 114 场 LeetCode 双周赛题解

第 114 场 LeetCode 双周赛题解

A 收集元素的最少操作次数 模拟: 反序遍历数组&#xff0c;用一个集合存当前遍历过的不超过 k k k 的正数 class Solution { public:int minOperations(vector<int> &nums, int k) {unordered_set<int> vis;int n nums.size();int i n - 1;for (;; i--) {if…
阅读更多...
CentOS 8开启bbr

CentOS 8开启bbr

CentOS 8 默认内核版本为 4.18.x&#xff0c;内核版本高于4.9 就可以直接开启 BBR&#xff0c;所以CentOS 8 启用BBR非常简单不需要再去升级内核。 开启bbr echo "net.core.default_qdiscfq" >> /etc/sysctl.conf echo "net.ipv4.tcp_congestion_contro…
阅读更多...
第8章 Spring（一）

第8章 Spring（一）

8.1 Spring是什么？为什么要用它 难度：★★★★ 重点：★★★★ 白话解析 Spring目前是Java技术体系中最核心的框架，没有之一，不管是SpringBoot也好还是SpringCloud，都是建立在Spring的基础之上的（这句话别不当回事，后面讲SpringBoot和SpringCloud的时候，你们就会真正理…
阅读更多...
[Framework] Android Binder 工作原理

[Framework] Android Binder 工作原理

Binder 是 Android 系统中主要的 IPC 通信方式&#xff0c;其性能非常优异。但是包括我在内的很多开发者都对它望而却步&#xff0c;确实比较难&#xff0c;每次都是看了忘&#xff0c;忘了看&#xff0c;但是随着工作的时间约来越长&#xff0c;每次看也都对 Binder 有新的认识…
阅读更多...
蓝桥等考Python组别十级008

蓝桥等考Python组别十级008

第一部分：选择题 1、Python L10 （15分） 已知s = Python，下列说法正确的是（ ）。 s[0]对应的字符是Ps[2]对应的字符是Ps[-1]对应的字符是os[4]对应的字符是h正确答案：A 2、Python L10 （15分） 运行下面程序，输入字符串“classroom”，输出的结果是（ ）。
阅读更多...
使用自功率谱、互功率谱估计滤波器幅频特性

使用自功率谱、互功率谱估计滤波器幅频特性

这段时间终于对工程中的随机信号的一般处理方式有点头绪了&#xff0c;功率谱密度估计是十分重要的方式之一&#xff0c;仍需继续深入细化相关内容。 示例&#xff1a;使用自功率谱、互功率谱估计滤波器幅频特性&#xff0c;自己实现 & Matlab自带函数实现。 clc;clear;cl…
阅读更多...
HTML之如何下载网页中的音频(二)

HTML之如何下载网页中的音频(二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
毅速课堂：3D打印随形水路设计应注意什么？

毅速课堂：3D打印随形水路设计应注意什么？

随形水路是一种基于3D打印技术的新型模具冷却水路&#xff0c;能有效提高冷却效率、缩短冷却周期、提升产品良率、提高生产效率、 与传统的水路设计相比&#xff0c;随形水路更加贴合模具型腔表面&#xff0c;能够更加均匀地分配冷却水&#xff0c;使模具各部分的冷却效果得到有…
阅读更多...
系统集成|第二十一章(笔记)

系统集成|第二十一章(笔记)

目录 第二十一章 知识产权与法律法规21.1 知识产权21.2 法律法规 上篇&#xff1a;第二十章、收尾管理 第二十一章 知识产权与法律法规 21.1 知识产权 概述&#xff1a;狭义的知识产权就是传统意义上的知识产权&#xff0c;包括著作权&#xff08;含邻接权&#xff09;&#x…
阅读更多...
【IPC 通信】信号处理接口 Signal API（7）

【IPC 通信】信号处理接口 Signal API（7）

收发信号思想是 Linux 程序设计特性之一&#xff0c;一个信号可以认为是一种软中断&#xff0c;通过用来向进程通知异步事件。 本文讲述的 信号处理内容源自 Linux man。本文主要对各 API 进行详细介绍&#xff0c;从而更好的理解信号编程。 exit(5) 遵循 C11&#xff0c; POSI…
阅读更多...
生产者、消费者问题

生产者、消费者问题

线程六个状态&#xff1a; public enum State {/*** 新生*/NEW,/*** 运行*/RUNNABLE,/***阻塞*/BLOCKED,/*** 等待*/WAITING,/*** 超时等待*/TIMED_WAITING,/**死亡**/TERMINATED;} synchronized和lock的区别 1、synchronized是关键字&#xff0c;lock是类 2、synchronized全自…
阅读更多...
最新文章

Copyright @ 2022~2023