[JavaScript知识库] 前端笔记3

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端笔记3 -> 正文阅读

[JavaScript知识库]前端笔记3

1.css定义

CSS是一个层叠样式表，为网页的每一层设置元素的样式。

2.修改样式方法

●内联样式/行内样式：在标签内部通过style属性设置元素样式。

如<p style=”color:red;font-size:20px;”></p>>

问题：样式只能对一个标签生效。如果希望影响多个元素，必须在每个元素中复制一遍，并且当样式发生变化时必须要一个一个修改，非常不方便。

●内部样式表：将样式编写到head的style标签里，然后通过css的选择器来选中元素并为之设置各种样式，可同时为多个标签设置样式，修改时改一处可全部应用，更方便对样式重复使用。

问题：内部样式表只能对一个网页起作用，它里边的样式不能跨页面重复使用。

如p{color:green;font-size:50px;};

●外部样式表：将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件。

优点：其可在不同页面之间重复使用，并且由于使用到浏览器的缓存机制可以加快网页加载速度，提高用户的体验。

如：在外部创建一个1.css页面：

<style>

P{color:green;font-size:50px;}

</style>

然后在想添加这个css的页面的<head>中加<link rel=”stylesheet”?href=”1.css”>。

注意：■style标签内的区域与html隔离。

? ? ? ? ? ?■css中的注释为/**/,其内容会被浏览器自动忽略。

3.css的基本语法

css基本语法：选择器 ?声明块

选择器：通过选择器可以选中页面指定元素。

声明块：指定要为元素设置的样式，由一个一个声明组成，为一个名值对结构，一个样式名对应一个样式值，名与值之间以：连接，以；结尾。

4.常见选择器

●元素选择器

作用：根据标签名来选择指定的元素。

语法：标签名{}

例：p{} 、h{}、div{}。

●id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

例子：#box{} #red{}

●类选择器（class选择器）

作用：根据元素的class属性值选中一组元素

语法：.class属性值{}

例：.box{}

注意：class是一个标签的属性，与id相似，不同的是class可重复使用，可以通过class属性为元素分组，可同时为一个元素指定多个class属性（多个class属性值之间空格隔开）

例：<head>

<style>

.blue{color:blue;}

.abc{font-size:20px;}

</style>

</head>

<body>

</body>

●通配选择器

作用：选中页面所有元素

语法：*{ }

例：*{ color：blue}

●复合选择器

? ? ? ■交集选择器

? ? ? ? 作用：选中同时符合多个条件的元素

? ? ? ? 语法：选择器1 ?选择器2 选择器3 选择器n{ }

? ? ? ? ?注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头。

? ? ? ?■分组（并集）选择器

? ? ? ? ? 作用：同时选择多个选择器对应的元素

? ? ? ? ? ?语法：选择器1，选择器2，选择器3，选择器n{ }

●关系选择器

? ? ? ? ? ?■子元素选择器

? ? ? ? ? ? ?作用：选中指定父元素的子元素

? ? ? ? ? ? ? 语法：父元素>子元素

? ? ? ? ? ? ?■后代元素选择器

? ? ? ? ? ? ? ? 作用：选中指定的元素内的指定后代元素

? ? ? ? ? ? ? ? 语法：祖先 ?后代

? ? ? ? ? ? ? ■相邻选择器（下一个）

? ? ? ? ? ? ? 语法：a+b

? ? ? ? ? ? ? ?作用：选择紧跟a后的b元素

? ? ? ? ? ? ? 兄弟选择器（所有弟）

? ? ? ? ? ? 语法：兄~弟

? ? ? ? ? ? 作用：选择兄后面所有弟元素

●属性选择器

? ? ■[属性名] 选择含有指定属性的元素

? ? ■[属性名=属性值]选择含有指定属性和属性值的元素

? ? ■[属性名^=属性值]选择属性值以指定值开头的元素

? ? ■[属性名 $=属性值]选择属性值以指定值结尾的元素

? ?■[属性名*=属性值]选择含有该属性和该属性值中指定值的元素

●伪类选择器

■伪类：描述一个元素特殊状态，如第一个子元素、被点击的元素等。

一般情况下使用：开头。

：first-child：第一个子元素

：last-child：最后一个子元素

：nth-child（）：选中第n个元素

特殊值：n为第n个，范围：0到正无穷

2n或even表示选中偶数位的元素

2n+1或odd表示选中奇数位的元素

以上这些伪类都是根据所有子元素进行排序所得。

：first-of-type

: last-of-type

:nth-of-type( )

这几个伪类的功能与上述的相似，不同点是这是在同类元素中的排序。

:not（）：否定伪类,将符合括号条件的元素从选择器中去除。

a元素的伪类

：link ?表示没访问过的链接（正常的链接）

：visited ?表示访问过的链接，只能修改链接的颜色

：hover ?表示鼠标移入的状态

：active ?表示鼠标点击

■伪元素

伪元素表示页面中一些特殊的并不真实存在的元素（特殊的位置）

伪元素用：：开头

：：first-letter 表示第一个字母

：：first-line 表示第一行

：：selection 表示选中的内容

：：before 元素的开始

：：after ?元素的最后

（：：before与：：after必须与content属性一起使用）

如div：：before{ content:’abc’;color:red;}

5.继承

定义：为一个元素设置的样式会自动应用到它的后代。

继承是发生在祖先与后代间的。

优点：只需设置一次即可让所有元素都具有该样式。

注意：并不是所有样式都会被继承，比如与背景相关的、布局相关等这些样式都不会被继承。

6.选择器的权重

通过不同的选择器选中相同的元素并为相同的样式设置不同值时会发生样式的冲突。此时，应用到哪个样式由选择器的权重（优先级）决定。

选择器的权重

内联样式 ?1，0，0，0

id选择器? ?0，1，0，0

类和伪选择器 0，0，1，0

元素选择器? ? 0，0，0，1

通配选择器? ?0，0，0，0

继承的样式? ?没有优先级

比较优先级时需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），且选择器的累加不会超过最大的数量级，类选择器再高也不会超过id选择器。如果优先级计算后相同，此时则优先使用靠下的样式。

可以在一个样式的后边添加limportant，则此时该样式会超过内联样式。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-01-30 18:50:47 更:2022-01-30 18:50:53

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 13:36:49-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码