零基础CSS教程（一）

CSS介绍

1.什么是 CSS

CSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。

2.CSS的作用

html是网页的骨架，而CSS就是对骨架内容的修饰；

CSS 是能够真正做到⽹页表现与内容分离的⼀一种样式设计语⾔言。相对于传统 HTML 的表现⽽而⾔言，CSS 能够对网⻚中的对象的位置排版进像素级的精确控制，支持几乎所有的字体字号样式，拥有对⽹页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语⾔言。

3.为什么要用CSS

样式和内容写在一起会显得非常臃肿，使用css可以单独的将样式抽离出来，可以提高开发效率

CSS提供了很多HTML无法完成的显示效果

抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，就是节约成本。

4.CSS的历史

从 1990 年年代初 HTML 被发明开始，样式表就以各种形式出现了了，不不同的浏览器器结合了了它们各⾃自的样式语⾔言，读者可以使⽤用这些样式语⾔言来调节⽹网⻚页的显示⽅方式。⼀一开始样式表是给读者⽤用的，最初的 HTML 版本只含有很少的显示属性，读者来决定⽹网⻚页应该怎样被显示。
但随着 HTML 的成⻓长，为了了满⾜足设计师的要求，HTML获得了了很多显示功能。随着这些功能的增加外来定义样式的语⾔言越来越没有意义了了。
1994 年年哈坤·利利提出了了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计⼀一个叫做“Argo”的浏览器器，他们决定⼀一起合作设计 CSS。当时已经有过⼀一些样式表语⾔言的建议了了，但 CSS 是第⼀一个含有“层叠”的主意的。在 CSS 中，⼀一个⽂文件的样式可以从其他的样式表中继承下来。读者在有些地⽅方可以使⽤用他⾃自⼰己更更喜欢的样式，在其他地⽅方则继承，或“层叠”作者的样式。这种层叠的⽅方式使作者和读者都可以灵活地加⼊入⾃自⼰己的设计，混合各⼈人的爱好。哈坤于 1994 年年在芝加哥的⼀一次会议上第⼀一次展示了了 CSS 的建议，1995 年年他与波斯⼀一起再次展示这个建议。当时 W3C 刚刚创建，W3C 对 CSS 的发展很感兴趣，它为此组织了了⼀一次讨论会。哈坤、波斯和其他⼀一些⼈人（⽐比如微软的托⻢马斯·雷雷尔登）是这个项⽬目的主要技术负责⼈人。1996 年年底，CSS 已经完成。1996 年年 12 ⽉月 CSS 要求的第⼀一版本被出版。 1997 年年初，W3C 内组织了了专⻔门管 CSS 的⼯工作组，其负责⼈人是克⾥里里斯·⾥里里雷雷。这个⼯工作组开始讨论第⼀一版中没有涉及到的问题，其结果是 1998 年年 5 ⽉月出版的第⼆二版要求。到 2007 年年为⽌止，第三版还未完备

5如何使用（引用）CSS

方式1：行内样式表

通过标签的style属性设置

<!DOCTYPE html> <html>  <head>    <title>01_第⼀一种使⽤用⽅方式.html</title>  </head>  <body>    <!-- style="css属性:css属性值;" -->    <div style="color:red;" >atguigu</div>  </body> </html>

方式2：内联样式表

通过style标签实现

<!DOCTYPE html> 
<html>  
<head>    
<title>02_第⼆二种使⽤用⽅方式.html</title>    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">    
<!--         style标签:封装样式内容           
 * type:指定使⽤用样式,值为"text/css"           
 * 设置CSS语法:                
选择器器 {  属性名 : 属性值; }     -->    
<style type="text/css">       
 div {           
 color : red;       
 }  
  </style> 
 </head>  
<body>    
<div>atguigu</div>  
</body> 
</html>

方式3：外联样式表

通过link标签引入外部css文件

<!DOCTYPE html> 
<html>  
<head>    
<title>04_第四种使⽤用⽅方式.html</title>    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">    
<!--         link标签:           
 * href:引⼊入外部css⽂文件路路径            
* rel:设置引⼊入⽂文件为样式⽂文件            
* type:指定使⽤用样式,值为"text/css"     -->    
<link href="div.css" rel="stylesheet" type="text/css" />  
</head>  
<body>    
<div>atguigu</div>  
</body> 
</html>

说明：

当设置的属性非常少，需要设置的标签也非常少(只有一处)，可以使用行内样式

当一个网页的内部，很多标签都需要使用同样的显示效果，可以是内联样式

当一个网站的多个页面需要使用同样的显示效果，可以将相同样式单独放在css文件中，即外联样式

6.块级元素与行内元素

1.块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

2.行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。

块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。
块级元素和内联元素的区别

1.块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2.一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效

（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3. 块级元素盒子模型padding、margin都有效

行内元素的盒子模型：边框和内边距都是有效的外边距的问题：左右外边距有效，上下外边距无效

7.CSS语法

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

语法特点:

CSS声明总是以键值对(key\value)形式存在。

CSS声明总是以分号(;)结束。

声明组以⼤大括号({})括起来。

为了让CSS可读性更更强，每行只描述一个属性

注释使用：/* 注释 */

CSS文件中不需要使用style标签

8 .CSS选择器

a.4种常见选择器

元素（标签）选择器、id选择器、类选择器、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的选择器</title>
    <style>
        /* TODO 元素选择器 - 匹配所有相同元素名的元素 */
        h1 {
            background-color: lightskyblue;
            color: lightcoral;
        }
        /* TODO ID选择器 - 只有匹配唯一的一个元素 */
        #p1 {
            background-color: lightgreen;
            color: lightslategrey;
        }
        /* TODO 类选择器 */
        .myclass {
            background-color: lightskyblue;
            color: lightcoral;
        }
        /* TODO 属性选择器 */
        [title] {
            background-color: lightgreen;
            color: lightslategrey;
        }
    </style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="p1">这是一个段落内容.</p>
<p class="myclass">这还是一个段落内容.</p>
<p title="this is p">这又是一个段落内容.</p>
</body>
</html>

b.3种关系选择器

1.后代选择器：选择器选择器（//中间用空格分开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        #d1 {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
        /*
            TODO 后代选择器
            TODO * 目标元素 -> id 为 d1 的 div 元素
            TODO * 后代元素 -> id 为 d11、d12 和 d111 的 div 元素
         */
        #d1 div {
            width: 100px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d11">
        <div id="d111"></div>
    </div>
    <div id="d12"></div>
</div>
</body>
</html>

零基础CSS教程（一）

2.子选择器：选择器>选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        #d1 {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
        /*
            TODO 子元素选择器
            TODO * 目标元素 -> id 为 d1 的 div 元素
            TODO * 子元素元素 -> id 为 d11 和 d12 的 div 元素
         */
        #d1>div {
            width: 100px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d11">
        <div id="d111"></div>
    </div>
    <div id="d12"></div>
</div>
</body>
</html>

3.相邻元素选择器：选择器+选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟素选择器</title>
    <style>
        #d1 {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
        #d11+div {
            width: 100px;
            height: 50px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d11">
        <div id="d111"></div>
    </div>
    <div id="d12"></div>
</div>
</body>
</html>

c.2种组合选择器

第一种 - 交集结果
* 多个选择器并列使用，中间没有任何分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器一</title>
    <style>
        /* TODO 为所有<p>元素设置统一的样式 */
        p {
            color: lightblue;
        }
        /*
            TODO <p class="myclass">
            TODO * 在所有<p>元素中，专门为 class="myclass" 的<p>元素

            TODO 组合选择器 - 第一种
            TODO 元素选择器 类选择器
            TODO * 结果 -> 两种选择器的交集
         */
        p.myclass {
            color: lightcoral;
        }
    </style>
</head>
<body>
<p>这是一个段落内容.</p>
<p class="myclass">这是另一个段落内容.</p>
</body>
</html>

第二种 - 并集结果
* 多个选择器并列使用，中间使用","分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器二</title>
    <style>
        /*h1 {
            color: lightcoral;
        }
        p {
            color: lightcoral;
        }*/

        h1,#p1 {
            color: lightcoral;
        }
    </style>
</head>
<body>
<h1>这是标题</h1>
<p id="p1">这是一个段落内容.</p>
</body>
</html>

d.通配符选择器（*）
* 作用 - 匹配当前 HTML 页面中的所有元素
* 问题 - 匹配的速度不是很快(页面元素的数量和复杂程度)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<h1>这是标题</h1>
<p>这是一个段落内容.</p>
</body>
</html>

e.伪类选择器

CSS 伪类⽤用于向某些选择器添加特殊的效果

零基础CSS教程（一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a {
            /* TODO 去掉链接中自带的下划线 */
            text-decoration: none;
        }
        /* TODO 设置链接未访问的样式 */
        a:link {
            color: lightslategrey;
        }
        /* TODO 设置链接被访问后的样式 */
        a:visited {
            color: lightgray;
        }
        /* TODO 设置鼠标悬停在链接元素上时的样式 */
        a:hover {
            color: lightskyblue;
        }
        /* TODO 设置鼠标选中链接元素时的样式 */
        a:active {
            color: lightcoral;
        }
    </style>
</head>
<body>
<!--
    TODO <a href="#"> 表示伪链接
    TODO * 浏览器对<a>的几种状态提供了默认样式
    TODO   * 未做任何操作时 - 字体是蓝色，下划线
    TODO   * 当鼠标点中链接文本时 - 字体是红色
    TODO   * 当访问过链接后 - 字体变化
 -->
<a href="#">这是一个链接</a>
</body>
</html>

零基础CSS教程（一）

选择器的优先级别

选择器的优先级 - 内联样式 -> ID选择器 -> 类选择器和属性选择器 -> 元素选择器
!important - 将当前选择器的优先级别设置最高(打乱优先级别的顺序)

继承的样式没有任何优先级
在实际开发中，不建议使用