闲时业余编程笔记——CSS 基础篇(一)

闲时业余编程笔记——CSS 基础篇(一)


相关软件

  • Sololearn Android 端

  • Dcoder Android 端

一、写在前面的

  本篇笔记的内容均来自于Sololearn所提供的英文教程,本篇笔记用于记录业余时间所学的
基础编程内容。

二、关于 CSS

2.1 什么是 CSS?

  CSS即Cascading Style Sheets,Cascading是指CSS将一种样式叠加在另一种样式上的方
式,Style Sheets控制web文档的外观。CSS总是跟HTML手拉手一起工作的(2333基友既视感.jpg)
* HTML整理页面结构
* CSS定义HTML元素的显示方式

注意:要想了解 CSS,需要之前了解 HTML 的基础知识(在 SoloLearn 中提供了 HTML 的基础教程)

2.2 为什么要使用 CSS?

  CSS允许你自定义展示HTML的元素,CSS最主要的优点是它允许程序员从内容中分离出样式。
如若仅仅使用HTML,所有的样式跟格式都挤在一起;随着页面的增加,维护就变得相当的困难。

注意:Sololearn 上强烈建议把所有的 formatting(格式)都从 HTML 文档中删除,并储存在一个单独的 CSS 文件中

三、CSS 的写法

3.1 Inline CSS(内联式 CSS)

  使用内联式CSS是输入一张style sheet的方式之一。使用内联样式可以将一种独特的样式应
用于一个单个元素。
  向the relevant tag(相关标签)添加the style attribute(样式属性)就可以使用内
联样式。

下面代码演示了一段如何创建背景色是灰色,字体颜色是白色的段:

  <p style="color:white;background-color:gray;">
    这是内联式样式的例子
  </p>

注意:The style attribute(样式属性)可以包含任意的 CSS property(性质)

3.2 Embedded/Internal CSS(嵌入式 / 内部 CSS)

  内部样式用<style>元素,在HTML页面的head(标题)部分定义。

下面代码演示了样式应用于所有段:

  <html>
    <head>
      <style>
        p {
          color:white;
          background-color:gray;
        }
      </style>
    </head>
    <body>
      <p>这是第一段</p>
      <p>这是第二段</p>
    </body>
  </html>

注意:如果单个页面具有独特的样式,则可以使用内部 style sheet。

3.3 External CSS(外部 CSS)

  使用这种方法,所有的样式规则被包括在一个独立的文件之中,文件的后缀为.css。
  使用<link>标签在HTML中引用css文件,<link>元素在head内。

下面是一段示例代码:

HTML 部分:

  <head>
    <link rel="stylesheet" href="example.css">
  </head>
  <body>
    <p>这是第一段</p>
    <p>这是第二段</p>
    <p>这是第三段</p>
  </body>

CSS 部分:

  p {
    color:white;
    background-color:gray;
  }

注意:定义 css 文件的 href 用绝对路径和相对路径都行。示例中用的是相对路径,css 文件跟 html 文件处于同一目录下。