CSS学习心得

CSS

一、CSS简介
二、CSS语法
- 1.id 选择器
- 2.class 选择器
三、CSS的应用
- 1、外部样式表
- 2、内部样式表
- 3、内联样式
四、颜色、尺寸、对齐
五、CSS文档分析
- 1、盒子模型
- 2、边框与边距
- 3、定位
- 4、溢出 overflow
- 5、浮动 float
- 6、不透明度
- 7、组合选择器
总结

一、CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。这说明一个真正网页的值作CSS有者举足轻重的作用。

二、CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明
1、选择器是需要改变样式的对象。
2、每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
3、属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

1.id 选择器

id选择器前有 # 号。
例如：

#sky{
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色。
注意：id 选择器适用范围只有一个元素。

2.class 选择器

class选择器前有 . 号。
例如：

.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

引用

我又红又大还居中

注意：元素的class值可以多个，也可以重复。
所以，class选择器比id选择器应用的广泛

三、CSS的应用

1、外部样式表

首先在VS Code中新建一个HTML文件，（后缀为.html）
例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>人生苦短，及时行乐</h1>
  <hr>
  <p class="haha">哈哈哈哈哈！</p>
</body>
</html>

在同一目录下新建一个CSS文件，（后缀为.css）
例如:

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

其结果显示：

这里标签设置的背景颜色和字体居中，表明整个页面的背景颜色和字体格式。

设置了字体颜色，标签表明一级标题的字体颜色为红色。class选择器设置的字体的位置、颜色、和大小。在html中运用class选择器的元素采用class选择器设置的格式。

注意，html文件和css文件连接的路径。一般会放在同一目录下。

2、内部样式表

在html文件中直接写入样式表
例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>人生苦短，及时行乐</h1>
  <hr>
  <p class="haha">哈哈哈哈哈！</p>
</body>
</html>

其显示结果：

与上面的结果一致，只是在中引入了