秋雯

CSS初步学习

一、CSS
二、CSS语法及生效方式
三、三种样式&颜色、尺寸与对齐
四、BOX&边框与边距
五、定位&溢出
六、浮动&设置不透明度
七、组合选择器&伪类和伪元素
八、总结

使用CSS需用到VS Code软件，软件下载及配置同HTML 详情参考HTML入门学习第一条

一、CSS

CSS：级联样式表（Cascading Style Sheets）。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。如果说HTML之于网页就如同身体的骨骼之于我们，那么CSS之于网页就像血液、器官之于我们，同样是不可缺少的，但是基于HTML来进行构建。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等则由CSS来搭建。

二、CSS语法及生效方式

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

例：

/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
  color:red;
  text-align:center;  /* 文本居中 */
}

选择器
一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。除元素选择器外，还有id选择器和class选择器。其中class选择器使用非常普遍。

id 选择器：

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

class选择器：

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

实践操作：
首先创建一个后缀为.css的文件，输入以下代码

/* 这是CSS的注释 */
/* 建议每条申明占一行 */

 /* 注意：id选择器前有 # 号。 */ 
#sky{
    color: blue;
  }
#forest{
    color: green;
  }
/* 注意：class选择器前有 . 号。 */
.center{
    text-align: center;
  }
  .large{
    font-size: 30px;
  }
  .red{
    color: red;
  }

再创建一个HTML文件，输入以下代码

<html>
<head>
  <meta charset="utf-8">
  <title>HTMLtitle>
  <link rel="shortcut icon" href="./image/first.ico">
  <link rel="stylesheet" href="no1.css">
head>
<body>
    <p id="sky">蓝色的天空p>
    <p id="forest">绿色的森林p>
  <p class="center">我会居中显示的p>
  <p class="red">我是红色的p>
  <p class="center large red">我又红又大还居中p>
  <p class="red">我也可以是红的p>
body>
html>

结果如下：

三、三种样式&颜色、尺寸与对齐

定义 CSS样式有三种方法：外部样式表，内部样式表，内联样式

外部样式表：即新建一个CSS文件来专门存放样式表，然后在HTML文件中调用CSS文件。与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表：即将样式放在 HTML 文件中，在元素中引入