前端-CSS (样式引入、选择器）

文章目录

    • 大纲
    • 前端三大件
    • 常用样式
    • 颜色
    • px:像素
    • 1.CSS三种引入方式
      • 1.1 行内样式
      • 1.2 页内样式
      • 1.3 引入外部样式表文件（常见）
    • 基础选择器
      • 1. 标记选择器
      • 2. id选择器
      • 3. 类选择器 最常用
      • 4 * 选择器 使用频率较低
    • 复合选择器
    • 伪类选择器
      • 1.超链接伪类：
      • 2.子元素伪类：使用`:`
      • 3.伪元素选择器 使用`：：`

大纲

前端三大件：无竞品，极简。
html：框架结构。
css：负责样式修饰。
js：行为交互，动画效果。

CSS：层叠样式表 Cascade Style Sheet
1.css的3种引入方式。
1.1 行内样式。写在标记之中。使用style属性。 color: red; 样式名:样式值; 样式之间无顺序。 缺点：仅能修饰当前所在标记。

1.2 页内样式。 选择器。用来选择修饰的目标元素。 缺点：仅能修饰当前页。

1.3 引入外部样式表文件 引入外部样式表文件。

基础选择器：
1.标记选择器。
2.id选择器。
3.类选择器。频率最高。
4.星号选择器。频率较底。

复合选择器：高级选择器。将基础选择器组合使用。
1.子代选择器：a>b
2.后代选择器：a b
3.兄弟选择器：a+b 紧邻弟 a~b 所有弟
4.交集选择器：ab，注意不要产生歧义
5.并集选择器：a,b

伪类选择器：
1.超链接伪类：爱恨准则。love hate :hover 对一切标记生效。

2.子元素伪类： :first-child，:last-child，:nth-child

3.伪元素选择器 ::before ::after

常用样式：
1.color：前景色
2.font-weight：字重
3.font-size：字号
4.background-color：背景色
5.width和height
6.font-family
7.text-decoration:
8.text-align: center
9.border-radius：边框圆角
10.list-style
11.border

px：像素
物理像素：25601440
逻辑像素：800600

颜色
1.英文单词。
2.rgb表示法。Red Green Blue三原色。255^3。
3.rgb表示法的16进制写法。#ab00c3
4.简写的16进制表示法。如果每两位相同，则可简写成一位。

前端三大件

无竞品，极简

html:框架结构

css:负责样式修饰

js:行为交互，动画效果

常用样式

中横线命名法

1.color：前景色
font-weight:字重
3.font-size:字号，比如10px(最小是10px,px指的是逻辑像素，是相对单位，不同电脑的1px像素不一定一样大)
background-color:背景色
width 宽度
height 高度
font-family 指定文本的字体
text-decoration 控制文本的装饰效果，如下划线、删除线、上划线等
text-align:center 用来控制文本的水平对齐
border-radius 用来设置元素的圆角效果
list-style：控制列表项的符号类型和位置等样式
border：控制元素的边框样式、宽度和颜色

颜色

1、英文单词

background-color: red;

2、RGB表示法：分别是红绿蓝三原色（显示屏），255^3
在这里插入图片描述

background-color: rgb(255, 255, 255);

3、rgb表示法的16进制写法。#ab00c3

#ab00c3 是一种 十六进制颜色值，它表示一种特定的颜色。

#ab00c3 中的每一对字符代表颜色的 红色、绿色 和 蓝色 分量（RGB）。
ab：红色（Red）通道的值，十六进制 ab 转换为十进制是 171。
00：绿色（Green）通道的值，十六进制 00 转换为十进制是 0。
c3：蓝色（Blue）通道的值，十六进制 c3 转换为十进制是 195。
结果：
红色通道：171（较高的红色强度）
绿色通道：0（没有绿色）
蓝色通道：195（较高的蓝色强度）
这意味着 #ab00c3 是一种 紫色偏蓝 的颜色，带有较强的蓝色和红色成分。可视化：
这种颜色大致是 紫色，带有较深的蓝紫色调。

background-color: #ab00c3;

4.简写的16进制表示法。如果每两位相同，则可简写成一位。

比如红色：

background-color: #f00;

px:像素

物理像素：真实的发光点一共多少个。
逻辑像素：类似缩放，把几个物理像素合在一起。

1.CSS三种引入方式

1.1 行内样式

行内样式，写在标记之中。使用style属性。

color:red 样式名：样式值 样式之间无顺序。

行内样式缺点：仅能修饰当前所在标记。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内样式</title>
</head>
<body><h1 style="color:red;font-size:26px;font-weight: normal">大家早上好</h1>
</body>
</html>

1.2 页内样式

页内样式缺点：仅能修饰当前页

写在当前页面的<head></head>标签最下面：<style> </style>标记里面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页内样式</title><style>h1{font-style: italic;}#h1 {background-color: blue;}#a2{background-color:pink;}.f32{font-size: 32px;}*{background-color: pink;}</style>
</head>
<body><h1>大家早上好</h1><h1 class="f32">你</h1><h1 id="h1">好</h1><h2>他</h2><a id="a2" href="#">我是超链接</a><p class="f32">这是一个段落</p>
</body>
</html>

1.3 引入外部样式表文件（常见）

使用link属性引入外部样式表文件。

<link rel="stylesheet" href="路径">

在外部的css文件里面单独修饰

在这里插入图片描述

样式表.css:

@charset "utf-8";#mydiv {width: 100px;background-color: pink;text-align: center;
}.outer {height: 100px;text-decoration: line-through;font-family: "宋体";
}#mydiv>.inner{background-color: gold;width: 100px;height: 100px;border-radius: 10px;
}.inner li{text-decoration: none;font-family: "微软雅黑";list-style: circle;
}

引入外部样式表.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="css/样式表.css">
</head>
<body><div id="mydiv" class="outer">你好今天天气好<div class="inner"><ul><li>111111</li><li class="ctr">222222222222</li><li>33333333</li></ul></div></div>
</body>
</html>

基础选择器

选择器。用来选择修饰的目标元素

1. 标记选择器

h1{
}

选择页面中所有h1标记

2. id选择器

<h1 id="ni">你</h1> 赋予一个id，在style里：

即设置id值，使用的时候：#id值

  #ni{background-color: blue;}

得到id为ni的标记被设置背景色为蓝色

3. 类选择器 最常用

设置class值，使用的时候：.class值

  <h1 class="f32">你</h1>

  <p class="f32">这是段落</p>

class表示同一类,所有的标签都有class属性在style里写：

 .f32{font-size: 32px;}

4 * 选择器 使用频率较低

*：全选，当前页面的全部标签全被选中，包括<boday></boday>

在style里面：

 *{background-color: pink;}

上述全部的整体应用代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页内样式</title><style>h1{/* 斜体 */font-style: italic;}#h1 {background-color: blue;}#a2{background-color:pink;}.f32{font-size: 32px;}*{background-color: pink;}</style>
</head>
<body><h1>大家早上好</h1><h1 class="f32">你</h1><h1 id="h1">好</h1><h2>他</h2><a id="a2" href="#">我是超链接</a><p class="f32">这是一个段落</p>
</body>
</html>

复合选择器

复合选择器：高级选择器。将基础选择器组合使用

1.子代选择器：a>b选中a下面的b元素，两个选择器的组合,其中a是一个选择器,b是一个选择器

在这里插入图片描述

上述中是父子关系，选用子代选择器，id选择器的使用是#id值，class选择器的使用是.class值

#mydiv>.inner{background-color: gold;width: 100px;height: 100px;border-radius: 10px;
}

2.后代选择器a b 即a空格b

在这里插入图片描述

想选中的这个部分是inner的后代，不是子代（中间还有ul)

.inner li{text-decoration: none;font-family: "微软雅黑";list-style: circle;
}

3.兄弟选择器a+b紧邻弟（只能选紧邻的弟），选中的是弟 a~b选中的是所有弟

平级的才有兄弟

/* 兄弟选择器 */
.td4+td{font-size: 40px;
}

4.交集选择器ab 注意不要让浏览器产生歧义

比如想选中class是ctr的td

在这里插入图片描述

/* 交集选择器，不能让浏览器产生歧义 */
td.ctr{color: blue;background-color: rgb(255, 255, 255);
}

5.并集（或）选择器a,b

在这里插入图片描述

/* 并集选择器 */
.ctr,div{background-color: greenyellow;}

意思是选中所有的.ctr和div都设置成指定颜色。同时选中多个

伪类选择器

（知道点就行）

1.超链接伪类：

爱恨准则。love hate

:hover

对一切标记生效。

记住:hover即可，只有：hover对一切标记生效，其他的只对超链接标记生效。

代码例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>/* 下面四个伪类从（交集选择器）上往下优先级越来越高 *//* 默认状态 */#a1:link{color:red;}/* 访问过后 */#a1:visited{background-color: aqua;}/* 鼠标滑过,用的多 */#a1:hover{color: blue;/* text-decoration: line-through;border: 1px dotted black;font-size: 30px; */}/* 激活态(不同浏览器认为的激活不一样，比如按下就是激活) */#a1:active{background-color: pink;}</style>
</head>
<body><a id="a1"  href="#">去百度</a>
</body>
</html>

2.子元素伪类：使用:

:first-child
:last-child
:nth-child

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子元素伪类</title><style>/* 选择ul下的li且为第一个,字体设置成红色： */ul>li:first-child{color: red;}/* 选择ul下的li且为最后一个,字体设置成蓝色 */ul>li:last-child{color:blue;}/* 选中指定的某一个：从1开始的,比如选中第三个的3 ，设置成绿色字体*/ul>li:nth-child(3){color: green;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

效果图：

在这里插入图片描述

3.伪元素选择器 使用：：

::before

::after

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素选择器</title><style>/* 在第一个儿子前面加一个元素，比如加A ,在页面中可以呈现，但是鼠标放上去无法选中*/ul::before{content: "A";}/* 在最后一个儿子的后面加一个元素，比如加B ,在页面中可以呈现，但是鼠标放上去无法选中*/ul::after{content: "B";}/* 如果想在每一个li前加一个元素，比如在每个li前面加个*： */ul>li::before{content: "*";}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

演示结果：

在这里插入图片描述

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

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

相关文章

7月19日 台风“韦帕“强势逼近：一场与时间赛跑的防御战

7月19日 台风“韦帕“强势逼近：一场与时间赛跑的防御战

中央气象台7月19日10时继续发布台风黄色预警，今年第6号台风"韦帕"正以每小时20-25公里的速度向西偏北方向移动，强度逐渐加强。这个来自海洋的"不速之客"中心附近最大风力已达10级（25米/秒），预计将于20日下午至夜间在广东深圳到海南文昌一带沿海登陆，…
阅读更多...
学习 Python 爬虫需要哪些基础知识？

学习 Python 爬虫需要哪些基础知识？

学习 Python 爬虫需要掌握一些基础技术和概念。 1. Python 基础语法 这是最根本的前提&#xff0c;需要熟悉&#xff1a; - 变量、数据类型&#xff08;字符串、列表、字典等&#xff09; - 条件判断、循环语句 - 函数、类与对象 - 模块和包的使用&#xff08;如 import 语…
阅读更多...
IELTS 阅读C15-Test 2-Passage 2

IELTS 阅读C15-Test 2-Passage 2

继续雅思上分实验。这次正确率是10/13&#xff0c;还是挺让我吃惊的&#xff0c;因为我又没有完全读懂&#xff01; 题型1-填空题这道题目很简单&#xff0c;同样地去原文段落里找就好&#xff0c;最后一个空填错了是因为我不知道mitigate就是decrease同义词。 题型2-人物匹配题…
阅读更多...
7.18 Java基础 |

7.18 Java基础 |

以下内容&#xff0c;参考Java 教程 | 菜鸟教程&#xff0c;下边是我边看边记的内容&#xff0c;以便后续复习使用。 多态&#xff1a; 继承&#xff0c;接口就是多态的具体体现方式。生物学上&#xff0c;生物体或物质可以具有许多不同的形式或者阶段。 多态分为运行时多态&…
阅读更多...
网络安全知识学习总结 Section 11

网络安全知识学习总结 Section 11

一、实验知识总结&#xff08;模拟&#xff09;等价路由配置实验并抓包分析按流分析实验拓扑图&#xff1a;AR1配置&#xff1a;<Huawei>sys [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip address 192.168.1.1 30 [Huawei-GigabitEthernet0/0/0]int g0/0/1 [Huaw…
阅读更多...
VBA 运用LISTBOX插件，选择多个选项，并将选中的选项回车录入当前选中的单元格

VBA 运用LISTBOX插件，选择多个选项，并将选中的选项回车录入当前选中的单元格

维护好数据&#xff0c;并新增一个activeX列表框插件Private Sub Worksheet_SelectionChange(ByVal Target As Range)If Target.Count > 1 Then Exit SubIf Target.Row > 2 And Target.Row < 10 And Target.Column 2 Then 选择操作范围With ListBox1.MultiSelect 1 …
阅读更多...
ASP .NET Core 8实现实时Web功能

ASP .NET Core 8实现实时Web功能

ASP.NET Core SignalR 是一个开放源代码库&#xff0c;可用于简化向应用添加实时 Web 功能。 实时 Web 功能使服务器端代码能够将内容推送到客户端。以下是 ASP.NET Core SignalR 的一些主要功能&#xff1a;自动处理连接管理同时向所有连接的客户端发送消息。 例如聊天室向特定…
阅读更多...
最新版谷歌浏览器 内网安装 pdf无法预览

最新版谷歌浏览器 内网安装 pdf无法预览

最新版谷歌浏览器 内网安装 pdf无法预览 谷歌下载地址 谷歌下载地址 不同的浏览器版本&#xff0c;兼容的js标准不一样 js标准也在不断升级&#xff0c;增加新的方法。
阅读更多...
NX二次开发常用函数坐标转化UF_MTX4_csys_to_csys和UF_MTX4_vec3_multipl

NX二次开发常用函数坐标转化UF_MTX4_csys_to_csys和UF_MTX4_vec3_multipl

一、UF_MTX4_csys_to_csys 1.1 函数名称 UF_MTX4_csys_to_csys1.2 函数中各参数解释&#xff1a;函数参数解释&#xff1a; 第1个参数为输入&#xff1a; 输入const double 双精度类型的参数&#xff0c;参数的变量格式为from_origin [ 3 ]&#xff0c;坐标系&#xff…
阅读更多...
JAVA中的Collections 类

JAVA中的Collections 类

文章目录前言一、 排序方法 sort() 和 reverseOrder()1. sort(List<T> list)2.sort(List<T> list, Comparator<? super T> c)二、查找方法 max(), min()1.max(Collection<? extends T> coll)2.min(Collection<? extends T> coll)3.max(Collec…
阅读更多...
统计学习方法

统计学习方法

一、统计学习方法步骤 得到一个有限的训练数据集合确定学习模型的集合-假设空间确定模型选择的准则-策略实现求解最优模型的算法-算法通过学习方法选择最优模型利用学习的最优模型对新数据进行预测或分析 二、统计学习方法分类 三、统计学习的基本分类&#xff08;监督学习&a…
阅读更多...
windows docker-01-desktop install windows10 + wls2 启用

windows docker-01-desktop install windows10 + wls2 启用

windows10 安装 docker 版本信息确认 需要区分 windows 是 amd64 还是 arm64 powershell 中执行&#xff1a; > echo $env:PROCESSOR_ARCHITECTURE AMD64下载 官方 https://www.docker.com/products/docker-desktop/ 下载 windows amd64 下载好了直接安装。 如何验证…
阅读更多...
Elasticsearch集群出现脑裂（Split-Brain）如何排查原因和处理？

Elasticsearch集群出现脑裂（Split-Brain）如何排查原因和处理？

Elasticsearch集群出现脑裂（Split-Brain）如何排查原因和处理？ 1. 脑裂（Split-Brain）背景 定义：脑裂是指 Elasticsearch 集群由于网络分区（network partition）或其他原因分裂成多个独立的子集群，每个子集群认为自己是主集群，导致不同的子集群可能独立处理请求，造成数…
阅读更多...
Apache Ignite 的 Pages Writes Throttling（页面写入节流）

Apache Ignite 的 Pages Writes Throttling（页面写入节流）

&#x1f31f; 一、什么是 Checkpointing&#xff08;检查点机制&#xff09;&#xff1f; 在 Apache Ignite 中&#xff1a; 数据是先保存在内存中&#xff08;RAM&#xff09;&#xff0c;然后异步写入磁盘。当数据被修改时&#xff0c;它首先被更新在内存中的“页”上&#…
阅读更多...
uni-app 学习笔记：使用深度选择器修改第三方库组件的样式

uni-app 学习笔记：使用深度选择器修改第三方库组件的样式

在uni-app中&#xff0c;深度选择器&#xff08;Deep Selector&#xff09;是一个非常重要的概念&#xff0c;它允许父组件穿透样式隔离&#xff0c;从而修改子组件的内部样式。1.什么是uni-app深度选择器深度选择器是一种CSS选择器&#xff0c;用于穿透组件的样式隔离机制&…
阅读更多...
物联网IOT平台到底是啥

物联网IOT平台到底是啥

物联网IOT平台&#xff1a;万物互联的智慧中枢清晨&#xff0c;智能闹钟轻柔唤醒你&#xff0c;咖啡机自动开始冲泡&#xff1b;离家时&#xff0c;空调自动关闭&#xff0c;安防摄像头启动&#xff1b;办公室内&#xff0c;生产线传感器实时回传设备状态&#xff0c;仓库管理系…
阅读更多...
MySQL详解二

MySQL详解二

MySQL详解二索引主键索引唯一索引普通索引组合索引全文索引主键选择约束索引实现B树聚集索引辅助索引索引存储innodb 体系结构最左匹配原则覆盖索引索引下推索引失效索引原则索引 数据库中的数据是以记录为单位的&#xff0c;如果一条一条进行查找&#xff0c;几十万数据就已经…
阅读更多...
深度学习中的模型剪枝工具Torch-Pruning的使用

深度学习中的模型剪枝工具Torch-Pruning的使用

Torch-Pruning(TP)是一个结构化剪枝框架&#xff0c;源码地址&#xff1a;https://github.com/VainF/Torch-Pruning&#xff0c;最新发布版本v1.6.0&#xff0c;License为MIT。 TP支持对各种深度神经网络进行结构化剪枝。与通过掩码将参数设置为零的torch.nn.utils.prune不同&a…
阅读更多...
力扣-121.买卖股票的最佳时机

力扣-121.买卖股票的最佳时机

121.买卖股票的最佳时机 class Solution {public int maxProfit(int[] prices) {int min prices[0];int max 0;for (int i 1; i < prices.length; i) {max Math.max(prices[i] - min, max);if (prices[i] < min) {min prices[i];}}return max;} }小结&#xff1a;贪…
阅读更多...
lvs原理及实战部署

lvs原理及实战部署

一、集群与分布式系统 1 集群 1-1概念 集群式架构是将多个相同或相似的节点组合在一起&#xff0c;形成一个逻辑上的 “整体”&#xff0c;对外提供统一的服务或资源。节点之间通常具有较高的同构性&#xff08;硬件、软件配置相似&#xff09;&#xff0c;且紧密协作。 1-2 三…
阅读更多...
最新文章

Copyright @ 2022~2023