CSS层叠样式学习总结.docx
- 文档编号:25740856
- 上传时间:2023-06-12
- 格式:DOCX
- 页数:19
- 大小:27.74KB
CSS层叠样式学习总结.docx
《CSS层叠样式学习总结.docx》由会员分享,可在线阅读,更多相关《CSS层叠样式学习总结.docx(19页珍藏版)》请在冰豆网上搜索。
CSS层叠样式学习总结
css3总结01
前缀
∙chrome:
-webkit-
∙safari:
-webkit-
∙firefox:
-moz-
∙ie:
-ms-
∙opera:
-o-
书写的时候应该先用有前缀的样式,再用无前缀的样式
颜色
∙rgb(red,green,blue);
∙rgba(red,green,blue,opacity[0-1]);
∙hsl(色度,饱和度,亮度);
色度为色轮的度数,0/360d代表红色,120代表绿色,240代表蓝色;
饱和度百分比值,100%表示完全显示该颜色;
亮度百分比值,0%代表黑色,100%代表白色,50%平均值
圆角
border-radius:
20px;//水平,垂直border-radius:
20px,20px;//左上,右上,右下,左下border-radius:
20px,20px20px20px;
下拉阴影
//水平;垂直;模糊直径;颜色box-shadow:
10px5px15px#000;//内阴影box-shadow:
10px5px15px#000inset;//水平;垂直;模糊直径;延展距离;颜色box-shadow:
10px5px15px15px#000;//多阴影box-shadow:
01px1px#fffinset,5px5px10px#000;
chromw:
-webkit-;safari:
-webkit-;ie>=9
文本阴影
//水平;垂直;颜色text-shandow:
1px1px#fff;//水平;垂直;模糊直径;颜色text-shandow:
1px1px.3em#fff;
渐变
默认下渐变是垂直方向的;也可以传递一个位置参数来改变方向
linear-gradient(#ccc,#ddd,white);//设定一个倾斜度
linear-gradient(-45deg,#ccc,#fff);//水平渐变
linear-gradient(left,#ccc,#fff);//设置颜色停止值
linear-gradient(white,#ddd20%,black);
选择器
//选中的第一个元素:
first-child//选中的最后一个元素:
last-child//选中的元素是其父元素的唯一子元素:
only-child//选中当前URL的哈希中的目标元素:
target
//选中复选框以被勾选的元素
:
checked
∙nth-child选择器
nth-child(n);
nth-child(even);/nth-child(2n);
nth-child(odd);/nth-child(2n+1);
∙直接后代选择器
>
∙否定选择器
:
not(.current)
ie>=9
过渡
transition:
持续时间,属性,[动画类型];//多个动画transition:
2sopacity,.5sheightease-in;
定时函数种类
∙linear
∙ease-in
∙ease-out
∙ease-in-out
例子
div{
background:
pink;
width:
50px;
height:
50px;
-moz-transition:
2swidthease-in,2sheightease-out;/*Firefox4*/
-webkit-transition:
2swidthease-in,2sheightease-out;/*SafariandChrome*/
-o-transition:
2swidthease-in,2sheightease-out;/*Opera*/
transition:
2swidthease-in,2sheightease-out;}div:
hover{
width:
100px;
height:
150px;}
div{
position:
absolute;
left:
10px;
-moz-transition:
2sleft
-webkit-transition:
2sleft;
-o-transition:
2sleft;
transition:
2sleft;
}
div:
hover{
position:
absolute;
left:
100px;
}
firefox:
-moz-; chrome:
-webkit-;safari:
-webkit-;ie>=10;opear:
-o-;
css3总结03
∙
box-flex:
设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
∙
#box{display:
box;width:
240px;height:
100px;margin:
0;padding:
10px;list-style:
none;}#boxli:
nth-child
(1){box-flex:
1;}#boxli:
nth-child
(2){box-flex:
1;}#boxli:
nth-child(3){box-flex:
2;}
注意box-flex只是动态分配父元素的剩余空间,而不是整个父元素的空间。
如上例,父元素#box的宽度为240px,如果你认为a,b,c的宽度分别为60,60,120那么就错了,因为box-flex只是分配父元素的剩余空间而已,所以a,b,c所分到的应该是除内容外所剩余下来的宽度
box-flex-group:
设置或检索弹性盒模型对象的子元素的所属组。
box-ordinal-group:
设置或检索弹性盒模型对象的子元素的显示顺序。
box-direction:
设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
box-lines:
设置或检索弹性盒模型对象的子元素是否可以换行显示。
.hbox{
display:
-webkit-box;
-webkit-box-orient:
horizontal;
-webkit-box-align:
stretch;
-webkit-box-pack:
start;
display:
-moz-box;
-moz-box-orient:
horizontal;
-moz-box-align:
stretch;
-moz-box-pack:
start;
}
.vbox{
display:
-webkit-box;
-webkit-box-orient:
vertical;
-webkit-box-align:
stretch;
display:
-moz-box;
-moz-box-orient:
vertical;
-moz-box-align:
stretch;
}
上面将display设置为-webkit-box或-moz-box-,然后设置子元素布局的方向。
默认情况下,所有子元素都将自动扩充为父元素一样的大小。
但通过设置box-flex属性却可以修改默认行为
#sidebar{
-webkit-box-flex:
0;
-moz-box-flex:
0;
box-flex:
0;
width:
200px;
}#content{
-webkit-box-flex:
1;
-moz-box-flex:
1;
box-flex:
1;
}
如果设置box-flex为0,就指定了该元素不允许扩充;相反设置1或更大的数值该元素会自动扩充可利用的内容空间。
上面对侧边栏设置flex为0;而主内容区设置flex为1
字体
@font-face{
font-family:
'Bitstream'
src:
url('/Bitstream.ttf');}#font-example{
font-family:
Bitstream;}
css实例--文字/字体
使用自定义字体:
∙在CSS2中font-family属性只能使用两个字体:
∙通用字体:
Serif字体,Sans-serif字体,Monospace字体,Cursive字体,Fantasy字体;
∙特定字体:
如Times,Courier等,要求计算机已经安装该字体;
使用@font-face:
1
2
3
4
5
6
7
@font-face{
font-family:
example;
src:
url('example.ttf'),url('example.eot');/*IE9+*/
}
div{
font-family:
example;
}
文本缩进和首字符下沉:
∙缩进:
text-indent;
∙首字符设置:
:
first-letter;
文本被选中:
1
2
3
:
:
selection{}
//老版本的firefox
:
:
-moz-selection{}
调整文字,字符间距:
∙demo:
∙word-spacing:
空格距离;
∙letter-spacing:
子间距离;
∙line-heigh:
文本行间距;
∙white-space:
空格,换行符的控制;
∙强制换行:
word-wrap:
break-word; word-break:
normal;
文字阴影/框阴影:
∙text-shadow:
h-shadow(必须) v-shadow(必须) blur color;
∙文字毛玻璃效果:
∙box-shadow:
h-shadow(必须) v-shadow(必须) blurspreadcolorinset;
文本溢出处理:
∙demo:
∙overflow:
主要在对高度的处理,如果宽度不够,默认会换行;
∙text-overflow:
主要对宽度的处理,在设置white-space:
nowrap;阻止换行之后可以设置默认(clip)或省略(ellipsis);
高级文字设置:
∙金属质感文字
∙linear-gradient:
(direction,color-stop1,color-stop2,...);
隐藏文本:
∙使用display;
∙使用opacity;
∙使用text-indent;
1
2
3
4
h1{
text-indent:
-9999px
............
}
∙使用定位;
1
2
3
4
5
h1{
position:
absolute;
top:
-9999px;
left:
-9999px;
}
文字旋转:
1
2
3
-ms-transform:
rotate(30deg); /*IE9*/
-webkit-transform:
rotate(30deg); /*Chrome,Safari,Opera*/
transform:
rotate(30deg);
结构性伪类
E:
root
匹配文档的根元素。
在HTML(标准通用标记语言下的一个应用)中,根元素永远是HTML
结构性伪类
E:
nth-child(n)
匹配父元素中的第n个子元素E
结构性伪类
E:
nth-last-child(n)
匹配父元素中的倒数第n个结构子元素E
结构性伪类
E:
nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
结构性伪类
E:
nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类
E:
last-child
匹配父元素中最后一个E元素
结构性伪类
E:
first-of-type
匹配同级兄弟元素中的第一个E元素
结构性伪类
E:
only-child
匹配属于父元素中唯一子元素的E
结构性伪类
E:
only-of-type
匹配属于同类型中唯一兄弟元素的E
结构性伪类
E:
empty
匹配没有任何子元素(包括text节点)的元素E
一、E:
root,匹配文档的根元素
二、 E:
nth-child(n),匹配父元素的第n个孩子元素E
nth-child选择的是父元素的子元素,其中要满足两个条件:
①没有规定确切的类型,只要是子元素;②该元素要在第n的位置。
只需要看在父元素下的第n个孩子是否是E,如果是那么就匹配否则就不匹配。
p:
nth-child
(2):
选择的是父元素的第二个P类型的孩子节点,p:
nth-of-type
(2):
选择的是父元素的所有孩子节点的P类型的第二个。
对于理解了E:
nth-child(n)之后,对于结构伪类的理解很有帮助,其他类型都是在这个的基础上的特殊情况。
另外,结构伪类中一个比较特殊的用法是选择指定的元素的位置。
nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)中的N在选择器中的使用,这个参数可以是整数(1、2、3、4)、关键之(odd、even),还可以是公式(2n+1、-n+5).但参数n的起始值始终是1而不是0.
1、参数可以是数值;
2、参数n为表达式【n*length】:
单length为整数1时,将选择整个系列中的所有元素,直到元素无法选择为止。
例如:
":
nth-child(2n)"
n=0时,2*0=0,不选任何元素;
n=1时,2*1=2,选中的是系列中的第2个元素;
3、参数n为表达式"n+length",例如:
":
nth-child(n+3)"
n=0时,0+3=3,选中的是第3个元素;
n=1时,1+3=4,选中的是第4个元素;
4、参数n为表达式【-n+length】,例如:
":
nth-child(-n+3)"
n=0时,-0+3=3,选中的是第3个元素;
n=1时,-1+3=2,选择的是第2个元素;
当为负数的时候,不选择任何元素。
5、如果n的表达式为【2*n+1】或者【2*n-1】,那么此时与odd的效果相同,一样的【2n】与even的效果是一样的
这里有一个比较特别的用法就是从父元素的相反方向进行匹配,:
last-child,:
nth-last-child,:
nth-last-of-type(n),:
last-of-type,这几个选择器都是从父元素的最后一个开始匹配。
为了方便记忆和查询,把CSS的结构伪类选择器归为四类:
1)通用子元素过滤器:
E:
nth-child(n)(顺序过滤)和E:
nth-last-child(n)(逆序过滤)
2)通用子类型元素过滤器:
E:
nth-of-type(顺序过滤)和E:
nth-last-of-type(n)(逆序过滤)
3)特定位置的子元素:
E:
first-child,E:
last-child,E:
first-of-type,E:
last-of-type
4)特定状态的元素:
E:
root(根节点)、E:
only-child(独子元素)、E:
only-of-type(独子类型元素)和E:
empty(孤节点)
CSS介绍
☆CSS全称为“层叠样式表(CascadingStyleSheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
☆选择符:
又称选择器,指明网页中要应用样式规则的元素。
声明:
在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:
”分隔。
当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{font-size:
12px;color:
red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
font-size:
12px;
color:
red;
}
☆CSS中也有注释语句:
用/*注释语句*/来标明,Html中使用
--注释语句-->。
CSS样式的基本知识
☆CSS样式代码插入的形式来看基本可以分为以下3种:
内联式、嵌入式和外部式三种。
一、内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
red">这里文字是红色。
二、嵌入式css样式,就是可以把css样式代码写在
如下面代码实现把标签中的文字设置为红色:
span{
color:
red;
}
嵌入式css样式必须写在之间,并且一般情况下嵌入式css样式写在
之间。三、外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在
内(不是在