CSS 学习总结

选择器

选择器可以分为以下几类：

1. 关系选择器：用于选择具有特定关系的元素

后代选择器：div h1，改变子子孙孙
子代选择器：div > h1，只改变儿子

2. 基本选择器：用于直接选择元素
   

   元素选择器：使用标签名，如div.
   类选择器：使用 . 加类名，如.name.
   ID 选择器：使用 # 加 ID，如#name.

3. 属性选择器：用来选择具有特定属性的元素
   

   示例：input [type="text"]

4. 伪类选择器：用来选择具有特定状态的元素
   

   示例：a:hover

在 Head 部分定义 CSS

在 head 部分使用 style 标签来定义 CSS：

<style>
    div {
        color: red;
    }
</style>
            

你也可以通过 link 标签引入外部 CSS 文件：

<link rel="stylesheet" type="text/css" href="css/mystyle.css" />

在 Body 部分内嵌 CSS

在 HTML 标签内使用 style 属性来嵌入 CSS：

<h1 style="color: deeppink; font-family: '宋体';">这是一个h1标题</h1>

常见 CSS 属性

1. 浮动：float: left; right; none. 浮动会脱离原有的文档流，解除当前空间的占用。

   消除浮动影响的几种方法：

   • 给浮动的父节点加入属性 overflow: hidden
   • 给父节点加高度，使其包含浮动元素
   • 给被影响的元素加入属性 clear: both
2. 定位：
   • 静态定位：static
   • 相对定位：relative，比如 position: relative; bottom: 10px;
   • 绝对定位：absolute，比如 position: absolute; left: 30px; top: 50px;
   • 固定定位：fixed，比如 position: fixed; right: 0px; top: 300px;
3. 其他常见属性：width; height; background-color; padding; margin; border; font-size; font-family