css 学习笔记

CSS: 页面美化和布局控制

1. 概念：Cascading Style Sheets 层叠样式表

2. 好处：

   • 功能强大
   • 将内容展示和样式控制分离，降低耦合度

3. CSS 的使用：

   • 内联样式。 如<div style=> hello css </ div>
   • 内部样式：在 head 标签内，定义 style 标签
   • 外部样式：定义 css 资源文件，在 head 标签内，定义 link 标签，引入外部的资源文件。如：

   <!-- a.css -->
   div{
   	color: green;
   }
   <link rel="stylesheet" href ="css/a.css">
   

4. CSS 语法

   • 格式：选择器 {
     属性名1：属性值1;
     属性名2：属性值2；
     …
     }
   • 选择器：筛选具有相似特征的元素

5. 选择器

   • 基础选择器
     • id 选择器 #div_id{ }
     • 元素选择器 标签名称{ }
     • 类选择器：选择具有相同的 class 属性值的元素。.class 属性值 { }
   • 扩展选择器：
     1. 选择所有元素：*{ }
     2. 并集选择器： 选择器1，选择器2 { }
     3. 子选择器：选择器1 选择器2{ }。筛选选择器1中的选择器2
     4. 父选择器：选择器1 > 选择器2 {}。筛选选择器2的父标签选择器1
     5. 属性选择器：选择元素名称，属性名=属性值的元素。元素名称[属性名=属性值]
     6. 伪类选择器：选择一些元素具有的状态

6. 属性

   1. 字体、文本
      • font-size: n px;
   2. 背景
      • background
   3. 边框
      • border: 1px solid red;
   4. 尺寸
      • width, height
   5. 盒子模型：控制布局
      • margin: 外边距，padding: 内边距
      • float: 浮动

来源：CSDN

作者：3号楼ibiza

链接：https://blog.csdn.net/weixin_43496274/article/details/104602554