CSS 入门指南（一）CSS 概述

柔光的暖阳◎ 2024-04-20 11:57 41阅读 0赞

## CSS 概述 ##

### CSS 介绍 ###

CSS（Cascading Style Sheets）通常称为 CSS 样式或**层叠样式表**，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）以及版面的布局等外观显示样式的计算机语言，CSS 文件扩展名为 **.css**。

*  样式：给 HTML 标签添加需要显示的效果。
 *  层叠：使用不同的添加方式，给同一个 HTML 标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。

CSS 可以使 HTML 页面更好看，CSS 色系的搭配可以让用户更舒服，CSS + DIV 布局更佳灵活，更容易绘制出用户需要的结构。

### CSS 样式规则 ###

*  CSS 样式规则需要写在一个 \*\*style（样式）\*\*标签中
 *  CSS 样式规则由两个主要的部分构成：**选择器**，以及**一条或多条声明**
    
     *  **选择器通常是需要改变样式的 HTML 元素**
        
        选择要添加 CSS 样式的 html 标签的方式：根据标签的名称，标签的 id 属性值，标签的 class 属性值等方式
     *  **每条声明由一个属性和一个值组成**
        
        属性（property）是希望给标签设置的样式属性（style attribute），例如大小，颜色等。
        
        每个属性有一个值。属性和值被冒号分开。
 *  格式：
    
        <style type="text/css">
            选择器{
                
                属性名:属性值;
                ...
                属性名:属性值;
            }
        </style>
    
    **CSS 声明总是以分号 ; 结束，声明总以大括号 \{\} 括起来**
 *  **CSS 注释**
    
    注释是用来解释代码，并且可以随意编辑它，浏览器会忽略它。
    
    CSS注释以 **/\*** 开始, 以 \***/** 结束，实例如下：
    
        /*这是个注释*/
 *  示例：
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>CSS样式规则</title>
            <style type="text/css">
                /*使用标签选择器:根据标签名称选择到对应的标签*/
                h1{
                
                    /*给h1标签添加一个字体颜色*/
                    color: red;
                }
                h2,div{
                
                    /*字体颜色*/
                    color: blue;
                    /*字体大小*/
                    font-size: 50px;
                }
            </style>
        </head>
        <body>
            <h1>我是一个h1标题标签</h1>
            <h1>我是一个h1标题标签</h1>
            <h1>我是一个h1标题标签</h1>
            <h2>我是一个h2标题标签</h2>
            <div>我是div标签</div>
        </body>
        </html>

### 引入 css 样式的方式 ###

*  方式1：**行内样式**：在标签上直接写 style 属性，属性值就是要设置的样式
    
    格式：
    
        <标签 style="属性名:属性值;属性名:属性值;属性名:属性值;..属性名:属性值;"></标签>
    
    **作用域：只针对当前的标签有效**
 *  方式2：**内部（内嵌）样式**：在页面中创建一个 style 标签，在标签中写 css 的样式规则
    
    格式：
    
        <style type="text/css">
            选择器{
                
                属性名:属性值;
                ...
                属性名:属性值;
            }
        </style>
    
    **作用域：在当前页面中，针对选择器选择到的所有标签都有效**
 *  方式3：**外部（外联）样式**：把 css 的样式规则，写在一个以 .css 结尾的文件中
    
    需要在 html 中使用 link 标签引入外部的 css 文件使用
    
    格式：
    
        <link href="外部css文件的路径" type="text/css" rel="stylesheet" />
    
     *  **href**=“外部css文件的路径” ：css 文件一般都放在当前项目的 css 文件夹中，所以**一般使用相对路径**
     *  **type**=“text/css” ：说明引入的文件是文本类型的 css 文件（固定写法），可省略
     *  **rel**=“stylesheet” ：stylesheet：样式表，说明引入的 css 文件，是 html 文件的一个样式表（固定写法）
    
    **作用域：css 文件可以被多个页面同时引用，哪个页面引用的，对哪个页面中的标签有效**
 *  **样式的优先级**：行内样式 > 内部样式|外部样式（内部和外部写在后边的样式会覆盖前边的样式）
 *  示例：
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>引入css样式的方式</title>
        </head>
        
        <style>
            /*选择所有的h1标签*/
            h1{
                
                color: pink;
            }
        </style>
        
        <link href="css/1.css"  rel="stylesheet"/>
        <body>
            
            <div style="color: red;font-size: 20px">我是一个div</div>
            <div style="color: green">我是一个div</div>
            <div style="color:yellow;">我是一个div</div>
            
            <h1 style="color: gold">我是h1标题标签</h1>
            <h1>我是h1标题标签</h1>
        </body>
        </html>
    
    1.css文件
    
        h1{
              
            color: blue;
            font-size: 50px;
        }

### CSS 的选择器 ###

使用何种方式选择要添加样式的 html 标签

#### 基本选择器（元素、id、class 选择器） ####

*  **元素（标签，标记）选择器**：根据元素（标签，标记）的名称，选择对应的元素
    
    格式：`元素（标签，标记）的名称{属性名:属性值;...}`
    
    示例：
    
        <h1></h1>   	选择器: h1{属性名:属性值;...}
        <div></div>   	选择器: div{属性名:属性值;...}
 *  **id 选择器**
    
    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
    
    需要给元素添加一个 id 属性，通过 id 的属性值选择到元素
    
    格式：`#元素id的属性值{属性名:属性值;...}`
    
    示例：
    
        <h1 id="d001"></h1>
        <div id="d002"></div>
        
        选择器：#d001{属性名:属性值;...}
    
    注：
    
     *  **html 标签的 id 属性不要以数字开头**，数字开头的 id 在 Mozilla/Firefox 浏览器中不起作用
     *  **不可以给多个 html 元素添加相同的 id 属性值，id 在页面中具有唯一性**
        
        如果多个元素的 id 属性值是相同的，JavaScript 可能会出错
 *  **class（类）选择器**
    
    class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用
    
    需要给元素添加一个 class 属性，通过 class 的属性值选择到元素
    
    格式：`.元素的class属性值{属性名:属性值;...}`
    
    示例：
    
        <h1 class="c001"></h1>
        <div class="c001"></div>
        
        选择器: .c001{属性名:属性值;...}
    
    注：
    
     *  \*\*类名的第一个字符不能使用数字！\*\*它无法在 Mozilla 或 Firefox 中起作用。
     *  **多个 class 选择器可以使用空格分开**
     *  可以指定特定的 HTML 元素使用 class
        
        例如：所有的 p 元素使用 class=“center” 让该元素的文本居中
        
            p.center {
                    text-align:center;}
 *  案例
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>CSS的选择器</title>
        </head>
            <style>
                /*1.元素(标签,标记)选择器*/
                h1{
                
                    color: red;
                }
                a{
                
                    color: green;
                }
                /*2.id选择器*/
                #d001{
                
                    color: #880088;
                }
                /*2.class(类)选择器*/
                .c001{
                
                    color: chocolate;
                }
            </style>
        <body>
            
            <h1>标题标签</h1>
            <h1>标题标签</h1>
            <a href="#">我是一个超链接标签</a>
            <a href="#">我是一个超链接标签</a>
            
            <div id="d001">我是一个div</div>
            <h2 id="d002">我是一个h2标题标签</h2>
            
            <div class="c001">我是一个div</div>
            <h2 class="c001">我是一个h2标题标签</h2>
        </body>
        </html>

#### 扩展选择器（属性、包含、伪类选择器） ####

*  **属性选择器**：在一个标签选择器后面使用中括号标记，是对一组标签进一步过滤
    
    语法格式：`标签选择器[标签属性=’标签属性值’]{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }`
 *  **包含选择器**：两个标签之间使用空格，给指定父标签的后代标签设置样式，是对一个标签内部所有后代标签进一步过滤
    
    格式：`父标签选择器 后代标签选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }`
 *  案例：
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>CSS的扩展选择器</title>
            <style>
                /*input{
                    !*背景色*!
                    background-color: green;
                }*/
                /*给type="text"标签添加样式*/
                input[type='text']{
                
                    background-color: green;
                }
                /*给type="password"标签添加样式*/
                input[type='password']{
                
                    background-color: pink;
                }
        
                /*2.包含选择器(子父类选择器)*/
                /*给div中的div添加样式*/
                div div{
                
                    color: yellow;
                }
                #d001 h3{
                
                    color: aqua;
                }
            </style>
        </head>
        <body>
            
            <input type="text" name="username"/>
            <input type="password" name="password"/>
        
            
            <div>我是div</div>
            <div id="d001">
                <div>我是div中的div</div>
                <h3>我是div中的h3</h3>
            </div>
        </body>
        </html>

#### 伪类选择器 ####

*  **伪类选择器**：描述一个元素的特殊状态
    
    由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。
 *  **常用的伪类选择器**：
    
     *  **动态伪类选择器**
        
         *  **:link** ：元素被定义了超链接但并未被访问过
         *  **:visited** ：元素被定义了超链接并已被访问过
         *  **:active** ：元素被激活
         *  **:hover** ：鼠标悬停
         *  **:focus** ：元素获取焦点
        
        注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后；a:active 必须被置于 a:hover 之后。所以，a 标签的这四种伪类选择器的顺序为：`a:link ，a:visited，a:hover ，a:active`。必须严格按照此规则来设置属性，否则无效。
     *  **UI 元素状态伪类选择器**
        
         *  **:checked** ：选中的复选按钮或者单选按钮表单元素
         *  **:enabled** ：所有启用的表单元素
         *  **:disabled** ：所有禁用的表单元素
        
        注：UI 元素状态伪类选择器主要是针对 Form 表单元素进行操作，最常见的使用方式如设置 "type=“text” 有 enable 和 disabled 两种状态，enable 为可写状态，disabled 为不可状态。
     *  **结构伪类选择器**
        
         *  **:fisrt-child** ：父元素的第一个子元素
         *  **:last-child** ：父元素的最后一个子元素的元素
         *  **:root** ：元素所在文档的根元素。在 HTML 文档中，根元素始终是 html，此时该选择器与 html 类型选择器匹配的内容相同
         *  **:nth-child(n)** ：父元素的第 n 个子元素。其中 n 可以是整数（1，2，3）、关键字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0。
         *  **:nth-last-child(n)** ：父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-child 等同。
         *  **:nth-of-type(n)** ：父元素内具有指定类型的第 n 个元素
         *  **:nth-last-of-type(n)** ：父元素内具有指定类型的倒数第 n 个元素
         *  **:first-of-type** ：父元素内具有指定类型的第一个元素，与 nth-of-type(1) 等同
         *  **:last-of-tye** ：父元素内具有指定类型的最后一个元素，与 :nth-last-of-type(1) 等同
         *  **:only-child** ：父元素只包含一个子元素，且该子元素匹配元素
         *  **:only-of-type** ：选择父元素只包含一个同类型子元素，且该子元素匹配选择元素
         *  **:empty** ：选择没有子元素的元素，而且该元素也不包含任何文本节点
        
        注：使用结构伪类选择器的好处是可以根据元素在文档中所处的位置，来动态地选择元素，从而减少 HTML 文档对 id 或类的依赖，有助于保持代码干净整洁。另外需要注意的是，在结构伪类选择器中，子元素的序号是从 1 开始的。
     *  **否定伪类选择器**
        
         *  **E:not(F)** ：选择所有除元素 F 外的 E 元素
     *  案例：
        
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>CSS的扩展选择器</title>
                <style>
                    /*伪类选择器*/  
                    a:link {
                      color: #FF0000}	/* 未访问的链接 */
                    a:visited {
                      color: #00FF00}	/* 已访问的链接 */
                    a:hover {
                      color: #FF00FF}	/* 鼠标移动到链接上 */
                    a:active {
                      color: #0000FF}	/* 选定的链接 */
                </style>
            </head>
            <body>
                <a href="http://www.itcast.cn" target="_blank">点击我到传智</a>
            </body>
            </html>