聊聊CSS的那些事

今天作业是在上次html的UML试卷上加上CSS,使我们的试卷长这样:

加上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样式,不推荐使用。

二.文本格式

  1. 文本的对齐方式
    文本排列属性是用来设置文本的水平对齐方式,可居中或对齐到左或右,两端对齐.
h1 {text-align:center;}  /*h1水平居中*/
p.date {text-align:right;}  /*p水平居右*/
p.main {text-align:justify;} 
/*每一行被展开为宽度相等,左,右外边距是对齐*/
  1. 文本修饰
    text-decoration 属性用来设置或删除文本的装饰
  2. 文本缩进
    文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}

三. CSS的盒模型

盒模型图
  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像

四.图标

图标参考网址,想要什么图标自己挑吧

五.调试

调试工具是Chrome浏览器的调试工具。
打开 Google Chrome 浏览器,打开控制台,选择element,最后审查元素看属性即可。
好了,开始写作业啦!
完整作业源码在这里

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,055评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0 1
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,884评论 0 6
  • 温和的阳光,平静地洒在公交车站上。耳边充斥着刹车声,人群嗡嗡作响让我烦躁。 “29路来了~”人群中...
    29路公交阅读 187评论 0 0