CSS入门

迈不过友情╰ 2022-05-09 05:56 143阅读 0赞

#                                   第一章 CSS介绍与div效果演示 #

## 1.1 CSS介绍 ##

CSS指层叠样式表，样式定义如何显示HTML元素，样式通常存储在样式表中，把样式加到html4.0中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在CSS文件中，多个样式定义可层叠为一。

## 1.2 div效果演示 ##

div它是一个html标签，一个块级元素（单独显示一行），它单独使用没有任何意义，必须结合CSS来使用，***主要用于页面的布局。***

![70][]![70 1][]

当再style中进行了大小配置之后

![70 2][]

![70 3][]

如果不指定大小的话，边框还是会将内容包裹住

![70 4][]

如果里面没有内容，边框将重合。

![70 5][]

span也是一个html标签，一个内联元素（显示一行）。单独使用没有任何意义，必须结合CSS来使用。它主要用于***对括起来的内容进行样式的修饰。***

![70 6][]

![70 7][]

#                                         第二章 CSS的使用 #

## 2.1 CSS的使用方式 ##

具体如下图，其中冒号与分号必须是英文的，分号的话前面的不能省，最后一个可以省，但是建议都写。

![70 8][]

## 2.2 CSS的引入方式 ##

1. 内部引入，type中如果是text/css的话，type可以省略。

![70 9][]

2. 行内引入

style是任何标签都具有的属性，如果要设置多个，记得用分号隔开。

![70 10][]

这时就发生了属性层叠，CSS设置样式的代码，谁近谁生效。

![70 11][]

3. 外部引入

在.css中直接写样式代码就好，不用写别的。

![70 12][]   ![70 13][]

最后通过link引入就可以了，stylesheet代表层叠样式表，href中的值代表引入的CSS样式表的名称

![70 14][]

## 2.2 CSS的选择器 ##

### 2.2.1 基本选择器 ###

1. 元素选择器

选择所有的div元素，并修改效果。

![70 15][]

2. 类选择器

前面加个点，然后后面写上类的名字即可。一般是用在部分元素的样式设置上。

![70 16][]

3. id选择器

前面写上\#号，然后加上对应的id属性值即可。一般用在单个的设置。但是写两个一样的id值也能实现效果，如下下图，但是不推荐这样。

![70 17][]

![70 18][]

### 2.2.2 其它选择器 ###

1.  层级选择器

有些情况不能直接用标签，可以选择层级

![70 19][]

![70 20][]

2. 属性选择器

首先写标签名称，然后写属性与属性的值，属性的值用单引号括起来

![70 21][]

## 2.3 CSS浮动 ##

我们都知道div标签会独占一行，我们要想让不同的div标签占一行的话，我们就要用到CSS的浮动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

使用浮动的话必须要设置float属性值。

页面代码：

![70 22][]

情况一：碰到外边缘

向右浮动：

![70 23][]

![70 24][]

向左浮动：

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。下图便是重合了。

***注意div不在同一级时没有影响。***

![70 25][]

![70 26][]

情况二：碰到另一个浮动框

![70 27][]

![70 28][]

若宽度不够用会挤到下面去

![70 29][]

若框1的高度高了还会卡住

![70 30][]

清除浮动：

在浮动的下面清除浮动，便会取消浮动对下面的元素带来的影响。

![70 31][]

![70 32][]

## 2.4 CSS盒子模型 ##

boder其实就是div的边框，padding就是div中的内容与div边框的距离，div与其它div的距离就是margin。

![70 33][]

多个盒子即div在一起的情况

![70 34][]

取值问题：

默认情况，padding、margin、border都是零，假如我们设置了区域内容的width和height，那么此时整个元素框即div即content的总尺寸就是该区域内容的宽高了，此时，如果设定了margin值，那么整合元素框的总尺寸会发生变化（变大了），如果我们希望整体布局不发生变化，那么我们可以修改区域尺寸的内容（原大小减去设定的margin值）。

假如我直接设置高为100px，那么初始的元素大小的值就是100px了，如果我们再设置margin的大小，比如设置了margin的值为10，那么元素的大小就变为了120px，如果我们想让本来的大小还是100px，那么我们可以将div的尺寸设置为80px。

![70 35][]

如果直接设置padding：10px的话，代表上右下左都设置，如果设置两个值的话代表上右一个值，下左一个值。

如果要设置div外面的，要设置margin。

两个问题待更新：

1. div浮动时左右顺序是如何决定的。

2. 如果设置div边框里面的内容与边框的距离，使用margin是否可以。

[70]: https://img-blog.csdn.net/20181002163723420?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220509/e01b39e269324519b33870a632b5148b.png
[70 2]: /images/20220509/e287547d059040d8b699b5b521a5fc57.png
[70 3]: /images/20220509/2a20c2aca0b34b1db2743a47c86723fa.png
[70 4]: /images/20220509/e430f62287cf45258a642a5683f9e0e2.png
[70 5]: /images/20220509/9320bc8e0cac44dbba041a55749f1743.png
[70 6]: /images/20220509/048eb9f663504c53a3c76b93cddc69c6.png
[70 7]: /images/20220509/9f9e9b8976ee45b3ab126d6704353f23.png
[70 8]: /images/20220509/c34f96abf8fc494994dedebb54dae8d2.png
[70 9]: /images/20220509/8d9ce2dca60e41c7a3b77c6c41642001.png
[70 10]: /images/20220509/f196267500224b169b240852ecfd689b.png
[70 11]: /images/20220509/1b413f7ece3a4f78b04ef31c4881ac1a.png
[70 12]: https://img-blog.csdn.net/20181002175201645?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 13]: /images/20220509/d798b08bac5a41efbbb414e68c89b018.png
[70 14]: /images/20220509/78632ff1d8664309a6b0f1aa3b19bf99.png
[70 15]: /images/20220509/3f0e1b4d63b6407c9928f9d8d9943f3a.png
[70 16]: /images/20220509/bc24c4a2a7a14b3f87fb222959443b1f.png
[70 17]: /images/20220509/5cd7be2e6cdb4a05bcca2a6ff4dbe3bb.png
[70 18]: /images/20220509/adc0282652554707b2d0c3bd091c5520.png
[70 19]: /images/20220509/75993cf6693a46048eb0d610c38bf807.png
[70 20]: /images/20220509/bb8e0e06f74344df99fc853ce3d1f790.png
[70 21]: /images/20220509/dd62436d64a346fa897d065a4a4cdde4.png
[70 22]: /images/20220509/978969db320c4143b39c842479795018.png
[70 23]: /images/20220509/0db1ca15e08c416aa82633517764ca50.png
[70 24]: /images/20220509/de22c6a807c941b89d59bae8204f4041.png
[70 25]: /images/20220509/01e660c624a640f6a325ea11926542e5.png
[70 26]: /images/20220509/f87580818af149f89648b35f90063e4b.png
[70 27]: /images/20220509/00659d15ae0042d7a95bf82808598ca4.png
[70 28]: /images/20220509/566bcc916b3041b0ab47f627f4f2e909.png
[70 29]: /images/20220509/984b246382284fc1862ec5d5b51f76a7.png
[70 30]: /images/20220509/be056685725843cebc31088188dfb83b.png
[70 31]: /images/20220509/16fe1cb5e0234576a5ae3b6719d00199.png
[70 32]: /images/20220509/9192b55a169b45f5baf8587e7f6930ba.png
[70 33]: /images/20220509/add7b96e5b604f909b2835be20c1588a.png
[70 34]: /images/20220509/e2face464a1c4d74af38068b18824ce8.png
[70 35]: /images/20220509/6d70b2e1e9fe4bd1b726e50122bde69d.png