CSS基础标签

太过爱你忘了你带给我的痛 2022-06-12 02:09 204阅读 0赞

css基础知识

1.1基本概念

css层叠样式表（CascadingStyle Sheets）

HTML描述了要呈现的内容，而CSS则定义了这些内容的呈现形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式

使用样式表可以有3种方式

同过css方便了管理，对html的快速应用有更好的方式

（1）      内联样式

<p style="font-size:24px;color: green ">内联样式的演示</p>

将样式定义在style属性中

内容和表现形式高度耦合，维护困难，不利于分工合作

只能应用于当前标签

对于普通的实验方便

（2）  内部样式

<body>

在<head>标签中通过<style>标签来实现

内容和表现形式的耦合程度降低了，但都还是在html文件中，没有实现完全分离

定义的样式只能在当前页面中使用

（3）  外部样式表

首先需要定义一个样式表文件（.css）

/\*定义了应用于段落的样式：  
字体大小：36  
颜色：红色  
\*/  
p\{  
    font-size: 36px;  
    color: red;  
\}

Css中也可以使用注释，形式为/\*......\*/

然后在需要使用这些样式的html文件中引入该样式表文件

外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护。可在多个html中引用

推荐尽量使用外部样式

外部样式的对于工作方便

但后面的案例为了方便，还会大量使用内部样式甚至内联样式

1.2颜色

自然界的颜色量是无穷的，但是计算机只能保存有限的信息

需要将连续的量（无穷）转换为离散的量（有限）的

所有的颜色都可以由红色（red）、绿色（green）和蓝色（blue）三种颜色调配而成，这三种颜色俗称三原色

CSS中用8位表示一个颜色，那么可以表示256（28）种颜色，所以总共可以表示256\*256\*256种颜色

CSS中有多种颜色表示形式：

（1）十六进制形式：

<p style="color: \#ff0000">十六进制颜色表现形式</p>

（2）RGB颜色

<p style="color: RGB(255,0,0)">RGB颜色表现形式</p>

（3）RGBA颜色

在RGB颜色基础上增加了透明度量（Alpha），该分量的取值范围为0（完全透明）—1.0（完全不透明）

<p style="color: RGBA(255,0,0,0.5)">RGBA颜色表现形式</p>

（4）HSL颜色

颜色也可以由另外三个分量来表示，即色调、饱和度、和明度

<p style="color: HSL(120,50%,50%)">HSL颜色表现形式</p>

（5）HSLA颜色

在HSL颜色的基础上增加了Alpha分量

<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色表现形式</p>

（6）预定义颜色

CSS提供了一些常用的预定义颜色，如red、blue等

<p style="color: red">预定义颜色表现形式</p>

1.3尺寸单位

cm：厘米

mm：毫米

in：英寸（inch）

px：像素（pixel）

%：百分比

em：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为16px\*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

所以我们在写em的时候，需要注意两点：

1. body选择器中声明font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

vw：vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

vh：vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;