一、css基础知识
1.全称：层叠样式表。
2.作用：对同一个标签添加多个不同的样式，使页面达到需求效果。
3.特点：
1）继承：网页内子元素会继承父元素的样式
2）层叠：依照定义的先后次序，后面定义的样式会覆盖前面定义的样式，若子元素定义了与父元素相同的属性，子元素会覆盖父元素的样式。
4.语法：选择符{属性：值} （例：div{margin：100px；}）
5.核心要点：
二、css元素与基础用法的介绍
1、引入方式
1）内嵌式引入
将style标签嵌套在head标签内 ，于style标签内进行样式设计
2）行内样式
于html内标签， 添加style 从而直接在style内进行样式设置
3）外联样式
创建.css文件， 在.css文件进行相关操作 ， 最后通过link标签引入到html内
4）嵌入样式（使用率较低）
内嵌与外联的一种综合性使用 于style标签内通过@import 引入.css文件
*优先级：行内样式>其他样式， 其余样式遵循“就近原则”（离修饰目标的距离）
2、选择符
1）标签选择符
通过标签的名字来命名的选择符
2）id选择符
通过对标签添加id属性 ，于id属性内添加自定义标备以命名之后在style标签中添加#后接定义的名字， 在其后大括号内进行对样式的修改美化。
3)类选择符
使用方式与id选择符类似 ， 在标签内添加class属性以自定义命名 通过"."加自定义的名字的形式 ，在其中添加属性值以修改样式
注：类选择符与id选择符在部分属性上不重合， 类选择符使用程度比id选择符程度广 。 （推荐使用）
4）全选择符
语法*{属性：值} ， 作用于所有元素
5）包含选择符
用于选定被指定的元素所包含的子元素 ，上下级元素间以空格号相隔
效果上做到了仅对被选中的子标签的内容进行对属性的修改
6）分组选择符
其作用是来同时选中多个选择符，对他们添加相同的属性，
操作时各选择符间以逗号间隔。
7）标签指定式选择符
相当于“既…又…”的关系， 语法 ： 标签名 选择器名{属性：值}
注：标签名与选择器名之间不存在任何符号。
8）伪类
上图冒号前的“e”为需要添加属性的目标标签 ，如“a”，“div”。
link： 指未访问的链接的属性。
visited：指已访问的链接其属性如何。
hover： 指当鼠标移到链接上产生其属性如何。
active： 指鼠标按下到链接上对应的属性变化。
四者顺序依次遵循：link visited hover active
注：顺序的偏差会对呈现效果产生一定程度的影响。
3.盒子模型（重点）
通常盒子模型是通过对div标签添加margin，boder，padding，width，height，backgroundcolor等属性，将元素集中在“盒子”内，以便对元素进行整体布局操作。
margin：用以控制内容与边框间的距离。
padding：用以控制整个“盒子”与页面边缘间的相对距离。
width：用以调整内容的宽度。
height：用以调整内容的高度。
boder：用以设置盒子边框样式。
margin/padding-top/right/bottom/left分别对应特指的内/ 外边距上，右，下，左的位置。
注：控制大小的单位中px，em最为常用
4.背景
1）颜色
语法：选择符{background-color：#十六进制颜色}
2）图像
语法：选择符{background-image：url（图像所在地址）}
3）重复方式
语法：选择符{background-repeat：repeat/no-repeat/repeat-x/repeat-y}
4)位置
语法：选择符{background-position：top/left/center/right[top/left/center/right]…}
注：中括号外的第一个值为水平位置，第二个值为垂直位置；其单位为px。
5)依附方式
语法：选择符{background-attachment：scroll/fixed}
注：scroll表示背景会随页面的滚动而滚动，fixed则相对固定于同一位置不会随页面其余部分滚动。
例：
效果如下 ：
5.字体
1)设置字号：font-size:15px
2)设置字体：font-famliy:“目标字体”
3)设置字色：color：#十六进制颜色
4)设置行高：line-height：2em
5)设置字体粗细：font-weight：bold（粗体）
6.文本
1)控制文本缩进：text-indent：2em
2)控制文本水平位置：text-align：left/center/right
3)控制文本中的空白：
①white-space:normal（自动换行）
②pre（换行与空白受保护）
③nowrap(强制于同一行显示）
4)控制文本大小写：text-transform:none(正常大小)/capitalize(每个单词首字母大写)/uppercase(大写)/lowercase(小写)
5)控制元素的竖直对齐方式：
vertical-align:sub(下标)/supper(上标)/top(将元素与行内的顶端对齐)/text-botton(将元素底部与父元素字体底端对齐)
7.块状/内联元素
1)块状元素
块状元素具有高度和宽度属性，不可与其他元素同行
代表标签：div、p…
块状元素默认属性：display：block
2）内联元素
内联元素不具有高度和宽度属性，可以与其他元素同行
代表标签：a、span…
内联元素默认属性：display：inline
注：块状元素与内联元素可以相互转换
通过添加其对立元素的默认属性
例：
上两图的不同正是在于后者通过对div添加内联属性使div能与其他元素呈于同一行。
注：display：none亦可将元素隐藏
8.布局
1）浮动布局
①浮动float
float：none（不浮动，默认属性）
float：left（对象向左浮动，而后面的内容流向对象的右侧）
float：right（对象向右浮动，而后面的内容流向对象的左侧）
由于当元素有浮动属性时，会对其父元素或后面的元素产生影响，从而导致一定程度上的页面错乱，对此可以通过对其父或后面的元素添加消除浮动属性的方法消除浮动元素对其产生的影响。
②清除浮动clear
clear：none（默认值，允许两边浮动存在）
clear：both（清除两边的浮动对象）
clear：left（清除其左边浮动对象）
clear：right（清除其右边浮动对象）
2）定位布局
position
语法：
①position：static
静态定位 (页面中每个对象的默认值， 无特殊定位，遵循HTML定位规则)
②position：absolute
绝对定位 (以网页页边作为参照对象将对象，从文档流分离出来， 通过设置left、right、top、bottom进行定位。)
③position：relative
相对定位（以其所在“盒子”边框作为参照对象，不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位。）
例
代码：
效果如下：
注：position不宜与float同时使用
9.溢出隐藏、缩放
1）溢出
overflow
语法：
①overflow：visible（默认值，既不会添加滚条也不会剪切内容）
②overflow：auto（内容多到溢出时会自动添加滚动条，内容少的时候对样式不起作用）
③overflow：hidden（对于超过显示区域的内容不予显示）
④overflow：scroll（显示滚动条，与内容多少无关）
2)隐藏元素的方法
①display：none；
②width：0 ； height：0；
③overflow：hidden；
3）缩放
zoom
语法：
①zoom：normal（对象实际大小）
②zoom：number/percent（此处属性值期望对象增大或缩小的倍数或是对应的百分数）
二、css3基本信息
css3是css的升级版 ，相较于css ，css3新增了一些样式属性，css中有效的code在css3也有效。
重要属性：
1、边框
1）border-radius 圆角边框
border-radius：属性值（以px为单位，添加以多少px为半径的圆角边框）
注：它的四个角可以分别设置即：border-radius:5px 10px 15px 20px;分别表示左上角、右上角、右下角、左下角的半径。如果对border-radius指定两个值,那么第一个值为左上角和右下角，第二个值为右上角和左下角。如果指定三个值，那么第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角。
例：
2）box-shadow 边框阴影
以此属性添加阴影
box-shadow：10px 10px 10px red；（表水平阴影的位置向右偏移10px；竖直阴影的位置向下偏移10px；阴影模糊的距离为10px； 阴影的颜色为红色。
例：
3）border-image 边框图片
可以通过此属性使指定图片成为边框。
2、背景
1）background-size
通过此属性可实现调节背景图片的尺寸大小。
例：
代码内该属性后的650px与400px 分别是给该背景设置的宽度和高度。属性值亦可添加为对应的百分数。
2）background-origin
该属性可用以指定背景图像的位置区域。即背景图片放在哪里。
注：属性默认是padding-box。
当设置为padding-box（默认值）时效果如下：
当设置为border-box时效果：
注：此时背景图是从border的最外层开始的，此时背景上方的一部分被边框遮挡。
当设置为content-box时效果则背景是呈现在内容框中 ，不受遮挡。
3、文本效果
1）text-shadow
与box-shadow的用法与效果类似，即对文本添加阴影的效果，同样也能够能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
2）word-wrap:break-word
当单词过长超出显示范围时，对其进行强制拆分换行。
使用前后效果对比：
3、过渡
transition
transition过渡属性是当元素从一种样式变换成另一种样式时为其添加的效果
使用时需添加两项内容，一是希望添加的属性（通常为width或height），二是效果持续的时长
如果想要所有的属性都变化过渡， 写一个all 就可以
同时，此效果最好与hover伪类结合使用。
当鼠标放在图形上后逐渐变形，过渡成如下形状
4、动画
语法：
@keyframes myfirst
{
from {开始状态;}
to {结束状态;}
}
@keyframes myfirst
{
0%{自定义状态;}
25% {自定义状态;}
75%{自定义状态;}
100%自定义{状态;}
}
创建动画需要使用@keyframes规则，同时需要捆绑到选择器上，创建动画，名称和时长的定义必不可少。
5、2D转换
transform变形转换
1） translate(x, y) 移动
translate(x,y)水平方向和垂直方向同时移动（即X轴和Y轴同时移动）
translateX(x)水平方向移动（X轴移动）
translateY(y)垂直方向移动（Y轴移动）
2）scale(x, y)缩放
可以对元素进行水平和垂直方向的缩放，其默认取值为1，取值区间为（0，1）时是将对象缩小，
大于1是放大
3） rotate(deg)旋转
可以对元素进行旋转，正值为顺时针，负值为逆时针
4）transform-origin
可以通过该属性调整元素转换的原点
5）skew
skew(deg,deg) ，通过对该属性设置属性值从而使其按输入的两个方向的倾斜角度
6、3D转换
3D转换是在2D转换的基础上增加z轴，与2D使用方法类似。其中有个重要的属性：perspective景深，即眼睛到显示器的距离，用户和元素3D空间中Z平面之间的距离。
prespective 取值越小，3D效果越明显
3D也具有skew 、rotate 、translate 、scale属性，使用时需多设置一个z轴的值。
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
