CSS基础学习
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础学习相关的知识，希望对你有一定的参考价值。
学习是多方面的，多学习总是没错的。
CSS就在我们眼前。
一、什么是CSS
CSS又叫层叠样式表，它是一种用来表现html（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
二、为什么学习CSS
它是能够真正做到网页表现与内容分离的一种样式设计语言，也是能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，
拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
三、走进CSS
-
外部样式表Linking：将网页链接到外部样式表。
-
内部样式表Embedding：在网页上创建嵌入的样式表。
-
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
1、元素（h,p,span,div等）；
2、类（class）+ .名称；
3、ID:+#名称；
4、通配符：*；
5、属性（title，target，alt，href）；
6、伪类/伪元素：hover；
权重值：（内联 > ID选择器> 类，伪类> 元素）
背景，颜色单位；
背景色：background-color；
背景图：background-img：url（“”）；
背景重复：background-repeat
文本：
1、缩进文本：text-indent；
2、水平对齐：text-align；
3、字符转换：text-transform；
文本装饰： text-decoration ；
列表：简写属性：list-style；
去掉li小圆点：list-style：none；
轮廓：outline：none /*取消按钮边框*/
border：none；
框模型：
框模型包含了四部分：
1、元素内容；
2、内边距；
3、边框；
4、外边距；
内边距：padding 常跟PX，少用%，禁负值
四个值顺序：上、右、下、左
外边距：margin 同上 ； 但可用负值
边框：border+宽度值 solid+颜色；
浮动：float+左（右、none）
触发BFC环境：
清除浮动：clear ： both
overflow：hidden等；
定位：position
1、static 默认
2、relative 相对定位：文档流，以相临元素为定位
3、absolute 绝对定位：脱离文档，以窗口为定位
4、fixed 固定定位
z-index 元素的堆叠顺序
边框：
圆角border-radius：自左上按顺时针赋值
按钮border-image：+url（“”）+宽高
box-shadow：向框添加一个或多个阴影
背景大小：background-size
文本阴影：text-shadow
动画篇：
通过CSS转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
2D转换：
1、translate()方法：元素从当前位置移动
2、rotate（）：元素顺时针旋转，允许负值
3、scale()：元素的尺寸会增加或减少
4、skew() ：元素翻转给定的角度
3D转换：
1、rotateX()：元素围绕其 X 轴以给定的度数进行旋转
2、rotateY()：元素围绕其 Y 轴以给定的度数进行旋转
过渡的实现：
1、效果添加到哪个CSS属性
2、效果时长
3、配合hover属性
动画：
在@keyframes中创建动画时，请把它捆绑到某个选择器：
1、规定动画的名称
2、规定动画的时长
学代码是学习动手写代码，而不是复制。
加油！
以上是关于CSS基础学习的主要内容，如果未能解决你的问题，请参考以下文章