接上篇HTML5的,css3也梳理下
开发商前缀,特定的属性和值前均可单独加上
-moz- firefox
-webkit- chrome,safari
-ms- ie
-o- opera
一.选择器
在css3中,提倡使用选择器将样式与元素直接绑定
1.属性选择器:
[attr = val ] {属性:值; }
[attr *=val] attr的属性值包含val指导字符
[attr ^=val] attr的属性值以val字符开头
[attr $=val] attr的属性值以val字符结尾
2.伪类选择器:
选择器:伪元素{属性:值;}
选择器 类名:伪元素{属性:值;}
first-letter 样式用于某个元素的首字
before 在某个元素前插入一些内容
元素:before{content:插入文字}
元素:before{content:url(test.png)} //插入图片
after 在某个元素后插入一些内容
root 根元素html, :root{ }
not 排除下面有某种子结构元素 body *:not(h1){ } h1元素不应用样式
empty 当前元素内容为空白时的样式
target 被跳转到的锚点样式,跳转后生效
first-child,last-child,nth-child(指定序号子元素),nth-last-child : nth-child(2) 第二个子元素,nth-last-child(2) 倒数第二个子元素,nth-child(even|odd)所有正数下来的偶数|奇数 元素;注:"h2:nth-child(odd)" "父元素第奇数个子元素如果是h2子元素时使用",nth-child(4n+1),
nth-of-type,nth-last-of-type : h2:nth-of-type(odd) "父元素第奇数个h2元素时使用"
only-child 作用相当于 <E>:nth-child(1):nth-last-child(1) 指定某个父元素中只有一个子元素时才使用
<E>:hover|active|focus 鼠标放上|鼠标按下还未松开|获得光标焦点
<E>:ennabled|disabled|read-only|read-write 元素可用|不可用|只读状态|读写状态
<E>:checked|default|indeterminate 选中状态|默认选取状态|单选框未选
<E>::selection 元素处于选中状态时被选中文字样式
<E> -<E2>: 子元素之后的同级兄弟元素
二.文字
给文字添加阴影 text-shadow :length length length color (阴影离开文字的横方向距离,纵方向距离,模糊半径,阴影颜色); 如 text-shadow:5px 5px 5px gray,可以对同一文字制定多个阴影
让文本自动换行: word-break: normal(默认规则换行)|keep-all(只能在半角空格或连字符处换行)
break-all(允许在单词内换行)
break-all(允许在单词内换行)
使用服务器端字体 @font-face{font-family:WebFont; src:url('font/Fontin_Sans_R_45b.otf') format("opentype")}
使用客户端本地字体 @font-face{font-family:Arial;src:local('Arial);},用户首先在本地寻找字体,找不到再寻找服务器端字体
font-family:字体名称
font-style: 字体样式 normal|italic(斜体)|oblique(倾斜体)|inherit
font-variant: 字体大小写 normal|small-caps(使用小型大写子母)|inherit
font-weight: 字体粗细 normal|bold|bolder|lighter|100~900,400=normal,700=bold
font-size:字体大小
font-stretch:字体是否伸缩变形 属性众多...
font-size-adjust:修改字体种类而保持字体尺寸不变,通过查aspect值实现
三.盒模型
盒分为display:block与display:inline;其中display:inline-block属于block的一种,但显示时具有inline类型的特点,不过可以使用width或height属性,默认情况下inline-block并列显示的元素垂直对齐方式是底部对齐,加入vertical-align:top,可变更为顶部对齐.
display:inline-table类型:可以让表格与其它文字显示在一行中
display:list-item类型:可以将多个元素作为列表来显示,同时在元素开头加上列表标记,div{display:list-item;list-style-tyle:circle;margin-left:30px;}
display:run-in和display:compact类型: 如果元素后面还有block元素,run-in类型的元素将被包含在block类型元素内部,而compact将放置在block类型元素左边.
overflow:visible|hidden|scroll(超出滚动条)|
overflow-x和overflow-y,可以单独指定水平或垂直方向上超出盒范围情况
text-overflow:ellipsis, 在overflow:hidden的情况下,多余部分显示...
对盒子使用阴影 box-shadow:length length length color,参数同阴影文字
box-sizing:content-box(元素的宽度和高度不包含padding,border,margine)|border-box (默认属性,包含padding和border)
四.背景和边框
background-clip :border|padding 指定背景的显示范围
background-origin border|padding|content 指定绘制背景图像时的起点,默认从padding区左上角开始
background-size :40px auto 指定背景中图像的尺寸,宽|高
background-break : bounding-box(在整个内联元素中平铺)|each-box(在每一行中平铺)|continuous(下一行中的图像紧接上一行中的图像继续平铺)
在一个元素中显示多个背景图像
div{
background-image:url(flower-red.png),url(flower-green.png),url(sky.jpg);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 3% 98%,85% center,center top;
}
圆角边框
border-radius: 20px; 圆角半径,加入2个参数可绘制椭圆半径,但在各浏览器效果不一样
可分别绘制4个圆角 border-top-left-radius|border-top-right-radius|border-bottom-right-radius|border-bottom-left-radius
使用图像边框 border-image: url(borderimage.png) A B C D [/border-width] 上下拉伸 [repeat|stretch|round] 左右拉伸 [repeat|stretch|round],浏览器自动将使用到的图像分割为9个部分,支持长宽可变;A,B,C,D表示浏览器自动把图像进行分割时的上,右,下,左边距; repeated为重复,stretch平铺,round重复,但若最后不够一张,则将前一张拉伸
可同时使用图像边框和图像背景,但为了避免重叠,图像边框中间部分最好透明
五.变形
<E>{transform:rotate(45deg)} 该元素顺时针旋转45度,以元素中心点为基准点旋转;可以改变这个基准点,如transform-origin:left|center|right top|center|bottom;
<E>{transform:scale(0.5)} 元素缩小50% <E>{transform:scale(0.5,2)} 水平缩小50%,锤直放大一倍
<E>{transform:skew(30deg,[30deg])} 元素水平倾斜30度,垂直倾斜30度,若只有一个参数则垂直方向不倾斜
<E>{transform:translate(50px,[50px])} 元素水平移动50px,垂直移动50px,若只有一个参数则垂直方向不移动
可以连写对一个元素的多种变形,如<E>{ transform:rotate(45deg) scale(0.5) } ;属性顺序不同,结果会不同
六.渐变,动画
Transitions:property duration timing-function(通过制定属性的开始值和结束值,然后在这两个属性值之间进行平滑过渡的方式实现动画效果)
其中property表示对哪个属性进行平滑过渡,duration表示在多长时间内完成属性值得平滑过渡,timing-function表示通过什么方法来进行平滑过渡
transition:background-color 1s linear 或
tansition-property:backgound-color;
transition-duration:1s;
transotion-linear;
同时处理多个样式:
div{
background-color:#ffff00;
color:#000000;
width:300px;
transition:background-color 1s linear,color 1s linear,width 1s linear;
}
div:hover{
background-color:#003366;
color:#ffffff;
width:400px;
}
利用transitions实现元素的移动与旋转动画
img{
position:absolute;
top:70px;
left:0;
-webkit-transform:rotate(0deg);
-webkit-transition:left 1s linear, -webkit-transform 1s linear;
}
div:hover img{
position:absolute;
left:30px;
-webkit-transform:rotate(720deg);
}
Animations(通过定义多个关键帧以及定义每个关键帧中的元素的属性值来实现更为复杂的动画效果)
div{background-color:red;}
@-webkit-keyframes mycolor{
0%{background-color:red;}
40%{background-color:darkblue;}
70%{background-color:yellow;}
100%{background-color:red;}
}
div:hover{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-fucntion:linear|ease-in|ease-out|ease|ease-in-out;
-webkit-animation-iteration-count:infinite; //动画播放次数
}
七.布局相关样式
多栏布局
div#div1{
width:40em;
-webkit-column-count:2;
}
可以使用column-width属性单独设置每一栏宽度,column-gap来设定多栏之间的间隔,column-rule:栏与栏之间间隔线
div#div1{
-webkit-column-count:2;
-webkit-column-width:20em;
-webkit-column-gap:2em;
-webkit-column-rule:1px solid red;
}
盒布局
<div id="container">
<div id="left-siderbar"></div>
<div id="contents"></div>
<div id="right-sidebar></div>
</div>
#container{
display:-webkit-box;-webkit-box-orient:vertical; //改变元素的排列方向
}
#left-sidebar{
width:200px;padding:20px;background-color:orange;-webkit-box-ordinal-group:2; //改变元素显示顺序
}
#contents{
width:300px; 或 -webkit-box-flex:1; //自适应宽度padding:20px;background-color:yellow;-webkit-box-ordinal-group:1; //改变元素显示顺序
}
#right-sidebar{
width:200px;padding:20px;background-color:limegreen;-webkit-box-ordinal-group:3; //改变元素显示顺序
}
#left-sidebar,#contents,#right-sidebar{-webkit-box-sizing:border-box;}
#left-sidebar,#contents,#right-sidebar{-webkit-box-sizing:border-box;}
盒布局与多栏布局的区别:使用多栏布局时,各栏宽度必须是相等的
盒布局时宽高规律:当水平排列时,三个元素的宽度为元素中内容的宽度,高度自动变为容器的高度;垂直排列时,三个元素的高度为元素中内容的高度,宽度自动变为容器的宽度
可以给多个元素加box-flex属性,如果这个值相等,比如都为1,则这些元素会保持相等宽(高)度扩展;如果一个元素为1,一个元素为2,则将空白部分分成3等分,1的占1份,2的占2份
可以使用box-pack属性和box-align属性来设置元素中文字,图像及子元素的对齐方式,属性值有start|center|end,可以轻易的实现垂直居中,图像位于容器正中等效果
八.Media Queries相关样式,根据媒体类型选择样式
@media 设备类型 and (设备特性:特性值) {样式代码}
@media screen and (min-width:1000px){} //窗口宽度在1000px以上样式
@media screen and (min-width:640px) and (max-width:999px){} //窗口宽度在640px以上,999px以下样式
@media screen and (max-width:639px) {} //窗口宽度在639px以下样式
iphone的屏幕比较特殊,可以利用<meta>标签在页面中指定safari浏览器在处理本页面时按照多少像素的窗口宽度来进行
<meta name="viewport" content="width=600px" />
设备类型有 all|screen|print|handheld|tv|speech|braille|embossed|projection|tty
可以在表达式中加not或only关键字,not表示对后面的表达式执行取反操作,only让不支持Media Queries但是能读取Media Type的设备的浏览器将表达式中的样式隐藏起来
九.css3的其他重要属性
1.对RGB颜色设定alpha通道
background-color:rgba(255,0,0,0.5); 最后一位表示透明度
2.对HSL颜色设定alpha通道,HSL=(H色调)+(S饱和度)+(L亮度)
background-color:hsla(120,100%,50%,0.5)
alpha通道与opacity属性的区别:使用alpha通道可以单独针对元素的背景色和文字颜色等来制定透明度,而opacity属性只能指定整个元素的透明度.
将颜色值指定为transparent,则会将背景,文字或边框等颜色设定为完全透明,相当于使用了值为0的alpha通道,可以再一切指定颜色值得属性中指定tansparent值.
3.轮廓相关样式outline
input{
outline-color:red|#FF0000;
outline-style:solid|dashed|none;
outline-width:thin|medium|thick|40px;
outline-offset:2px; //轮廓与边框的距离,可以指定为负值,向内偏移
outline:red solid thin; //可以写到一起
}
4.resize,可以通过拖动的方式修改元素的尺寸
div{risize:both;}
属性:
none:用户不能修改元素尺寸
both:用户可以修改元素的宽度和高度
horizontal:用户只可以修改元素宽度
vertical:用户只可以修改元素高度
inherit:继承父元素的resize属性
5.initial,取消对元素的样式指定
p{color:initial} 取消p元素的所有样式,这个默认值使用css默认值,并不考虑浏览器追加样式
