CSS:层叠样式表,用来美化页面
选择器{
属性:值;
}
div{
color: red;
}
以标签名为选择器名,这样写可以控制所有这类标签的样式
.tt{
color: blue;
}
<div class="tt">hhhhhhdsd</div>
<div class="tt">sdasdasd</div>
<p class="tt">dhsdhsjh</p>
<a href="#" class="tt">sdsad</a>
.类名为选择器名,会选择整个页面上类名相同的标签,一个标签里可以写多个类
#ss{
color: blue;
}
<div id="ss">nihao a </div>
#id名为选择器,根据id找到标签
*{
color: blue;
}
*可以选择所有元素进行样式控制
div p{
color: blue;
}
<div>
<p>
<a href="#">kkk</a>
<a href="#">ksas</a>
</p>
<a href="#">jjj
<p>kdlsdk</p></a>
</div>
div p用空格隔开,可以控制所有div标签下的所有p标签,选择器用空格隔开,后面的选择器必须要在前面的选择器里有的
div>p{
color: blue;
}
<div>
<p>
<a href="#">kkk</a>
<a href="#">ksas</a>
</p>
<a href="#">jjj
<p>kdlsdk</p>
</a>
</div>
div>p用‘>’隔开,只会选择div标签下的第一层中p标签,于是a标签的下p标签是不会被选中的
div+p{
color: red;
}
<p id="p1">dsdasdada</p>
<div>kkkkk</div>
<p id="p2">kksdksdk</p>
<p id="p3">sdaaddjkjdjj</p>
div+p用‘+’加号隔开,只会选择id为p2的p标签
div~p{
color: red;
}
<p id="p1">dsdasdada</p>
<div>kkkkk</div>
<p id="p2">kksdksdk</p>
<p id="p3">sdaaddjkjdjj</p>
<span>ssss</span>
<a href="#">dhshdhashd</a>
div~p用‘~’隔开,选择的是div标签后面的所有p标签
p.p1{
color: brown;
}
<p>jjjjjjjj</p>
<p class="p1">dsdasdada</p>
<div>kkkkk</div>
<p class="p1">kksdksdk</p>
<p class="p1">sdaaddjkjdjj</p>
<span>ssss</span>
<a href="#" class="p1">dhshdhashd</a>
p.p1连着写在一起,会选择既是p标签又是属于p1类的,所以第一个p标签不满足
a,.p1{
color: brown;
}
<p>jjjjjjjj</p>
<p class="p1">dsdasdada</p>
<div>kkkkk</div>
<p class="p1">kksdksdk</p>
<p class="p1">sdaaddjkjdjj</p>
<span>ssss</span>
<a href="#" class="p1">dhshdhashd</a>
选择器之间以‘,’逗号隔开,会选择满足a标签或者.p1类的
/* 未访问的链接 */控制a标签
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多,当鼠标停留在上面时的样式
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间,可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
#将p标签中的文本的第一个字变颜色变大小
p:first-letter {
font-size: 48px;
color: red;
}
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
我们可以通过不同的选择器来选择标签,如果多个选择器选中了同一标签时,该以那个选择器来渲染标签呢?于是就牵扯到选择器的优先级问题。
div{
color: blue;
}
<div>
aasdasdsad
<p>
<a href="#">kkkkk</a>
<span>dasdas</span>
</p>
<a href="#">kkdkkdkksk</a>
<span>rewrrrreerrre</span>
</div>
此时div标签下的所有标签前的文本颜色都会继承div标签的文本颜色。但注意继承的优先级是最小的。color,text—,font-,line-,cursor可以被继承的
例外:
a标签不继承颜色
h标签不继承font-size,font-weight
在复合选择器中,如何计算选择器权重,只要出现important,优先级永远是最高的,其次是行内样式
行内:1000
id:100
类:10
元素:1
继承:0
把所有的权重相加,但是永不进位
display:block
会独自占据一整行,可以设置有效的宽高,子元素默认和父元素一样宽,代表div,h1-h6
display:inline
一行上可以显示多个,不能设置有效的宽高,其宽高依赖于内容,代表span,strong,em
display:inline-block
一行上可以显示多个,可以设置有效的宽高,代表img,input
我们可以通过display属性来重新设置标签属性
两者都有隐藏的作用
visibility:hidden隐藏的元素仍然占据空间,该元素虽然被隐藏了,但仍然会影响布局
display:none隐藏的某个元素不会占据空间,不会影响布局
font-style:值 控制字体是否斜体
可选值:normal 正常,italic 斜体,oblique 斜体
font-weight:值 控制字体粗细
可选值:normal 正常,bold 加粗,bolder 更粗,lighter 细体
还可以写数值,100-900间,400相当于normal,700相当于bold
bolder和light会受到字体的现在,一般中文到达bold就是最大,并且一般中文没有细体
font-size:值 控制字体大小
值为数字,后面跟上单位px,网页上的默认为16px
font-family:值 控制字体
值为所有字体类型,比如宋体,楷体。。。。
font连写
font:font-weight font-style font-size font-family
前两个可以省略,前两个可以互换位置,后两个只能固定位置,并且不能省略
background-color:值 设置背景颜色
background-image:url(图片的路径) 控制的是背景图片
background-repeat:值 控制背景图片是否重复(平铺)
值可选:no-repeat 不平铺,repeat-y 垂直平铺,repeat-x 水平平铺,repeat 两个方向平铺
background-position:值 控制背景图片的位置
值可选:水平:left center right 垂直:top center bottom
长度赋值:先写x的位移,再写y的位移
background-attachment:值 控制背景图片是否随着滚动条滚动
值可选:scroll 默认的随着滚动条滚动 , fixed 不滚动
background连写
background:red url(图片路径) no-repeat top center 属性没有顺序要求,都可以省略
text-align:值 文本的水平对齐方式
值可选:left 左对齐,center 居中对齐,right 右对齐
text-decoration:值 文本修饰
值可选:none 正常,underline 下划线,overline 上划线,line-through 删除线
text-indent:值 文本首行缩进
值为数字加上单位px,单位也可以为em,1em为一个字体大小
border-style:值 控制边框的样式
值可选:none 无边框,dotted 点状虚线边框,dashed 矩形虚线边框,solid 实线边框
border-weight:值 设置边框宽多少
值为数字加单位px
border-color:值 设置边框颜色
border连写
border:2px solid red;
除了统一设置边框之外,还可以单独为某一边设置边框
border-top-style:值 ,border-top-color:值 , border-top-weight:值 这是为上边框设置属性,还可以换成right,left,bottom
border-radius:值 用这个属性能实现圆角边框的效果
值可为数字加单位px,当为宽或高的一半时,就为圆形,值还可以为百分数,当为50%时,也为一个圆。两种前提是在正方形下
颜色可以三种表示方式:
1,十六进制值,如#ff0000,前两位表示红色,中间两位表示绿色,最后两位表示蓝色,如#ffffff表示白色,#000000表示黑色
2,用rgb表示,如rgb(255,0,0),第一个参数表示红色,第二个参数表示绿色,第三个参数表示蓝色,每个参数为0-255
3,用颜色名字表示,如red
4,用rgba(255,0,0,0.3),这和rgb差不多,只是多了第四个参数叫透明度,范围是0.0-1.0
opacity属性设置透明度
opacity:值 值为0-1,0为完全透明,1为完全不透明
在css里面,每个标签可以称为一个盒子模型
margin:外边距,用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间距,从视觉上达到相互隔开的目的
padding:内边距,用于控制内容与边框之间的距离
border:边框
content:盒子的内容,显示文本和图像
margin和padding一样,可以为四边同时设置:
margin:2px 四边都是2px
margin:2px 3px 上下为2px,左右为3px
margin:2px 3px 4px 上为2px,左右为3px,下为4px
margin:2px 3px 4px 5px 上为2px,右为3px,下为4px,左为5px
也可以为margin和padding的某一条边单独设置top,bottom,left,right
margin-top:2px
float可以让块级标签并排在一行,但如果设定了float,浮动框就不在文档的普通流,比如在一个div1里并排放了两个div浮动框,由于浮动框脱离了文本,导致原先的大div1没有了内容,若此时在div1下面加一个div2,给div2加内容,由于div没有内容相当于不存在,
所以div2就会占据div的位置,出现两个浮动框在div2上面的效果,但不是我们想要的结果,这就是float的副作用。如下图
float:值 值可选为left 向左浮动,right 向右浮动,none 默认值,不浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t1{
width: 200px;
height: 200px;
float: left;
background-color: aqua;
}
.t2{
width: 300px;
height: 200px;
float:right;
background-color: red;
}
.t3{
width: 400px;
height: 300px;
background-color: blue;
}
.t4{
width: 600px;
}
</style>
</head>
<body>
<div class="t4">
<div class="t1"></div>
<div class="t2"></div>
</div>
<div class="t3"></div>
</body>
</html>
副作用代码
1,可以为div1标签设置一个高度,占据位置
2,clear属性
clear属性规定元素的那一侧不允许其他浮动元素
clear:值
值可选:left 在左侧不允许浮动元素,right 在右侧不允许浮动元素,both 左右两侧都不允许,none 允许,inherit 从父元素继承clear属性的值
解决副作用,我们可以在div2标签中加上clear属性,是可以解决问题的,但这种情况下,我们在添加标签时都要判断是否有浮动,很麻烦
所以我们在有浮动的标签之后加上一个标签,内容为空,含有clear属性也可以解决问题
<div class="t1"></div>
<div class="t2"></div> 上面两个为浮动标签
<div class="t5" style="clear: both"></div> 这为解决副作用加的含有clear属性的标签,由于内容为空,也不会占位置
最常用的写法,用伪元素清除法
.clearfix:after{
content: '';
display: block;
clear: both;
}
<div class="t4 clearfix">
<div class="t1"></div>
<div class="t2"></div>
</div>
overflow:值
值可选:visible 内容不会被修剪,会呈现在元素框之外,hidden 内容会被修剪,并且溢出的内容是不可见的,scroll 内容会被修剪,但是浏览器会显示滚动条以便查看溢出的内容,auto 如果内容被修剪,则浏览器会显示滚动条以便查看溢出的内容,
inherit 从父元素继承overflow的值
overflow还可以写成overflow-x(设置水平方向,只出现x轴的滚动条),overflow-y(设置垂直方向,只出现y轴的滚动条)
圆形头像的制作代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
}
img{
max-width: 100%;
}
</style>
</head>
<body>
<div>
<img src="张钧蜜.png" alt="">
</div>
</body>
</html>
圆形头像
相对定位是相对于该元素在文档流中的原始位置,在这种情况下,虽然原来的位置没有了内容,但依然占据位置,即占据文档流空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t1{
width: 100%;
height: 200px;
background-color: blue;
}
.t2{
width: 200px;
height: 100px;
background-color: aqua;
position: relative;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="t1"></div>
<div class="t2"></div>
</body>
</html>
相对定位
设置为绝对定位的元素框会从文本流出来,也就不会占据原来的位置,同时也会出现父级塌陷的现象,绝对定位是相对于父级位置来的(父级必须是relative,也就是父级要是相对定位的,父级没有,就找父级的父级),若都没有,那它的位置相对于body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t1{
width: 100%;
height: 100px;
background-color: red;
}
.t2{
width: 200px;
height: 100px;
position: relative;
top: 20px;
left: 300px;
background-color:greenyellow;
}
.t3{
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
top: 100px;
left: 200px;
}
.t4{
width:100px;
height: 50px;
background-color: darkgray;
}
.t5{
width: 100%;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="t1"></div>
<div class="t2">
<div class="t3"></div>
<div class="t4"></div>
</div>
<div class="t5"></div>
绝对定位
fixed:元素脱离正常文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#t2{
width: 100px;
height: 2000px;
border:1px solid black;
}
#t3{
width: 100px;
height: 30px;
background-color: coral;
line-height: 30px;
text-align: center;
position: fixed;
bottom: 200px;
right: 40px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<p id="t1">标题</p>
<div id="t2"></div>
<div id="t3"><a href="#t1">回到顶部</a></div>
</body>
</html>
fixed做的回到顶部元素
z-index设置对象的层叠顺序,一般用在模态对话框上。
我们为层叠的元素设置一个z-index值,值大的会盖住值小的,如果没有设置z-index,写在后面的会压着前面的
z-index:值 值为正整数就行
只有定位的元素才有z-index
从父现象:父级的z-index小了,就算你的z-index再大,也没用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t1{
width: 500px;
height: 1000px;
border:1px black solid;
background-color: red;
}
.t2{
width: 100%;
height: 2000px;
background-color:rgba(0,0,0,0.3);
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
.t3{
width: 500px;
height: 300px;
border: 1px red solid;
position:fixed;
top: 300px;
left: 600px;
background-color: rgba(255,255,255,0.9);
z-index: 10;
}
</style>
</head>
<body>
<div class="t1">sdgsadgasdgajh</div>
<div class="t2"></div>
<div class="t3"></div>
</body>
</html>
初级版模态