<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 外链引用css -->
<link rel="stylesheet" href="../../1.css">
<!-- 内嵌使用css -->
<style type="text/css">
</style>
</head>
<body>
<!-- 行内样式 -->
<div style="xx:bb;xx:cc;"></div>
<!-- 行内元素
典型代表 span,p,a,strong,em,del,ins
特点:★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
行内块元素(内联元素)
典型代表 input img
特点:★在一行上显示
★可以设置宽高 -->
块元素转行内元素
display:inline;
div,p{//这样两个块元素就在一行了
display:inline;
}
行内元素转块元素
diaplay:block
p span{//这样两个就不在一行了,可以设置行高
display:block;
}
块,行内元素转行内块元素
display:inline-block
<div></div>
<a href=""></a>
<span></span>
div,a,span{//这样三个都在一行了,可以定义宽高
diaplay:inline-block;
text-align:center;
}
用display:inline-block,对于不可定义宽高的行内元素,如果需要定义宽高则用改为行内块元素去定义宽高.
层叠性:多个样式发生于同个标签上会发生冲突,这个时候最后的那个起效,覆盖前面的
<div class="box box2">color</div>
.box{
color:red;
}
.box2{
color:blue
}
最终表现出来的元素是蓝色
继承性:前提是包含(嵌套关系)
1.所有和文字有关的样式都可以继承,
特殊性:
1.h系列...不继承文字大小,浏览器会给默认大小
默认大小=2*继承的大小(2em)
h2是1.5em
2.a标签(链接颜色)不能继承颜色,浏览器赋予其默认的颜色
<div class="box">
<p>123</p>
</div>
.box{//虽然是给div标签加的样式,但是p标签也有
font:200px 微软雅黑
}
优先级:!important(1000以上)>行内块选择器(1000)>id选择器(100)>类选择器(10)>标签选择器(1)>默认样式(0)
如果就想用某个方式,把这个优先级置前,在后面加!important
.box{
color:red !important;//把优先级提到最高
}
优先级特点:
1.继承的权重和默认样式一样为0,如果自己没定义就用父级的,有定义就用自己的。
2.权重会叠加,.class(10)<p.class(11)<#baby(100)
#father #son(100+100)
#father p.c2(100+1+10)
链接伪类
a:link{属性:值;color:red}==a{属性:值//前提是要有href标签}
a:link{属性:值;color:red;color:red} //链接的默认状态
a:visited{属性:值;color:red}//链接访问之后的状态
a:hover{属性 :值;color:red}//鼠标放在链接上显示的状态
a:active{属性:值;color:red}//鼠标激活的状态
:focus{属性:值;color:red};//获取焦点
文本修饰
text-decoration:none||underline(下划线)||line-through(删除线)
a*9//一下创建多个a标签
背景属性
1.背景颜色:background-color:red
2.背景图片:background-image:url("../../1.jpg");
3.背景平铺:background-repeat:none(不平铺)||repeat-x||no-repeat(不平铺)||
repeat-y(沿y轴平铺)||repeat(默认:平铺)
4.背景定位:background-position:left||right||center||top||bottom
特点:当只写一个属性的时候默认自动加上了center(居中)
left center=left=20px=20px center没有顺序要求 右上角是right top,只是写一个center 就会完全居中。
完全写数字,第一个是x第二个是y,如果只有一个数那就是第二个是center
5.背景是否滚动:background-attachment:scroll(背景图片滚动) ||fixed(背景图片固定)
scroll+(background-position的属性)是根据当前图片的所在的元素内的位置,fixed+(background-position的属性)是基于整个浏览器大小的位置,所以有时候用fixed看不见图片这个时候扩大图片所在的元素大小就可以
背景属性连写:图片不能少,其他都可以,顺序没有要求
background:red url("") no-repeat left center scroll ;
清除列表项ul - li前面的小符号 list-style:none
text-indent:1em;内容的首行缩进|单位em,一个em相当于一个汉字的的大小
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 外链引用css -->
<link rel="stylesheet" href="../../1.css">
<!-- 内嵌使用css -->
<style type="text/css">
</style>
</head>
<body>
<!-- 行内样式 -->
<div style="xx:bb;xx:cc;"></div>
<!-- 行内元素
典型代表 span,p,a,strong,em,del,ins
特点:★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
行内块元素(内联元素)
典型代表 input img
特点:★在一行上显示
★可以设置宽高 -->
块元素转行内元素
display:inline;
div,p{//这样两个块元素就在一行了
display:inline;
}
行内元素转块元素
diaplay:block
p span{//这样两个就不在一行了,可以设置行高
display:block;
}
块,行内元素转行内块元素
display:inline-block
<div></div>
<a href=""></a>
<span></span>
div,a,span{//这样三个都在一行了,可以定义宽高
diaplay:inline-block;
text-align:center;
}
用display:inline-block,对于不可定义宽高的行内元素,如果需要定义宽高则用改为行内块元素去定义宽高.
层叠性:多个样式发生于同个标签上会发生冲突,这个时候最后的那个起效,覆盖前面的
<div class="box box2">color</div>
.box{
color:red;
}
.box2{
color:blue
}
最终表现出来的元素是蓝色
继承性:前提是包含(嵌套关系)
1.所有和文字有关的样式都可以继承,
特殊性:
1.h系列...不继承文字大小,浏览器会给默认大小
默认大小=2*继承的大小(2em)
h2是1.5em
2.a标签(链接颜色)不能继承颜色,浏览器赋予其默认的颜色
<div class="box">
<p>123</p>
</div>
.box{//虽然是给div标签加的样式,但是p标签也有
font:200px 微软雅黑
}
优先级:!important(1000以上)>行内块选择器(1000)>id选择器(100)>类选择器(10)>标签选择器(1)>默认样式(0)
如果就想用某个方式,把这个优先级置前,在后面加!important
.box{
color:red !important;//把优先级提到最高
}
优先级特点:
1.继承的权重和默认样式一样为0,如果自己没定义就用父级的,有定义就用自己的。
2.权重会叠加,.class(10)<p.class(11)<#baby(100)
#father #son(100+100)
#father p.c2(100+1+10)
链接伪类
a:link{属性:值;color:red}==a{属性:值//前提是要有href标签}
a:link{属性:值;color:red;color:red} //链接的默认状态
a:visited{属性:值;color:red}//链接访问之后的状态
a:hover{属性 :值;color:red}//鼠标放在链接上显示的状态
a:active{属性:值;color:red}//鼠标激活的状态
:focus{属性:值;color:red};//获取焦点
文本修饰
text-decoration:none||underline(下划线)||line-through(删除线)
a*9//一下创建多个a标签
背景属性
1.背景颜色:background-color:red
2.背景图片:background-image:url("../../1.jpg");
3.背景平铺:background-repeat:none(不平铺)||repeat-x||no-repeat(不平铺)||
repeat-y(沿y轴平铺)||repeat(默认:平铺)
4.背景定位:background-position:left||right||center||top||bottom
特点:当只写一个属性的时候默认自动加上了center(居中)
left center=left=20px=20px center没有顺序要求 右上角是right top,只是写一个center 就会完全居中。
完全写数字,第一个是x第二个是y,如果只有一个数那就是第二个是center
5.背景是否滚动:background-attachment:scroll(背景图片滚动) ||fixed(背景图片固定)
scroll+(background-position的属性)是根据当前图片的所在的元素内的位置,fixed+(background-position的属性)是基于整个浏览器大小的位置,所以有时候用fixed看不见图片这个时候扩大图片所在的元素大小就可以
背景属性连写:图片不能少,其他都可以,顺序没有要求
background:red url("") no-repeat left center scroll ;
清除列表项ul - li前面的小符号 list-style:none
text-indent:1em;内容的首行缩进|单位em,一个em相当于一个汉字的的大小
</body>
</html>