目录
锵锵!今天是学习前端的第三天。
1 CSS简介
CSS(Cascading Style Sheets)的全称是层叠样式表,是为网页添加样式的代码。
举一个形象的例子,将一个网页比作一栋大楼的话,HTML文件好比是构成大楼的的砖瓦,而CSS文件好比是大楼的设计图纸,通过CSS文件对HTML文件进行修饰,才构成丰富多彩的网页,不然单独的HTML文件运行出来的仅是单一的文本、图片等的堆砌。
2 CSS引用
CSS的引用有3种方式,分别为外部样式(最推荐),内部样式和行内样式。
- 外部样式:建立后缀为“.css”的独立文件
- 内部样式:在HTML文件头部<head>区域内使用<style>标签
- 行内样式:在HTML元素中使用“style”属性
举个例子:网页显示绿色的“Hello World!”
外部样式代码:
HTML文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>
CSS文件
p{
color:green;
}
内部式样代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
p{
color:green;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
行内式样代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<p style="color:green;">Hello World!</p>
</body>
</html>
这里最为推荐外部样式引用CSS,即建立独立于HTML文件的CSS文件,这样做有利于后期网页的维护,也能避免网页内容(HTML)与网页内容修饰(CSS)混为一谈,降低代码的可读性。
3 CSS基础结构
选择器{
属性:属性的值;
}
4 CSS简单案例
案例1:处理文本
HTML代码
<p>this is text</p>
CSS代码
p{
/* 辅助框线样式,start */
width:200px;
height:50px;
border:1px solid #a8a8a8;
/* 辅助框线样式,end */
text-align: center;
/*设置行间距 */
line-height:50px;
/*字母间距 */
letter-spacing:4px;
/*单词间距*/
word-spacing:20px;
/*设置文字颜色 */
color:red;
font-size:20px;
/* 无衬线字体,即笔画结尾是平滑的字体。*/
font-family:serif;
}
案例2:处理溢出文本
HTML代码
<p class="ellipse">我要溢出拉啦啦啦</p>
CSS代码
.ellipse{
width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
案例3:简单动画与旋转
简单动画HTML代码
<div class="trans">动画</div>
简单动画CSS代码
.trans{
width:100px;
height:100px;
background:red;
transition:width 2s;
/*X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
box-shadow:30px 40px 50px #888888;
}
效果:红色长方形长度变长,且时间为2s
旋转HTML代码
<div class="rotate">旋转</div>
旋转CSS代码
.trans:hover{
width:300px;
}
.rotate{
width:200px;
height:100px;
background-color:yellow;
transform:rotate(7deg);
}
效果:黄色长方形旋转7度
案例4:布局元素
HTML代码
<div class="box">box</div>
CSS代码
.box{
width:100px;
height:100px;
border:5px solid green;
border-bottom: 3px dotted #ffe9ee;
border:5px solid green;
border-radius:20px;
border:5px solid green;
padding:25px;
padding:30px 50px;
padding:10px 20px 30px 50px;
margin:25px;
margin:30px 50px;
margin:10px 20px 30px 50px;
}
内部含不同的限制条件
案例5:border属性的其他用法->绘制圆
HTML代码
<div class="circle"></div>
CSS代码
.circle{
width:109px;
height:100px;
border:2px solid green;
border-radius:50%;
}
效果:画一个绿色的圆
案例6:实现导航栏
HTML代码
<ul>
<li><a href="xx">主页</a></li>
<li><a href="xx">课程</a></li>
<li><a href="xx">其他</a></1i>
</ul>
CSS代码
ul{
/*设置列表元素的 marker */
list-style-type:none;
display:flex;
}
li a{
/*用于设置文本的修饰线外观的*/
text-decoration:none;
margin:10px;
}
案例7:loading动画
HTML代码
<div class="loading"></div>
CSS代码
.loading{
width:35px;
height:35px;
border:5px solid rgba(189,189,189 ,0.25);
border-left-color:rgba(3,155,229 ,1);
border-top-color:rgba(3,155,229 ,1);
border-radius:50%;
animation:rotate 500ms infinite linear;
}
/*通过在动画序列中定义关键帧的样式来控制CSS动画序列
@keyframes rotate{
from{
transform:rotate(0)
}
to{
transform:rotate(1turn)
}
}
效果:动态加载旋转圆形效果