今天作业是在上次html的UML试卷上加上CSS,使我们的试卷长这样：
加上CSS的试卷
怎么完成呢？我们来分析梳理一下CSS的基础知识吧。
一.将CSS引入html文件中
有３种方式：
- 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择，一个.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,最后审查元素看属性即可。
好了，开始写作业啦！
完整作业源码在这里
网友评论