目录
一、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、尺寸单位
| 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）的元素最重要特性：
- 脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
- 浮动的盒子不再保留原先的位置
- 浮动元素会具有行内块元素特性。
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有 行内块元素 相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理
清除浮动：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 隐藏。
扫一扫
4279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
