css3

蔚落 2021-09-14 07:52 423阅读 0赞

选择器  
简单选择器  
关系选择器  
组合选择器  
属性选择器  
伪类选择器  
伪元素选择器  
...  
css2选择器：  
属性选择器：  
1 E\[att\]:E泛指所有元素，选择具有att属性的E元素---IE7  
2 E\[att="val"\]:选择具有att属性且属性值为val的E元素---IE7  
3 E\[att~="val"\]:选择具有att属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素---IE7  
4 E\[att|="val"\]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素---IE7  
字符串：凡是用单引号或者双引号包着内容，我们都可以叫做字符串  
伪类选择器：  
1 E:first-child:匹配父元素的第一个子元素E。  
注意：要使该属性生效，E元素必须是某个元素的子元素  
2 E:link  E:visited E:hover E:active---ie6   
  E:focus 在输入焦点时发生的样式变化，一般用于表单元素---ie8  
  
  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*华丽分割线\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
css3选择器  
  
  
一 关系选择器  
1 兄弟选择器(E~F):选择E元素后面的所有兄弟元素F(ie7)  
二 属性选择器  
1 E\[att^="val"\]:选择具有att属性且属性值以val开头的字符串的E元素(ie7)  
2 E\[att$="val"\]:选择具有att属性且属性值以val结尾的字符串的E元素(ie7)  
3 E\[att\*="val"\]:选择具有att属性且属性值包含val的字符串的E元素(ie7)  
三 伪类选择器  
1 E:not(s):匹配不含有s选择器的元素E---(ie9)  
2 E:last-child:匹配父元素的最后一个子元素E---(ie9)  
3 E:only-child:匹配父元素仅有的一个子元素E---(ie9)  
4 E:nth-child(n):匹配父元素的第n个子元素E---(ie9)  
odd:奇数  
even:偶数  
以上伪类选择器只能写在子元素上面，不能写在父元素上面  
5 E:empty:匹配没有任何子元素的元素E---(ie9)  
其中子元素中如果有文本的话，那么认为文本也是子元素  
6 E:enabled：匹配用户界面上处于可用状态的元素E---(ie9)  
  E:disabled：匹配用户界面上处于禁用状态的元素E---(ie9)  
7 E:checked：匹配用户界面上处于选中状态的元素E---(ie9)  
  
  
四 伪元素选择器---(ie8)  
1 E:before  
2 E:after  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*华丽分割线\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
  
  
css3属性  
  
  
一 颜色表示法  
英文单词  
十六进制  
rgb(10,25,30)  
第一个值表示的是红色占比  
第二个值表示的是绿色占比  
第三个值表示的是蓝色占比  
占比取0-255  
  
  
透明度  
rgba(红色,绿色,蓝色,透明度)---(ie9)  
透明度的取值：0---1,如果值越大，透明度越低  
  
  
opacity:0.5---(ie9)  
后面跟一个0---1的值,如果值越大，透明度越低  
opacity对整个元素的所有内容都会透明，而rgba只是设置元素的颜色透明  
  
  
filter:alpha(opacity=50);---滤镜(支持ie8及更早版本),取值为(0---100)%,如果值越大，透明度越低  
opacity:0.5;  
  
  
二 设置圆角边框---(ie9)  
\-webkit-/-moz-  
border-radius:5px/5%;  
border-top-left-radius:150px;  
border-bottom-right-radius:150px;  
  
  
缩写：  
border-radius: 左上 右上 右下 左下;  
border-radius: (左上/右下) (右上/左下);  
border-radius: (左上) (右上/左下) (右下);  
  
  
\----前缀----  
为什么会产生前缀：在标准为确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容  
加了前缀的作用：可以兼容到浏览器更早的版本  
\-webkit-  chrome  
\-moz-     firfox  
\-o-       opara  
\-ms-      IE  
  
  
三 设置盒阴影---ie9  
\-webkit-/-moz-/-o-  
box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影尺寸 颜色 inset/outset;  
  
  
四 过渡效果---ie10  
\-webkit-/-moz-/-o-  
transition：参与属性 过渡时间 动画类型 延迟时间；  
当参与的css属性发生变化时，才能产生过渡效果  
动画类型：  
默认,ease---以慢速开始，然后变快，最后以慢速结束  
linear---从始至终都是相同的速度  
五 2D转换---ie9  
\-webkit-/-moz-/-o-/-ms-  
transform:  
translate(x,y)  沿着X和Y轴移动,在初始位置的左上角开始偏移  
translateX(n)/translateY(n)  
scale(width,height) 改变元素的宽度和高度  
scale(n)  宽度和高度都是以n的倍数进行放大或缩小  
scaleX(n)/scaleY(n),以中心点为坐标进行放大或缩小  
        rotate(deg) 规定元素旋转多少度,以顺时针的方向旋转  
skew(x-deg,y-deg) 沿着x和y轴倾斜  
transform-origin:设置中心坐标  
center center;(默认值)  
left/right top/bottom;  
具体值/百分比;  
六 transparent====》rgba(0,0,0,0)全透明黑色速记法  
background-color---ie5  
border-color----ie7  
color----ie9  
  
  
七 设置背景图大小---（ie9）  
background-size:  
500px;等比例缩放  
500px 300px;  
cover;将背景图等比例缩放到完全覆盖容器，背景图有可能会超出容器  
contain;将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图始终被包含在容器内  
  
  
八 设置背景图的定位区域---（ie9）  
background-origin:  
padding-box;从padding区域(包含padding)开始显示背景图像  
border-box;从border区域开始显示背景图像  
content-box;从内容区域显示背景图  
九 设置文本阴影--（ie10）  
text-shadow:水平偏移量 垂直偏移量 模糊距离 阴影颜色;  
  
  
十 溢出文本处理  
text-overflow:  
clip;不显示省略标记，而是简单的裁切  
ellipsis;当文本超出时以省略号的方式显示，省略号插入的位置是在最后一个字符  
ellipsis-word;省略号插入的位置是最后一个词  
white-space:  
nowrap;表示强制在同一行显示  
pre;表示显示语文本格式  
让文本显示在一行，超出部分显示省略号  
white-space:nowrap;  
text-overflow:ellipsis;  
overflow:hidden;  
十一 动画(@keyframes规则)---ie10  
\-webkit-  
animation:@keyframes名字 花费时间 速度曲线 延迟时间 播放次数 是否轮流反向  
速度曲线：  
linear，匀速播放  
ease，默认。先慢再快后慢的播放  
播放次数：  
n，代表播放n次  
infinite，无限循环  
轮流反向：  
normal，默认  
alternate，轮流方向播放  
  
  
十二 多列---ie10   
\-webkit-/-moz-  
属性：  
column-count:3;规定元素应该被分割的列数  
column-gap:50px/5%;设置列之间的间隙  
column-rule: color style width;设置列之间的宽度、样式和颜色规则  
column-span:1/all;规定元素横跨的列数，一般我们都写在标题标签上面  
十三 用户界面  
网页布局中有两种处理方式：渐进增强、优雅降级  
  
  
属性：  
box-sizing，允许以确切的方式定义适应某个区域的具体内容，写在子元素上面  
content-box,父容器的宽度和高度受子容器的content/border/margin/padding值的影响  
border-box,父容器的宽度和高度受子容器的content/margin值的影响,不受border/padding值的影响，同时向内收敛  
  
  
  
十四 多媒体查询---ie9  
针对不同的媒体类型可以定制不同的样式规则。  
响应式布局：设计一套方案，即可以适用于移动端也可以适用于pc端  
  
  
语法：  
@media not/only 媒体类型 and (表达式)\{  
  
  
css代码  
\}  
  
媒体类型：  
all 用于所有多媒体类型设备  
print 用于打印机  
screen 用于电脑屏幕，平板，智能手机等  
speech 用于屏幕阅读器  
not:用来排除掉某些特定设备的  
only:用来指定某种特别的媒体类型  
表达式：  
max-width/min-width/max-height/min-height...  
  
  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
字体单位  
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的  
em:相对长度单位。相对当前对象内文本的字体尺寸。  
如果当前文本的字体尺寸没有被人设置，则相对于浏览器的默认字体大小尺寸  
任意浏览器的默认字体大小都是16px.谷歌浏览器的最小支持的字体大小为12px  
  
  
如果没有设置浏览器的默认字体大小，那么  
1em=16px;  
10px=0.625em  
  
  
body\{  
font-size:62.5%;  
\}  
1em=10px  
  
  
rem:相对于根元素（即html元素）font-size计算值的倍数----ie9  
  
  
html\{  
font-size:62.5%;  
\}  
1rem=10px;  
  
  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
ViewPort  
我们的界面在移动端设备上是，我们的用户往往会对界面的内容进行缩放等操作，这时候我们往往需要使用ViewPort以此来限制我们的用户的某些操作  
<meta name="viewport" content=""/>  
width="device-width";宽度等于当前设备的宽度  
initial-scale:1.0;初始的缩放比例  
minimum-scale:1.0;允许用户缩放的最小比例  
maximum-scale:1.0;允许用户缩放的最大比例  
user-scalable:是否允许用户可以手动缩放用户界面（默认为no）  
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  
设置屏幕宽度为设备宽度，禁止用户手动缩放  
  
  
移动端的布局建议：使用的字体单位rem padding margin