CSS的初步学习

我不是女神ヾ 2024-02-18 09:12 27阅读 0赞

![fly0213][]

## CSS ##

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

> CSS 就是 “东方四大邪术” 之化妆术

### CSS 基本语法规范: ###

选择器 + 若干属性声明

*  选择器决定针对谁修改 (找谁)
 *  声明决定修改啥 (干啥)
 *  声明的属性是键值对. 使用: 区分键值对和键和值.

示例代码  
![image-20231110170843601][]

> `p`是一个选择器,选择页面所有的`P`标签.  
> `{ }`\{\}里面的CSS属性,是可以写一个或者多个.每个属性都是一个键值对.  
> 键和值之间使用`:`分割, 键值对之间使用 `;`分割.  
> 每个键值对可以独占一行,也可以不独占.

运行效果

![image-20231110170757535][]

--------------------

### 三种写 CSS 的方式 ###

1.**内部样式**: 使用 style 标签,直接把CSS写到 html文件中的.  
此时的 style 标签可以放到任何位置,一般建议放到 head标签里.  
注: 上面写的代码就是这种方式.

--------------------

2.**内联样式:** 使用 style 属性,针对指定的元素设置样式.  
(此时不需要写选择器,直接写属性键值对),这个时候样式只是针对当前元素生效.

示例代码  
![image-20231110172755269][]

运行效果

![image-20231110172614238][]

--------------------

3.**外部样式:** 把 css 代码单独作为一个.css文件,再通过 link 属性,让 html 引入该 css文件.

> 实际开发中,一般都是使用外部样式来写CSS.让html和css分离开,从而互不影响.

css 文件

![image-20231110184900975][]

html 代码

![image-20231110184955834][]

运行效果  
![image-20231110185157750][]

--------------------

### CSS 选择器 ###

#### 1.标签选择器 ####

> 在 `{`前面写标签名字,此时意味着会选中当前页面中所有的指定标签.

示例代码  
![image-20231110215759330][]

运行效果

![image-20231110220022398][]

--------------------

#### 2.类选择器 ####

> 相比于标签选择器,是更好的选择.可以创建CSS类,手动指定哪些元素应用这个类.  
> 注: 此处所说的类,和 Java 中的面向对象的类无关! CSS的所谓的"类"就是把一组CSS属性起了个名字,方便别的地方引用.

示例代码  
![image-20231110230424358][]

> 注意事项:  
> 定义类,需要使用`.`开头`.`引用这个类的时候,通过 class 属性 = “类名” 即可,不需要带`.`

运行效果  
![image-20231110230552692][]

--------------------

示例代码2

> 一个类,可以被一个元素引用,也可以被多个元素引用.  
> 一个元素可以引用一个类,也可以引用多个类.

![image-20231110232158833][]

运行效果  
![image-20231110232229348][]

**通过该例子来理解层叠**

> CSS 中文名: 层叠样式表. 一个元素,是可以被应用多组样式的,这些样式就好像一层一层的叠加上去的

![image-20231110234215807][]

#### 3.ID选择器 ####

> html页面中的每个元素,都是可以设置一个唯一的id的,作为元素的身份标识.给元素安排id之后,就可以通过id来选中对应的元素了.

注: 类选择器,是可以让多个元素应用同一个类的.id选择器,则只能针对唯一的元素生效,因为一个页面里,只能有唯一的id.

示例代码  
![image-20231111002226429][]

运行效果  
![image-20231111002348593][]

--------------------

#### 4.后代选择器 ####

> 上面三个选择器,都属于,简单的基础选择器.除此之外, CSS还支持一些更复杂一点的,  
> 复合选择器就是把前面的基础选择器组合一下.  
> 后代选择器是一个非常典型复合选择器.

后代选择器,把多个简单的基础选择器,组合一下(可以是标签,类, id选择器的任意组合).

标签选择器间的任意组合  
示例代码  
![image-20231111003420656][]

> `ul li` 含义就是: 先找页面中所有的`ul`, 然后在这些ul里再找所有的`li`.  
> 注: `li`只要是`ul`的后代即可,包含子元素,孙子元素,重孙子元素……不一定非得是"子元素".

运行效果  
![image-20231111003614630][]

类和标签选择器的任意组合

示例代码  
![image-20231111162259016][]

运行效果  
![image-20231111164444586][]

#### 5.子选择器 ####

> 子选择器,也是把多个简单的基础选择器组合(标签,类,id选择器任意组合),只是找匹配的子元素,不找孙子元素之类的.

> 语法: `选择器1 > 选择器2 { 属性... }`  
> 例子: `.one a {}` 只在`.one`的子元素里面找`a`标签.

示例代码  
![image-20231111170615530][]

运行效果  
![image-20231111170652067][]

--------------------

#### 6.并集选择器 ####

> 语法: `选择器1,选择器2{ 属性... }` ~~ 多组选择器,应用了同样的样式

*  通过 逗号 分割等多个元素.
 *  表示同时选中元素 1 和 元素 2
 *  任何基础选择器都可以使用并集选择器.
 *  并集选择器建议竖着写. 每个选择器占一行(最后一个选择器不能加逗号).

示例代码  
![image-20231111180356888][]

运行效果  
![image-20231111180439908][]

--------------------

#### 7.伪类选择器 ####

~~ 复合选择器的特殊用法

前面的选择器都是选中某个元素,而伪类选择器选中某个元素的某个特定状态.

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

1)使用`:hover`的示例代码  
![image-20231111181722047][]

鼠标指针**没悬停**在上面的运行效果  
![image-20231111181919064][]鼠标指针**悬停**在上面的运行效果  
![image-20231111182113494][]

2)使用 `:hover`和`:active`的示例代码  
![image-20231111182810411][]

运行效果  
![image-20231111183346466][]

![image-20231111183358975][]

![image-20231111183429841][]

--------------------

### CSS 常用属性值 ###

> CSS常用属性.具体的样式的设置了.  
> 样式涵盖很多方面的内容,包括不限于大小,位置,颜色,形状,边距,边框,特殊滤镜,过渡效果,动画…  
> 注: 和样式相关的属性,非常多的,只需要知道一些常用的即可,其他的需要用到的时候去查资料就行.  
> 相关的参考文档链接: [CSS参考手册][CSS]

#### 1.设置字体家族 ####

> `font-family` ,当前使用哪种字体来显示.常见的字体: 微软雅黑,宋体,黑体,华文行楷(windows 上都自带了这些字体)……  
> 注: 这个属性指定的字体,要求必须要是系统已经安装了的,如果你要指定一些特殊的字体,系统上没有,则不能正确显示.  
> 这种情况一般是需要通过浏览器请求对应的服务器,获取到指定字体文件,才能设置.

示例代码  
![image-20231111194359276][]

运行效果  
![image-20231111194432434][]

--------------------

#### 2.设置字体大小 ####

> 浏览器的每个文字,可以视为是一个"方框",如果是英文阿拉伯数字,方框比较窄,如果是中文,一般就是一个正方形.  
> 设置`font-size: 20px`,文字框高度则是20px.  
> 注: 你实际观察/测得的文字尺寸一般是与设置的大小不一样,因为你的浏览器的缩放设置和显示器的缩放设置都会影响到文字的尺寸.

--------------------

#### 3.字体粗细 ####

> `font-weight`来设置字体粗细.  
> 实际设置值的时候,有两种典型的设置风格.  
> 1.使用单词  
> 2.使用数字

相关的语法介绍

![image-20231111200741532][]

示例代码

![image-20231111201029019][]

运行效果  
![image-20231111201103625][]

--------------------

#### 4.文字倾斜 ####

> `font-style`设置文字倾斜.  
> `i` ,`em` 让文字倾斜,这两个标签实际开发中,没什么用处.一个`div`标签就可以打天下,搭配CSS就几乎可以实现前面各种标签的效果,html很多功能相当于被CSS给架空了.

设置倾斜: `font-style: italic;`  
取消倾斜: `font-style: normal;`

示例代码  
![image-20231111202743622][]

运行效果  
![image-20231111202823665][]

--------------------

#### 5.文字颜色 ####

> `color`来设置文字颜色

计算机是如何表示颜色的

> 颜色就是不同波长(频率)的光.日常看到的很多光,都是混合成的.  
> 比如白光,就是红,绿,蓝,三原色等比例混合.  
> 计算机表示颜色,一种典型方式就是RGB的表示方式.  
> 前端中,给RGB各分配一个字节.每个字节的范围,0-255/OO-FF(计算机里的典型表示).  
> `color: rgb(111, 0, 255);`通过这三个分量不同比例的搭配,就可以调和出不同的颜色

![image-20231111203720193][]

[fly0213]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/ab1e594c2a1f44dcbb3fbccacbd5fb50.png
[image-20231110170843601]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/5b81c644494d4b28969e251c08c8651c.png
[image-20231110170757535]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/5af49834c3bc44d2812021253334e827.png
[image-20231110172755269]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/dd7be94f67c4453d8741e64edfc1000c.png
[image-20231110172614238]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/47c7c1bbdbc5434782c2ed88547f0913.png
[image-20231110184900975]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/f8e92d680bdc4b64b9afa320ae44992b.png
[image-20231110184955834]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/c2a141ef46194d7996f3b07bb58fa6fa.png
[image-20231110185157750]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d680932ee0d24abfb97559794ccb51de.png
[image-20231110215759330]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/6196268be0cc47c5b414029fd2b9e33e.png
[image-20231110220022398]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d4642503dafa416aa77b2d9a7178ed7e.png
[image-20231110230424358]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/008fbd4679c6459d88a8ce9d26a29564.png
[image-20231110230552692]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/9b8c7ad3a4c947699c3d6965bf617211.png
[image-20231110232158833]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d0141e4205dd405b916f1fc95d5ba887.png
[image-20231110232229348]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/89717b9b4f644b4eb51af4bf88ca8f0f.png
[image-20231110234215807]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/e8cc46e1be634791a99b41446a6a3360.png
[image-20231111002226429]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/1dfd5022c2f24131bfce07a0008664cb.png
[image-20231111002348593]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/a93afad957b54205a998c7dccc72e7d5.png
[image-20231111003420656]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/67c7dc0e5cd1401b97d740132aa9dbbb.png
[image-20231111003614630]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/b8c3b3de9557488fb4cad18c63ca5f86.png
[image-20231111162259016]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/c96dd392d5d846f0a33871405cb2c871.png
[image-20231111164444586]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/0f4ff8b5d3c741dba30e43b3a2cafc61.png
[image-20231111170615530]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/341ce9e1c96340149f522d71dfdcb86e.png
[image-20231111170652067]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/b6a0e54d448d4277b620a6a507a5902d.png
[image-20231111180356888]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/04b8000058e34694aede86e1f4b27a13.png
[image-20231111180439908]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/57c69c15696946f1ae28abbfb4c960b3.png
[image-20231111181722047]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/bea31039bbe94872af4309d3874d9d81.png
[image-20231111181919064]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/e763764e7f1a4c5b9c91c358f8e9547d.png
[image-20231111182113494]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/b6933d6cc76145fc9eec49983193a87c.png
[image-20231111182810411]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/28573c27285b4629bc02900a7a050228.png
[image-20231111183346466]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/1ee6c53397d24b88bb430f8ce58bc1af.png
[image-20231111183358975]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/0574394d5173434d94007abfac242662.png
[image-20231111183429841]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d73d01a12e8c45379bf2ae2c9eb6c548.png
[CSS]: https://www.w3school.com.cn/cssref/index.asp
[image-20231111194359276]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/1ef8d946eec441a9a8050123a3a26c6c.png
[image-20231111194432434]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/7f4b0885c7a6477599549e432684585b.png
[image-20231111200741532]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/4b6eb4844d3c42cea0a4fde8a3dad570.png
[image-20231111201029019]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/710460fb9c3c4dd49334e67b80362276.png
[image-20231111201103625]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/7eed38c0945e4503975bead4db2f9967.png
[image-20231111202743622]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/ec757c78dcdd48caba82acaae76d5087.png
[image-20231111202823665]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/8e63a63e68a046ca9bcf60e6f29a61b9.png
[image-20231111203720193]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/33c6e5c14d924cd39ed036e4e58206e2.png