CSS笔记

一、功能与概念

概念：Cascading Style Sheets：层叠样式表
- 层叠：多个样式可以作用在同一个HTML的元素上，并同时生效
功能：HTML负责展示页面信息，而CSS主要数负责页面美化与布局控制
好处：HTML的标签属性与CSS都可以控制样式。CSS的好处在于：
- 功能强大
- 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率。一套CSS可以复用与多个HTML文档

二、CSS使用-与HTML的结合方式

内联结合
- 在HTML标签内使用 style 属性指定CSS代码，采用键值对的方式，键是属性名，值是对应的值。由;分隔多个键值对冒号表示键值的对应
- <div style="color: darkgoldenrod;"></div>
- 缺点：信息展示与美化在同一处，没有达到解耦的效果

内部样式

在head标签内定义style标签，style标签体内容就是CSS代码

<head>
    ...
        <!--在head标签内定义style标签，写CSS代码-->
        <style>
            div{
                /*这样下面所有div元素内容就可以变色*/
                color: greenyellow;
            }
        </style>
    </head>
...
<div>内联样式</div>

外部样式

1.定义CSS资源文件。

2.在head标签内，定义link标签，引入外部资源文件

//a.css资源文件
div{
    color: darkorange;
}

//HTML文档
<head>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
        <div>CSS外部样式</div>
        <div>HelloCSS</div>
</body>

3.另一种写法【在head标签内使用style标签导入资源文件】
```
<style>
     @import "css/a.css";
</style>
```

注意！
- 1 2 3种方式，CSS的作用范围越来越大
- 1方式不常用【耦合度高，作用范围小】，后期常用的是2 3方式

三、CSS语法

格式

选择器{
    属性1：属性值
    属性2：属性值
    ...
}

多个属性之间需要使用分号;隔开。最后一对属性可以不添加
选择器：筛选具有相似特征的元素【选择器是div则只找div标签包裹的】

四、选择器

分类

基础选择器-功能单一

id选择器
- 概念：选择具体的id属性值的元素
- 语法：#id属性值{...}
- 注：建议在同一个HTML页面中id值唯一
元素选择器
- 概念：选择具有相同名称的元素
- 语法：标签名{...}
- 注：id选择器优先级高于元素选择器
类选择器
- 概念：选择具有具有相同class属性值的元素
- 语法：.class属性值{...}
- 注：id选择器优先级高于类选择器，类选择器优先级高于元素选择器

三种选择器实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学习CSS基础选择器</title>
        <style>
            #div1{
                color: red;
                font-size: 20px;
            }
            #div2{
                color: cadetblue;
            }

            div{
                color: aqua;
            }

            .p1{
                color: greenyellow;
            }
        </style>
    </head>
    <body>
        <!--id选择器-->
        <div id="div1">id选择器div1</div>
        <div id="div2">id选择器div2</div>
        <hr>
        <!--元素选择器-->
        <div>未指定id的元素选择器div1</div>
        <div>未指定id的元素选择器div2</div>
        <hr>
        <!--类选择器-->
        <p class="p1">类选择器p标签1</p>
        <p class="p1">类选择器p标签2</p>
        <p class="p1">类选择器p标签3</p>
    </body>
</html>

扩展选择器-功能强大
- *{}选择器：选择所有元素
  - ```
  *{
      color:red;}
```
- 子选择器：某个标签下的子标签生效
  - ```
  
  div p{
      color:red;}
```
- 父选择器：某个标签上的父标签会生效
  - ```
  
  div > p{
      color:red;}
```
- 并集选择器：多个标签一起生效
  - ```
  
  div, p{
      color:red;}
```
- 属性选择器：对应属性值的标签会生效
  - 语法：选择元素名[属性名=属性值]
  - ```
  
  input[type='text']{
      color:red;}
```
- 伪类选择器：选择一些元素具有的状态
  - 语法：元素:状态
    - 如<a>的状态：
      - link：初始化状态
      - hover：鼠标悬停
      - active：正访问
      - visited：被访问过
  - ```
  
  a:link{
      color: #e67e22;
  }
  
  a:hover{
      color: #34495e;
  }
```

五、CSS属性

字体
1. font-size：字体大小
2. font-sytyle：字体样式斜体、粗体...
3. font-family：字体系列楷体、正体
文本
1. color：文本颜色
2. text-align：文本对齐方式
3. line-height：文本行高
背景
1. background：背景复合属性，其图片、颜色可以单独设置
边框
1. border：设置边框 border是复合属性，其上下左右边可以单独设置
尺寸
1. width：宽度
2. height：高度
盒子模型：控制布局
1. margin：外边距
  - margin: auto：水平居中
2. padding：内边距
  - 默认情况下内边距会影响整个盒子的大小
  - box-sizing: border-box;设置盒子的属性，让宽高就是自己设置盒子的大小
3. float：浮动
  - left：左浮动
  - right：右浮动