CSS3单词表
CSS引入样式:
行内样式
<h1 style="color:red">
内部样式:
<herd>
<style>
h1{color:green;}
</style>
</herd>
外部样式:
链接式1.
<link href="文件路径" rel="stylesheet" type="text/css"/>
导入式2.
@import url("文件路径");
属性:
font-size:30px 字体大小
color:red 颜色设置
属性值:
(1)选择器:选择器遵循就近原则
标签选择器: HTML 标签作为选择器的名称
类选择器: .class{font-size:16px;} <标签名 class="类名称">标签内容</标签名>
ID选择器: #id{font-size:16px} <标签吗 id="id名称">标签内容</标签名>
(2)层次选择器:
E F 后代选择器 boody p{bcakgound:red;} 选择所有后代
E>F 子选择器 boody>p{bockgound:red;} 选择的是boody的子元素
E+F 相邻兄弟选择器 .active+p{background:green;} 选择兄弟元素,最近的一个p元素
E~F 通用兄弟选择器 .active~p{background:red;} 当前不选中,并列兄弟元素全部被选择
(3)结构伪类选择器
E:first-child
作为父元素的第一个子元素E
E:last-chlid
作为父元素最后一个子元素的E
E F:nth-child(n)
选择父元素E的第n给子元素F(n可以是1,2,3),关键字为even,odd,奇数,偶数
E:first-of-type
选择父元素内具有指定类型的第一个E元素
E:last-of-type
选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)
选择父元素内具有指定类型的第n个F元素
backgrou-color 背景颜色 transparent透明色
background-image:url("图片路径") 背景图片
背景图片重复方式:background-repeat
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺:即显示异常
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景定位background-position
Xpos Ypos
单位:px x表示水平位置 y表示垂直位置
X,Y方向关键词:
X%,Y%:可以使用百分百表示背景的位置
水平方向关键词:left,center,right
垂直方向关键词:top,center,bottom
CSS3渐变兼容
IE是Teident内核,加前缀:-ms-
Chrome浏览器是Webkit内核.加前缀-webkit-
Safari浏览器是Webkit内核.加前缀-webkit-
Opera浏览器是Blink内核,加前缀-o-
Firefox浏览器是Mozilla内核,加前缀-moz-
线性渐变:
linear-gradient(position,color1,color2...)
linear-gradient(渐变方向,第一种颜色,第二种颜色)
兼容webkit内核浏览器:
--webkit-linear-gradient(position,color1,color2...)
a标签伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
下划线样式
text-decoration下划线CSS单词值参数:
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式
content-box
border-box
box-sizing 盒子模型的尺寸
盒子模型 =边框+内边距+外边距
圆角边框:
语法:
border-radius:20px 10px 50px 30px;
四个属性值按顺时针排列
没有值的角,参照对边
设置圆形:
border-radius :50px 或者设置百分之50% border-radius:50%
设置半圆:
上半圆:border-radius: 50px 50px 0 0;
下半园:border-radius: 0 0 50px 50px;
左半圆:border-radius: 0 50px 50px 0;
右半圆border-radius: 50px 0 0 50px;
设置扇形:
遵循"三同一不同"原则
"一不同"是圆角取值位置不同
盒子阴影:
box-shadow:inset x-offset y-offset blur-radius color
inset 阴影类型内阴影
x-offset x粥位移,指定阴影水平移量
y-offset y粥位移,指定阴影垂直移量
网页布局及display属性:
标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列.这也是元素默认的排列方式
块级元素(block)
<h1>....<h6>,<p>,<div>,列表
内联元素(inline)
<span>,<a>,<img/>,<strong>....
内联标签可以包含域块元素中,成为它的子元素,而内联元素不可以包含块元素
display属性取值:
block 块元素,前后带有换行符
inline 内联元素,前后没有换行符
inline-block 行内块元素,既有内联元素特征,也具有块元素特征
none 设置元素不会被显示
float属性:
float属性取值:
left 左浮动
float:可以让元素在一行并且支持宽度和高度,可以决定排列方向
float:浮动以后元素脱离文档流,会对周围元素产生音响,必须在它的父级上添加清除浮动的样式
解决4种父级边框塌陷
总结:
1.浮动元素后面加空div
简单空div会造成HTML代码冗余
2.设置父窗体的高度
简单,元素固定高会降低扩展性
3.父级添加overflow属性
简单,下拉列表框的场景不能用
4.父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用
清除浮动:
clear属性取值
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左,右两侧不允许浮动元素
none 默认值.允许浮动元素出现在两侧
溢出处理
overflow属性
overflow属性取值:
visible 默认值.内容不会被修剪,会呈现在盒子之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条便于查看其余内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
父级添加伪类after
语法
HTML中 < class="clear">
CSS中 .clear:after{
content:'';
display:block
clear:both
}
Position属性
static:默认值,没有定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
相对定位
relative属性值
偏移取值: top left right bottom
设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来 层级提高
绝对定位
absolute属性值 top left right bottom
使用了绝对定位的元素以它最近的一个"已经定位"的"祖先元素"为基准进行偏移
如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后,它原来的位置不会被保留
固定定位
fixed属性值 top left right bottom
类似域绝对定位,不过区别在于定位的基准不是祖先元素而是浏览器窗口
z-index属性
默认值为0,设置了positon属性时,z-index可以设置各元素之间的重叠高低关系
CSS透明元素
opacity:x取值opacity:0.4, x值为0~1值越小越透明
filter:alpha(opacity=x) x值为0~100值越小越透明
CSS3变形
CSS3编写是一些效果的集合
如平移,旋转,缩放,倾斜效果
每个效果都可以称为变形(transform),透明可以分别操控元素发生平移,旋转,缩放,倾斜等变化
teansform:[transform-function]*;
设置变形函数,可以是一个,也可以是多个,中间以空格分开
变形函数
translate(tx,ty): 平移函数,基于X,Y坐标重新定位元素的位置
scale(sx,sy); 缩放函数,可以使任意元素对象尺寸发生变化
rotate(deg); 旋转函数,取值是一个度数值
skew(ax,ay); 倾斜函数,取值是一个度数值
CSS3过度
transition