前端剑法第二式————淬焰
金石砺身，赤焰淬魄，困燥褪去，幽玄寒锋，神兵天成
前端的学习总是繁多而细腻，需要去背诵记忆，不可好高骛远，眼高手低，切记切记
今日学习内容如下：
目录
网页
css -层叠样式表 -设置网页中元素的样式
css有三种书写方法
CSS的语法：
接下里讲的就是选择器了
常用选择器
1、标签选择器
2、id选择器
3、class选择器
4、全部选择器
复合选择器
交集选择器
并集选择器
关系选择器
父子选择器
后代选择器
兄弟选择器
元素之间的关系
属性选择器
伪类选择器
一 、伪类（不存在的类，特殊的类）
二、:not() 否定伪类
a元素的伪类选择器
1、:link 用来表示未访问过的链接（正常链接）
2、:visited 用来表示访问过的链接
3、:hover 用来表示鼠标移入的状态
4、:active 鼠标点击后的状态
伪元素选择器
样式的继承（继承祖先的资产）
选择器权重
jw+n：快速写n个汉字
网页
分成三个部分
结构，表现 （外在显示的样子），行为
结构就是html，即在html文件中的代码，大概由20个左右标签组成
表现即是css，是html表现在网页中内容的进一步修改美观
css -层叠样式表 -设置网页中元素的样式
网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的只有最上边的一层
css有三种书写方法
第一种书写方式：内联样式/行内样式（不推荐使用）
即在body里写style样式，如下
<body>
style="width: 200px; height: 100px; background-color: pink;"
<div ></div>
</body>
不推荐使用原因：
- 权重太高
- 结构和样式耦合
- 不方便修改
第二种书写方式：内部样式表（小的项目可以使用）
即在head里写style样式，与html的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>Document</title>
<style>
</style>
</head>
<body>
<div ></div>
</body>
</html>
不推荐写大项目原因
- 会导致html文件过长过多
- 不方便复用
第三种书写方式：外部样式表（推荐使用）
即另创建一个css文件，通过在html里link使得html与css链接，如下
<!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>Document</title>
<link rel="stylesheet" href="./1.css">
</head>
最推荐使用，初学者要多多习惯使用，后期全都是使用外部样式表写css
另注意，一般一个成熟的项目应有
css文件夹，img文件夹（图片素材），js文件夹（还没学）和我们代码的主体html，如下图
而css文件夹里需要至少三个css
index.css：主要样式表（即我们的主css，html中主要的样式都写里面）
base.css：公共样式表（每个页面都通用的样式）
reset.css：重置样式表（用于需要重置时设置的样式）
base.css与reset.css是用来补充index.css的，可以有效精简index.html的篇幅
CSS的语法：
选择器 {声明块}
声明块：名值对结构 样式名:样式值;
例：.box{ color:red}
选择器 声明块 样式值
接下里讲的就是选择器了
选择器是前端的基础中的基础，如果选择器学的不好，前端之路将寸步难行
常用选择器
1、标签选择器
语法：标签名{} 例：ul{}
即直接用标签名
2、id选择器
语法：#id属性值{} 例：#box{}
id=box
注意：id属性值不能以数字开头，不建议汉字，不能重复使用
一般只有大的区块用一下。
3、class选择器
语法：.class属性值{} 例：.box{}
class=box
最常用的选择器，文中无特殊需求基本上都用class选择器
4、全部选择器
语法：*{} 例：*{ margin：auto 0}；
即选中全部，通常css一开始设置或者在base.css中写
复合选择器
交集选择器
语法：选择器1选择器2选择器3{} 例：boxtexttop{}
中间没有空格，指选中同时含有这么多选择器的元素，类比数学中的交集
并集选择器
语法：选择器1,选择器2,选择器3···{} 例：box，text，top{}
中间逗号分开，指含有这些选择器的所有元素，类比数学中的并集
关系选择器
父子选择器
语法：父元素>子元素{} 例：a>b{}
a{ b{} }
指元素和下一级元素，用>连接
后代选择器
语法：祖先元素 后代元素{} 例：a b{}
a{ c{ b{} } }
指隔了不止一代的元素，用空格连接
兄弟选择器
下一个兄弟选择器
语法：兄+弟{} 例：a+b{}
a{}b{}
指选择紧贴的下一个兄弟，用+连接
后面兄弟选择器
语法：兄~弟{} 例：a~b{}
a{}b{}b{}b{}b{}
指选择后面所有的此类兄弟，用~连接
元素之间的关系
父子关系 直接包含与被包含的两者之间关系
祖先后代关系 直接或间接包含与被包含的两者间关系
兄弟关系 拥有共同的父元素
属性选择器
语法：[属性名]{} 选择含有指定属性的元素 例：[id]{color: red;}
[属性名=属性值]{} 选择含有指定属性和属性值的元素 例：[id=a]{color: red;}
[属性名^=属性值]{} 选择属性值以指定值开头的元素 例：[id^=a]{color: red;}
[属性名$=属性值]{} 选择属性值以指定值结尾的元素 例：[id$=a]{color: red;}
[属性名*=属性值]{} 选择属性值含有某值的元素 例：[id*=a]{color: red;}
适用于筛选特定元素
伪类选择器
一 、伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
-比如：第一个元素，被点击的元素，鼠标移入的元素···
-特点：一般请情况下，使用：开头
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值： n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
—以上这些伪类都是根据所有的子元素进行排序
注意：指的是在所有中去选，当第一个元素不是想要的元素时则选不中
1、:first-of-type 第一个子元素
2、:last-of-type 最后一个子元素
3、:nth-of-type() 选中第n个子元素
功能跟上面相似，
不同的是，这是在同类型的子元素中去选择
指的是在所有同类型元素中去选，不会选不中
二、:not() 否定伪类
-将符合条件的元素从选择器中去除 例： li:not(.l1){color: red;}
a元素的伪类选择器
即是鼠标悬停，点击，松开，移走的状态
1、:link 用来表示未访问过的链接（正常链接）
例 a:link {
color: red;
2、:visited 用来表示访问过的链接
由于隐私的原因，所以visited只能改颜色
例 a:visited {
color: grey;
}
注意:link与:visited只能a标签使用，而:hover与:active其他标签也可以
3、:hover 用来表示鼠标移入的状态
例 a:hover {
background-color: pink;
4、:active 鼠标点击后的状态
例 a:active{
background-color: indigo;
}
伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
before和after必须要结合content使用
例
div::first-letter{color: red;}
p::first-line{
background-color: #eee;
}
注意：伪元素选择器只适用于块元素
样式的继承（继承祖先的资产）
定义：为一个元素设置的样式，同时也会应用到它的后代元素上
优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式
注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承
span 的背景色是透明的，你给p设置了背景色，给p设置，透出来，就是这个色了
背景图片等，也都不会被继承
选择器权重
内联样式 1000
id选择器 100
类和伪类选择器/属性选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先级
!important 最高优先级
注意：
比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示
(并集选择器)分组选择器是单独计算的
如果优先级计算后相同，此时则优先使用靠下的样式
选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变
一般来说：选择器越具体，优先级越高
当你不知道是不是权重的问题时，可以在后面加一个!important来检查
但是!important 慎用
最后一个快捷键小技巧
jw+n：快速写n个汉字
前端剑法第二式————淬焰相关推荐
- 前端剑法第一式———砺锋
前端学习之旅漫长悠远,犹如千日磨剑一朝起,寒光乍现惊九州,故而需耐下性子苦学基础,多学多记多练,方可成功. 目录 常用标签 (h1 , p , hgroup , em与strong , q , br ...
- 前端剑法第三式————碎岩
忽而一剑金石碎,绿梢下,勿回首,天下无处不可游 今日学习内容 目录 长度单位 1:像素 px 2:百分比 % 3.em 4.rem 颜色单位: 字体样式 1:color ...
- 前端剑法第五式————平乱
清溪牧者宿云田,忽梦村林鸡鸣起, 佳影轩窗,心思潸然起 马嘶人吼惊怒起,何人? 一剑平乱四下寂 纵马疾行,少年意气志天涯 今日学习内容 目录 文档流(normal flow) 盒子模型 1:内容区(c ...
- 前端剑法第四式————御风
御扶摇而上者九万里,绝云气,负青天 风往矣,吾亦往矣 今日学习内容 目录 一,表格 1.table tr和td 2.合并单元格 rowspan和colspan 二,表格样式 表格单线边框border- ...
- vue中向数组去重_「前端剑指offer第3期」来，手写一下数组去重
数组去重一般来说就这么几种方法,理解代码,记住就好!Map.Set.reduce.filter~ 方法1 .Map 创建一个Map对象,把数组的值作为Map对象的索引,再获取所有的索引. const ...
- 8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问 物理像素.逻辑像素.CSS像素.PPI.设备像素比是什么? # 回答 物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点. 逻辑像素表示屏幕展示物体的视 ...
- background背景图片自适应_一侧定宽、一侧自适应，尽量多的方案实现？「前端剑指offer」...
# 问题 一侧定宽.一侧自适应,尽量多的方案实现. # 回答 有下面几种方案能实现一侧定宽一侧自适应. 使用flex布局,这也是目前主流方式.父容器设置display:flex,定宽字元素设置flex ...
- 首席新媒体黎想教程：活动运营主题策划，及前端玩法设计！
在落实和确定了活动后端策略,明确了活动发力点之后,下面我们就需要选择与后端策略匹配的活动玩法,并给到用户一个明确的主题了. 活动主题的价值,在于通过一句话来让用户知道活动是做什么才只是第一层需要达到的 ...
- 剑法三套，程序员也能挣大钱
1 引子 都说海阔凭鱼跃,又有多少鱼能跃出大海?都说天高任鸟飞,但真正能一飞冲天的,也不过是寥寥数鹰而已:在IT圈里流浪的程序员,当青春逝去.渐至而立之年时,又有多少人黯然退出?30岁,似乎宣告了程序 ...
最新文章
- 回归模型-线性回归算法
- integer比较_Java整数缓存Integer.valueOf(127)==Integer.valueOf(127)为True
- 项目实战---模拟亿邦动力网
- java泛型学习一：解惑继承
- ASP.NET Core 注册单例方案
- 【设计模式之美】＜Reading Notes＞抽象类与接口
- css transtion不生效_CSS中transition属性不起作用的原因及解决方法
- vba 自动排序_给VBA字典键值排序，并提取需要的数据
- 【window】git安装教程
- 快速幂运算 《挑战程序设计竞赛》
- delphi 获取操作系统版本_Ubuntu 20.04 LTS已可通过Windows 10应用商店获取
- 什么是python基础教程-python基础教程之python是什么？概念解析
- UJAM Virtual Guitarist SILK for mac(尼龙弦原声吉他)
- harmonyOS应用开发环境搭建
- Linux查看目录busy,linux umount 提示＂device is busy＂ 终极解决
- 问佛__如果浮躁了，静下来看看，慢慢体会下
- 小白看了也会选：数据分析的常见工具有哪些
- python爬虫——爬取小说
- 微信小程序初探【类微信UI聊天简单实现】
- ChatGPT辅助处理excel表格数据