今天作业是在上次html的UML试卷上加上CSS,使我们的试卷长这样:
怎么完成呢?我们来分析梳理一下CSS的基础知识吧。
一.将CSS引入html文件中
有3种方式:
- 外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择,一个.css文件引入到HTML文件,一般推荐使用。格式如下:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
或
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
- 内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。格式如下:
<head>
<style type="text/css">
...此处写CSS样式
</style>
</head>
- 内联样式
当特殊的样式需要应用到个别元素时,就可以使用行内样式,是在标记的style属性中设定CSS样式,不推荐使用。
二.文本格式
- 文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式,可居中或对齐到左或右,两端对齐.
h1 {text-align:center;} /*h1水平居中*/
p.date {text-align:right;} /*p水平居右*/
p.main {text-align:justify;}
/*每一行被展开为宽度相等,左,右外边距是对齐*/
- 文本修饰
text-decoration
属性用来设置或删除文本的装饰 - 文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
三. CSS的盒模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像
四.图标
图标参考网址,想要什么图标自己挑吧
五.调试
调试工具是Chrome浏览器的调试工具。
打开 Google Chrome 浏览器,打开控制台,选择element
,最后审查元素看属性即可。
好了,开始写作业啦!
完整作业源码在这里