CSS学习总结
CSS是级联样式表(Cascading Style Sheets)的缩写,CSS是基于html的进一步学习,html用于撰写页面的内容,是一门美化网页的技术,可以让你所写的html页面内容按照你心中想的格式初步实现在网页上现实出来。使用CSS设置样式,可以让展示数据的HTML代码和设置样式的CSS代码进行分离,以此增强网页的展示能力。
在上一部分html学习中,已经初步掌握了静态网页的制作,但是就这样做出来显示的网页效果却很丑,这部分,通过CSS的学习,我掌握了一些基本的网页美化知识。但是这对实际网页的应用制作还不够,继续期待下一部分内容的学习。
网页中一些内容的颜色、尺寸、对齐
文本颜色
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>
尺寸
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}
对齐
对于元素中的文本,我们可以简单的设置text-align属性为left, center, right即可
盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。无论边框、内边距还是外边距,它们都有上下左右四个方向。
浮动
在一个区域或容器内,我们可以设置float属性让某元素水平方向上向左或右进行移动,其周围的元素也会重新排列。比如设置让图片向右浮动,后面的元素会围绕这个图片,这个在平常的网页制作中比较实用。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
modi nam vero!</p>
</body>
</html>
不透明度
透明度在图片的应用中比较常用,也是一个重要内容。可以用opacity对任何元素设置不透明度,值在[0.0~1.0]之间,值越低,透明度越高。