Css/css3知识点
定义: CSS : Cascading Style Sheet ,层叠样式表,级联样式表,样式表
作用
1、实现内容和表现分离
2、提高代码的可重用性和可维护性
使用css的理由:
1、相同的效果，不同的标签会通过不同的属性来表示
2、使用属性 很不通用，一对一的修改，而不是整体修改
Css样式表
1、使用CSS的方式
1、内联方式(行内样式)
将css样式定义在某个单独的标签中即将 样式内容 写在 html元素中的style属性中
<div style="color:red;"></div>
CSS语法:
属性:属性值;
<div style="属性:属性值;属性:属性值;...."></div>
常用属性:
color : 修改当前标签中文本的颜色
background-color : 修改当前标签的背景颜色
2、内部样式表
将CSS样式定义在网页中的 <head></head> 中
特点：针对当前网页网页有效
【样式规则】 存放在 html文档头部 【head标签】中的 【style 标签】内
语法：<style type=“text/css”>
p{
color:red;
background-color:blue;
}
.content{
font-size:16px;
}
.content ,#contentWrap{
font-size:16px;
}
</style>
外部样式表
将 样式规则 单独存放在 样式表文件中(**.css),哪个页面想使用，哪个页面就引入当前的样式表文件
step 1 :
创建一个文本文件，将其后缀修改为 .css
在该文件中编写若干 样式规则
step 2 :
在想使用的页面上， 通过 <link /> 引入外部样式表
样式表特征
1、继承性
大多数的css样式规则可以被继承的。
2、层叠性
为同一个元素 定义多个 样式规则
多个样式规则同时存在时不冲突，多个样式规则会合并成一个，属性重复时以最后一个出现为准。
3、优先级
各级样式表冲突时(行内、内部、外部)，会按照不同的优先级来应用样式
0 : 浏览器缺省设置
1 : 内部样式表 或 外部样式表
冲突时：就近原则，谁在下，以谁为主
2 : 行内样式(内联样式)
4、!important 规则
通过 !important 显示调整样式规则的优先级
放在属性值之后，用 空格 来区分。 例如：font-size: 16px !important;
由!important 标识的属性值，优先级别最高 请谨慎使用
Css基础选择器
别名:标签选择器、标记选择器
特点：通过元素名称作为选择器名称
作用：修改某一元素的默认样式
body{}
h1{}
h2{}
2、类选择器(类样式)
特点：通过元素的 class 属性来进行引用
作用：定义某一组标签的统一样式
语法：.className{color:red;bakcground:yellow;}
注意：className不能以数字开头
引用：<div class="className"></div>
<h3 class="className"></h3>
注意：在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开
例如 <div class=“myDiv firstDiv”> 我是div</div>
3、分类选择器
由类选择器衍生出来的新选择器
将类选择器 与 元素选择器 结合使用
目的：为了更精准的定位的页面的元素
语法：元素选择器.类选择器{}
例如： p.content{}
4、通用选择器
作用：适配页面上所用的元素，改变他们的样式
语法：*{}
5、id选择器(id样式)
作用：通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。
语法：#id{}
eg : #top{background-color:red;}
<div id="top"></div>
id的作用：
1、定义元素在页面中的唯一标识
2、引用样式表中的id样式
6、群组选择器
选择器声明是以 , 隔开的 选择器列表
作用：定义一组元素的样式
h3,p,.new,#test,div.newDiv,p.test{}
7、后代选择器
根据元素的嵌套关系来定义的样式
根据一个元素 去定位 它里面的其他元素
语法：
selector1 selector2{}
<div>
<div>
<p>
<span></span>
</p>
</div>
<span></span>
</div>
8、子代选择器
要求选择器之间只能存在父子关系
语法:
selector1>selector2
#test>.news{
修改 id为test里面的 class为news的元素
}
后代选择器 和 子代选择器 目的是为了精确匹配范围
9、伪类选择器
匹配元素 不同状态时候的选择器
语法：selector1:伪类选择器
伪类选择器分类：
1、链接伪类
:link : 适用于尚未访问的链接，与:visited互斥
:visited : 适用于已访问过的超链接，与:link相斥
2、动态伪类
:hover : 适用于鼠标悬停在元素上面时候的状态
:active : 元素被激活的一瞬间的状态
:focus : 适用于元素获取焦点时的状态
颜色值:
1、颜色的英文表示法(没人用)
2、rgb(R,G,B)
R : red 0-255
G : green 0-255
B : blue 0-255
rgb(0,0,0) : 表示黑色
rgb(255,255,255) : 表示白色
rgb(125,16,72) :
3、rgb(x%,x%,x%)
rgb(30%,25%,78%)
4、#rrggbb
r:0-9 A-F
g:0-9 A-F
b:0-9 A-F
#000000 : 黑色#ffffff : 白色
#ff0000 : 红色 #e4393c : 京东红
5、#rgb -> #rrggbb 的缩写
#ff0000 --> #f00;
#77aaee --> #7ae;
#e4393c --> 无
6、rgba(0,0,0,0.5)
R: 红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
7、 opacity:设置透明度（0~1）
属性----边框:
1、宽度
width :
max-width:
min-width: 与 max-width一同定义元素宽度的范围，与width冲突
2、高度
height :
max-height:
min-height:
注意：
只有 块级以及行内块 能够更改 width 和 height
行内元素不能修改 width 和 height
3、溢出
属性：overflow
作用：当内容溢出元素框时，如何处理
值: visible 显示(默认)
hidden 隐藏(常用)
scroll 有滚动条
auto 自动,溢出则显示滚动条，不溢出，没有滚动条
属性:overflow-x : 横向溢出时处理
overflow-y ： 纵向溢出时的处理方式
简写方式:
border:width style color;
width:边框线条的宽度
style:边框线条的样式,如实现(solid)、虚线(dotted)
color:边框线条的颜色
一次性 设置 上下左右 四个边框的 宽度 样式 颜色
border:1px solid #f00;
单边定义：
border-方向:width style color;
方向:top,bottom,left,right
border-top:2px solid #000;
border-width:四个边框的宽度
border-style:四个边框的样式
border-color:四个边框的颜色
border-方向-属性:
方向：top,bottom,left,right
属性：color,width,style
注意：边框颜色 除了可以设置正常颜色值之外，还可以设置为 transparent(透明)
border-color:transparent;
border:2px solid transparent;
属性-边框倒角:
边框倒角元素 的四个方向的圆角设置
属性：border-radius
取值：
1、给定4个值， 分别表示从左上角开始 按顺时针方向的四个角圆角半径
2、给定1个值，表示四个角的圆角半径
例如：
给定指定数值，2px , 10px
百分比,当前元素的宽度 的百分比 作为圆角半径
单独定义:
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius
属性—边框阴影:
边框阴影
属性:box-shadow : 给指定元素边框增加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:阴影水平位置
v-shadow:垂直位置
blur : 可选,模糊的距离
spread :可选,阴影尺寸
color : 可选,颜色
inset : 可选,将阴影改为 内阴影 默认outset
常用写法:box-shadow:h-shadow v-shadow blur color;
如： box-shadow: 10px 10px 5px #888888
属性—背景:
1、背景色
2、背景图像
属性：background-image
取值：url(图像路径)
background-image:url(images/1.jpg);
background-image:url("images/1.jpg");
background-image:url(‘images/1.jpg‘);
3、背景重复(repeat)(重点)
属性:background-repeat
取值:
repeat : 垂直、水平 双方向重复，默认值
repeat-x:水平方向重复
repeat-y:垂直方向重复
no-repeat:不重复
4、背景定位(重点)
指的是背景图在元素中的位置
属性：background-position
取值1(x y 值为像素)
x y : x水平偏移位置 y垂直偏移位置
x 为正 则向右移动
x 为负 则向左移动
y 为正 则向下移动
y 为负 则向上移动
取值2(x,y为百分比）
x% y% : 相对于所在的元素的宽度 和 高度来设置 相对比例
多数用于背景图像居中显示
取值3： left right center top bottom
属性----渐变:
1、什么是渐变
在多种颜色之间进行柔和的过渡
2、语法
属性:background-image:
取值:
linear-gradient(值,值...) --> 线性渐变
radial-gradient(值,值...) --> 径向渐变
repeating-linear-gradient() --> 重复线性渐变
repeating-radial-gradient() --> 重复径向渐变
属性-线性渐变:
线性渐变 linear gradient :直线渐变
方向：向上/向下/向左/向右
语法：background-image:linear gradient (angle,color-point,colot-point ….)
其中angle 代表渐变的方向或角度 ，常见方向取值为: to top/to left/ to right/to bottom
常见 角度取值：0deg ，90deg …
color-point 代表 颜色的起始点 过渡点 结束点 一般至少我们取两个值
常见取值 red 0%，green 50%,blue 100%
常见例子：background-image:gradient(to top,red 0%,green 50%,blue 100% )
涉及到浏览器兼容性问题
对不支持的浏览器版本:
通过浏览器前缀，去匹配不同的浏览器
Firefox : 火狐 -moz-
Chrome、Safari : -webkit-
Opera :欧鹏 -o-
属性: 径向渐变
径向渐变
radial-gradient([size at position],color-point,color-point....);
size : 圆的半径
position : 圆心出现的位置，默认为元素的中心
常见例子: background-image: radial-gradient(200px at left,red 0%,green 50%,blue 100%)
color-point的值至少取2个
属性:重复渐变
常见用法：repeating-linear-gradient(to bottom,red 0px,green 10px,blue 20px);
属性—转换:
Transform ：向元素应用2D或3D转换 。该属性允许我们对元素进行旋转 、缩放、移动或倾倒
在3D transform 中有下面三个方法：
transform:rotateX(angle)
transform:rotateY(angle)
transform:rotateZ(angle)
常用表达的方法：transform:rotate(7deg);
常见实现效果旋转木马（后期实现）