2023百度前端训练营Day03-CSS基础

最新推荐文章于 2025-12-04 00:13:33 发布

原创最新推荐文章于 2025-12-04 00:13:33 发布 · 155 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

百度前端训练营

3 篇文章

订阅专栏

锵锵！今天是学习前端的第三天。

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)
    }
}

效果：动态加载旋转圆形效果