马进军-20201028
1.块级标签(p ul div)跟内容无关
行级标签(a span img)跟内容有关
CSS3.0 层叠样式表-修饰网页
选择器(镜子):精确的选准要修饰的目标。 用link将css和html连接起来<link rel="stylesheet" href="css/style.css"/>
常用选择器:1.类选择器(共用) 标签中用class .box{
width:300px;
height:200px;
background-color:red;
}
2.标签选择器 h1{
width:400px
height:200px
background-colcor:#1100a
}
3.id选择器 #box{ width:400px
height:200px
background-colcor:#123
}
4.后代选择器 p ul li{
color:green;
}
5.伪类选择器(鼠标悬停状态) a:hover{
text-decoration
}
优先级:id选择器>类选择器>标签选择器
修饰字体和文本样式
.box{
width:600px
height:300px
border:1px #000000 solid;
}
div{
color: red;/修饰字体的颜色/
font-size: 30px;/修饰字体的大小/
font-family: "宋体";/字体类型/
font-style: italic;/字体的样式/
font-weight: bold;/字体加粗/
letter-spacing: 5px;/字体间距/
text-align;center;/对齐方式/
line-height:300px;/行高/
text-decoration: overline;/文本划线/
text-shadow: 2px 2px 3px yellow;/字体阴影/ 1.水平阴影距离 2.垂直阴影距离 3.模糊距离
text-indent: 2em;/首行缩进/
}
修饰背景的常用样式
.box{
width:300px
height:300px
div{
background-color: red;/背景颜色/
background-image:url(../img/icon.jpg); ../(返回上一级目录) /背景图片/
background-size: 300px 300px;/背景图片的大小/ cover背景图片完全覆盖背景的区域
background-repeat: no-repeat;/背景图片平铺/
background-attachment: fixed
background-position: -100px 0; /背景图片平移/
}
心得体会:在老师今天讲解的过程中,感觉网页的设计很神奇,虽然内容很多很杂 但是有兴趣去学。毕竟现在学的知识以
后说不定可以用的上,所以这次实践我们应该好好学习。
近期评论