css样式层叠表(总结)

目录

一、CSS简介

二、CSS的导入方式

三、css选择器

四、css的尺寸单位&颜色&文字属性&文本样式

1、尺寸单位

2、css中的颜色

3、css文字属性

4、常用文本样式

5、背景

五、浮动

六、盒子模型

七、布局方式

八、炫酷动画（补充）

---

一、CSS简介

CSS是层叠样式表，有时我们也会称之为css样式表或级联样式表。

CSS也是一种标记语言，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解就是：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

二、CSS的导入方式

在HTML中CSS的导入方式有三种：1、内嵌 2、内部 3、外部

1、内嵌：就是在标签中写样式，优先级最高。

2、内部：一般写在头部标签里面，用style标签包裹起来写CSS代码。

3、外部：外部样式表的后缀以css结尾，引用时要用link标签引入，href是引入的文件地址。

三、css选择器

css选择器
id选择器	#
class类选择器	.
子代选择器	>
后代选择器	?空格
兄弟相邻选择器	+
匹配选择器	~

其中id选择器的优先级最高，类选择器其次。

四、css的尺寸单位&颜色&文字属性&文本样式

1、尺寸单位

css的尺寸单位

in	英寸
px	像素
%	百分比
em	相对于父元素尺寸的比值

2、css中的颜色

1、word颜色：比如red、white等

2、rgb颜色：有三个值，每个值都是1~255之间，不可以设置透明度。

3、rgba颜色：有四个值，前三个值和rgb一样，第四个值设置透明度，1是没有透明，0.5是半透明。????????

3、css文字属性

font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

4、常用文本样式

属性	说明
text-decoration	去掉下划线、删除线、顶划线
text-transform	文本大小写
font-varient	将英文文本转换为“小型”大写字母
text-indend	段落首行缩进
text-align	文本水平对齐方式
line-height	行高

5、背景

background-image	为一个元素设置一个或者多个背景图片
background-color	设置元素的背景色
background-size	设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸
background-repeat	属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
background	以上都可以设置，背景图要加url(图片地址)

background 背景
?? ?图片 url()
?? ?颜色 red,yellow

background:?
url("img/1f921.png") 背景图片
no-repeat 不需要平铺
center/cover; 铺满元素

?

五、浮动

浮动属性float可以通过不同的属性值使元素浮动表面，以达到布局网页的目的。

设置了浮动（float）的元素最重要特性：

1. 脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
2. 浮动的盒子不再保留原先的位置
3. 浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有 行内块元素 相似的特性。

• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决
• 浮动的盒子中间是没有缝隙的，是紧挨着一起的
• 行内元素同理

清除浮动：clear:both.

六、盒子模型

1、盒子模型构成

盒子模型由内容、内间距、边框、外间距组成

内容区域：由内容边界限制，容纳着元素真是内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度和内容高度。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

内边距区域：由内边距边距限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的调节属性方式是是bodding:上 右 下 左;。

边框区域：由边框边界限制,扩展自内边距区域，是容纳边框的区域。

其调节属性方式是border:大小 类型 颜色；

边框颜色?
border-color: red blue yellow green;
边框大小
border-width: 10px;
边框类型
border-style: solid; ??
三合一
border:1px solid red; ?
边框弧度(如果是正方形,50%就是圆形)
border-radius

外边距区域：由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。

它的调节方式是：margtin:上 右 下 左；

七、布局方式

position布局：

a）静态定位static（默认）

静态定位是元素的默认定位方式，从上到下排列

语法：

选择器{position:static;}

b）相对定位 （relative）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（还在排版之中）

语法：

选择器{position:relative}

1、它是相对于自己原来的位置来移动的（移动的时候参照点是自己原来的位置）。

2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。

c）绝对定位（absolute）

绝对定位是元素在移动位置的时候，是对照父元素（不是静态布局）

语法：
选择器{position:absolute}

绝对定位的特点：
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。

2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3、绝对定位不再占有原先的位置。（脱标）

所以绝对定位是脱离标准流。

d）固定定位（fixed）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器{position:fixed}

固定定位的特点：

1、以浏览器的可视窗口为参照点移动元素。

更父元素没有任何关系。

不随滚动条滚动。

2、固定定位不在占有原先的位置。

固定定位也是脱标的，可以用于回到顶部，以及广告等。

以上布局除了static静态元素以外都有上（top）右（right）下（bottom）左（left）四个属性可以设置。

八、炫酷动画（补充）

1、当鼠标放上去触发的样式：div:hover

2、当输入框被输入的时候(获得焦点)：input:focus

3、过渡时间，有开始值和结束值：transition:时间；

4、text-indent? ?文字开始间距

5、盒子的阴影：x y 大小 颜色

box-shadow:0 0 30px blue;

6、transform 变换:

translate 位移

rotate 旋转

scale 放大

filter 滤镜

7、html元素会存在超出父元素显示范围的情况

overflow 设置溢出处理方式

hidden 隐藏。