CSS快速入门

一时失言乱红尘 2023-07-17 11:20 5阅读 0赞

### 目录 ###

*  一、概念
 *  二、好处
 *  三、CSS与html结合方式
 *   *  1.内联样式
     *  2. 内部样式
     *  3. 外部样式
 *  四、CSS语法
 *  五、选择器
 *   *  基础选择器
     *   *  1.id选择器
         *  2.类选择器
         *  3.元素选择器
         *  例子
     *  扩展选择器：
     *   *  1.选择所有元素
         *  2. 并集选择器：
         *  3. 子选择器
         *  4. 父选择器
         *  5. 属性选择器
         *  6. 伪类选择器
 *  六、属性
 *   *  1. 字体、文本
     *  2. 背景
     *  3. 边框
     *  4. 尺寸
     *  5. 盒子模型：控制布局
 *  七、案例：注册页面

更详细的教程： [CSS教程参考][CSS]

# 一、概念 #

Cascading Style Sheets 层叠样式表  
\* 层叠：多个样式可以作用在同一个html的元素上，同时生效

# 二、好处 #

*  功能强大
 *  将内容展示和样式控制分离
    
     *  降低耦合度。解耦
     *  让分工协作更容易
     *  提高开发效率

# 三、CSS与html结合方式 #

## 1.内联样式 ##

在具体某个标签内使用**style**属性指定css代码  
如：

<div style="color:red;">hello css</div>

## 2. 内部样式 ##

在html代码的**head**标签内，定义**style**标签，style标签的标签体内容就是css代码。  
如：

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> div{ color:blue; } </style>
    </head>
    
    <body>
    
    <div>hello css</div>
    <div>hello css</div>
    
    </body>

## 3. 外部样式 ##

1. 定义css资源文件。  
2. 在head标签内，定义**link**标签，引入外部的资源文件  
如：  
a.css文件：

div{ 
        color:green;
    }

hello.html文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       <link rel="stylesheet" href="css/a.css">
    </head>
    <body>
    
    <!-- <div>hello css</div>
    <div>hello css</div>
    
    </body>
    </html>

注意：

*  1,2,3种方式 css作用范围越来越大
 *  1方式不常用，后期常用2,3
 *  第3种格式可以写为（在html的head标签内）：

# 四、CSS语法 #

*  格式：

选择器 { 
    	属性名1:属性值1;
    	属性名2:属性值2;
    	...
    }

*  选择器:筛选具有相似特征的元素
 *  注意：每一对属性需要使用；冒号隔开，最后一对属性**可以**不加；

# 五、选择器 #

\*\*用于筛选具有相似特征的元素。\*\*分为基础选择器和扩展选择器。

## 基础选择器 ##

> 优先级：id > 类 > 元素，作用于同一个标签时，优先级高的将生效。

### 1.id选择器 ###

**选择具体的id属性值的元素.建议在一个html页面中id值唯一。**  
语法：

#id属性值{ }

### 2.类选择器 ###

选择具有相同的class属性值的元素。  
语法：

.class属性值{ }

### 3.元素选择器 ###

**选择具有相同标签名称的元素。**  
语法：

标签名称{ }

### 例子 ###

<head>
        <meta charset="UTF-8">
        <title>基础选择器</title>
    
        <style> .cls1{ color: blue; } div{ color:green; } #div1{ color: red; } </style>
    </head>
    
    <body>
    
        <div id="div1">嘿嘿嘿</div>
        <div class="cls1">哈哈哈</div>
        <p class="cls1">嘻嘻嘻</p>
    
    </body>

![在这里插入图片描述][20200321142800360.png]

## 扩展选择器： ##

### 1.选择所有元素 ###

*{ }

### 2. 并集选择器： ###

同时选中多个元素。

选择器1,选择器2{ }

### 3. 子选择器 ###

筛选选择器1元素下的选择器2元素。

选择器1 选择器2{ }

### 4. 父选择器 ###

筛选选择器2的父元素选择器1。

选择器1 > 选择器2{ }

### 5. 属性选择器 ###

选择元素名称，属性名=属性值的元素。

元素名称[属性名="属性值"]{ }

如：

input[type='text']{ 
                border: 5px solid;
            }

### 6. 伪类选择器 ###

选择一些元素具有的状态。

元素:状态{ }

状态：  
\* link：初始化的状态  
\* visited：被访问过的状态  
\* active：正在访问状态  
\* hover：鼠标悬浮状态

如：

a:link{ 
                color: pink;
            }
    
            a:hover{ 
                color: green;
            }
    
            a:active{ 
                color: yellow;
            }
    
            a:visited{ 
                color: red;
            }

# 六、属性 #

![在这里插入图片描述][20200321150254131.png]  
接下来看看CSS中的常用属性吧~

## 1. 字体、文本 ##

*  font-size：字体大小
 *  color：文本颜色
 *  text-align：对其方式
 *  line-height：行高

## 2. 背景 ##

*  background

## 3. 边框 ##

*  border：设置边框，复合属性（指的是一个属性可指定多个值）

## 4. 尺寸 ##

*  width：宽度
 *  height：高度

## 5. 盒子模型：控制布局 ##

*  margin：外边距
 *  padding：内边距

如下图所示，以红色的盒子为第一视角，那么可以定义内外边距：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70]

> 默认情况下内边距会影响整个盒子的大小。

*  box-sizing: border-box; 如此设置盒子的属性，让width和height就是最终盒子的大小而不会受边距的影响。
 *  float：浮动  
    left 左浮动  
    right 右浮动

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css属性</title>
    
    
        <style> div{ border: 1px solid red; width: 100px; } .div1{ width: 100px; height: 100px; /*外边距*/ /* margin: 50px; */ } .div2{ width: 200px; height: 200px; padding: 50px; box-sizing: border-box; } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } </style>
    </head>
    <body>
    
    
        <div class="div2">
                <div class="div1"></div>
    
        </div>
    
        <div class="div3">aaaa</div>
        <div class="div4">bbbbb</div>
        <div class="div5">cccc</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 1]

# 七、案例：注册页面 #

案例基于之前的html界面，采用css控制其样式进行美化：[html案例。][html]  
分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 2]  
这个案例可分两步走，先在body中完善基本元素，其实就是3个div，其中中间的div可以直接copy之前的表单；接下来再通过css来控制它们的样式即可。

实际效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 3]  
\-> [源码链接][Link 1]

[CSS]: https://www.w3school.com.cn/css/index.asp
[20200321142800360.png]: /images/20230528/9a6504416069434587b05adfcd890d0e.png
[20200321150254131.png]: /images/20230528/90a95c00d9b349908568e02470b4e8d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70]: /images/20230528/b8233fde371b4f2f91254401621560ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 1]: /images/20230528/08fefcd066d04446935b5c602f555a81.png
[html]: https://blog.csdn.net/z714405489/article/details/104938860
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 2]: /images/20230528/a0aa5dc4489d484787de165ef8b07e61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 3]: /images/20230528/8b44cab9b6bd4f3fa2c5272cbaf6d0da.png
[Link 1]: https://github.com/MagicalPiggy/WebLearning/tree/master/HTML_CSS_learning