web前端开发之CSS

阅读量：

文章目录

CSS
一.CSS语法
二.CSS注释
三.CSS选择器
- 1.CSS-元素选择器
- 2.CSS-id选择器（#）
- 3.CSS-类选择器（.）
- 4.CSS-通用选择器（*）
- 5.CSS-分组选择器
- 6.CSS-组合器选择器
- - 6.1 后代选择器（空格）
  - 6.2 子选择器 (>)
  - 6.3 相邻兄弟选择器 (+)
  - 6.4 通用兄弟选择器 (~)
- 7.CSS-伪类选择器
- - 7.1 a标签的伪类
  - - ：link 和：visited
- ：hover
- ：active
  - 7.2 伪类选择器合集
- 8.CSS-伪元素选择器
- - 8.1 伪元素合集
  - - ::after和::before
- ::first-letter
- ::first-line
- ::selection
四.CSS创建
- 1.外部样式
- 2.内部样式
- 3.行内样式
- 4.多重样式优先级
- - 4.1 行内样式 > 内部样式
  - 4.2 行内样式 > 外部样式
  - 4.3 内部样式 > 外部样式
- 5.样式权重
五、CSS背景
- 1.background-colo（背景颜色）
- 2.background-image（背景图像）
- 3.background-repeat（背景图像铺排方式）
- 4.background-position（背景图像的位置）
- 5.background 简写属性
- 6.总结
六、CSS文本
- 1.文本颜色（color）
- 2.文本的对齐方式（text-align）
- 3.文本修饰（text-decoration）
- 4.文本中字母大小写转换（text-transform）
- 5.文本缩进（text-indent）
- 6.总结
七、CSS字体
- 1.字体大小（font-size）
- 2.字体粗细（ font-weight）
- 3.字体类型（font-family）
- 4.字体样式（font-style）
- 5.font 简写属性
- 6.总结
八、CSS链接
九、CSS列表
- 1.列表项标志的类型（list-style-type）
- 2.将图像设置为列表项标志（list-style-image）
- 3.列表简写属性（list-style）
- 4.移除默认设置（none）
十.CSS表格
- 1.表格边框（border）
- 2.折叠边框（border-collapse）
- 3.表格宽度和高度
- 4.表格文字对齐
- - 4.1 水平对齐（text-align）
  - 4.2 垂直对齐（vertical-align）
- 5.表格填充（padding）
- 6.表格颜色
十一.CSS盒子模型
- 1.CSS 盒子模型（Box Model）
- 2.元素的宽度和高度
十二.CSS边框
- 1.CSS边框属性
- 2.边框样式（border-style）
- 3.边框宽度（border-width）
- 4.边框颜色（border-color）
- 5.边框-单独设置各边
- 6.边框-简写属性
- 7.总结
十三.CSS轮廓（outline）
十四.CSS外边距（margin）
- 1.CSS外边距的使用
- 2.Margin - 单边外边距属性
- 3.Margin - 简写属性
- 4.总结
十五.CSS内边距（padding）
- 1.CSS内边距的使用
- 2.Padding - 单边内边距属性
- 3.Padding - 简写属性
- 4.总结
十六.CSS分组和嵌套选择器
- 1.分组选择器
- 2.嵌套选择器
十七.CSS尺寸
十八.CSS Display(显示) 与 Visibility（可见性）
- 1.隐藏元素
- 2.改变元素的显示
十九.CSS定位（Position）
- 1.static 定位（静态定位）
- 2.fixed 定位（固定定位）
- 3.relative 定位（相对定位）
- 4.absolute 定位（绝对定位）
- 5.sticky 定位（粘性定位）
- 6.重叠的元素（z-index）
二十.CSS布局（Overflow）
二十一.CSS浮动（Float）
- 1.元素是怎么浮动？
- 2.彼此相邻的浮动元素
- 3.清除浮动
二十二.CSS布局-对齐
- 1.水平对齐
- - 1.1 元素居中对齐
  - 1.2 文本居中对齐
  - 1.3 图片居中对齐
  - 1.4 使用定位方式实现左右对齐
  - 1.5 使用浮动方式实现左右对齐
- 2.垂直对齐
二十三.CSS 伪类
- 1.CSS :first-child 伪类
- - 1.1 匹配第一个 < p > 元素
  - 1.2 匹配所有< p > 元素中的第一个 < i > 元素
  - 1.3 匹配所有作为第一个子元素的 < p > 元素中的所有 < i > 元素
二十四.CSS导航栏
- 1.HTML设置菜单项
- 2.垂直导航栏
- - 2.1 激活/当前导航条
  - 2.2 创建链接并添加边框
  - 2.3 全屏高度的固定导航条
- 3.水平导航栏
- - 3.1 内联列表项
  - 3.2 浮动列表项
- 4.实例
二十五.CSS 下拉菜单
- 1.基本下拉菜单
- 2.常见下拉菜单
- 3.下拉内容对齐方式
二十六.CSS提示工具
- 1.基础提示框
- 2.定位提示工具
- 3.添加箭头
- 4.淡入效果
二十七.CSS 属性选择器
- 1.[属性名]
- 2.[属性名=属性值]
- 3.[属性名^=属性值]
- 4.[属性名 $ =属性值]
- 5. [属性名 * =属性值]
- 6.[属性名 ~=属性值]
- 7.[属性名 |=属性值]
二十八.CSS 表单
- 1.输入框(input) 样式
- 2.输入框填充
- 3.输入框(input) 边框
- 4.输入框(input) 颜色
- 5.输入框(input) 聚焦
- 6.输入框(input) 图标
- 7.带动画的搜索框
- 8.文本框（textarea）样式
- 9.下拉菜单（select）样式
- 9.按钮样式
二十九.CSS !important 规则
- 1.什么是 !important

CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。
样式通常保存在外部的（ .css ）文件中。
我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

一.CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

实例：
在这里插入图片描述

选择器指向您需要设置样式的 HTML 元素。每一条属性:值 为一条声明。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

二.CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 / * 开始, 以 * / 结束。

实例：

复制代码

    /*这是个注释*/
    p
    {
    text-align:center;
    /*这是另一个注释*/
    color:black;
    }

三.CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

css选择器的分类：

简单选择器
根据名称，id，类来选取元素

组合器选择器
根据他们之间的特定关系来选取元素

伪类选择器
根据特定状态选取元素

伪元素选择器
选取元素的一部分并设置样式

属性选择器
根据属性或属性值来选取元素

1.CSS-元素选择器

元素选择器根据元素名称 来选择 HTML 元素。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
        p{
            font-size: large;
            color:red;
            text-align: center;
        }
    </style>
    
    </head>
    <body>
    <p>一起学习css</p>
    </body>
    </html>

2.CSS-id选择器（#）

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的 ，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，写一个井号（＃），后跟该元素的 id。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
        #p_name{
            text-align: center;
            color: blue;
        }
    </style>   
    </head>
    <body>
    <p id="p_name">id选择器</p>
    </body>
    </html>

3.CSS-类选择器（.）

类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。 —也叫class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
        .p_class{
            text-align: center;
            color: pink;
        }
    </style>
    
    </head>
    <body>
    <p class="p_class">class选择器</p>
    </body>
    </html>

一个HTML 元素也可以引用多个类。

例如：

复制代码

    <p class="p_class p_class1">class选择器</p>

复制代码

    		.p_class{
            text-align: center;
        }
        .p_class1{
            color: blue;
        }

注：类名不能以数字开头！

4.CSS-通用选择器（*）

通用选择器（*）选择页面上的所有的 HTML 元素。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
    		.p_class{
            text-align: center;
        }
        #p_id{
            color: blue;
        }
        *{
            color: red;
        }
    </style>
    
    </head>
    <body>
    <p class="p_class">class选择器</p>
    <p id="p_id">id选择器</p>
    </body>
    </html>

5.CSS-分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

实例：

复制代码

    <html>
    <head>
    <title>css</title>
    <style>
        h1,p{
            text-align: center;
            color: red;
        }
    </style>
    </head>
    <body>
    <h1>css分组选择器</h1>
    <p>第一个段落：</p>
    
    </body>
    </html>

分组选择器可以大程度的缩减代码，不同选择器之间用逗号分隔。

6.CSS-组合器选择器

组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。
在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

6.1 后代选择器（空格）

实例：

复制代码

    <html>
    <head>
    <title>后代选择器</title>
    <style>
        div p{
            color: blue;
        }
    </style>
    </head>
    <body>
    <div>
        <p>这是div的子/后代</p>
        <p>这也是div的子/后代</p>
    </div>
    </body>
    </html>

6.2 子选择器 (>)

实例：

复制代码

    <html>
    <head>
    <title>子选择器</title>
    <style>
        div>p{
            color: blue;
        }
    </style>
    </head>
    <body>
    <div>
        <p>这是div的子/后代</p>
        <p>这也是div的子/后代</p>
        <section><p>这是div的后代，不是子选择器</p></section>
    </div>
    </body>
    </html>

6.3 相邻兄弟选择器 (+)

实例：

复制代码

    <html>
    <head>
    <title>相邻兄弟选择器</title>
    <style>
        div+p{
            color: blue;
        }
    </style>
    </head>
    <body>
    <div>
        <p>这是div的子/后代</p>
        <p>这也是div的子/后代</p>
        <section><p>这是div的后代，不是子选择器</p></section>
    </div>
    <p>这是div的兄弟，与div同级，并与div相邻</p>
    <p>这也是div的兄弟，但不相邻</p>
    </body>
    </html>

6.4 通用兄弟选择器 (~)

实例：

复制代码

    <html>
    <head>
    <title>通用兄弟选择器</title>
    <style>
        div~p{
            color: blue;
        }
    </style>
    </head>
    <body>
    <div>
        <p>这是div的子/后代</p>
        <p>这也是div的子/后代</p>
        <section><p>这是div的后代，不是子选择器</p></section>
    </div>
    <p>这是div的兄弟，与div同级，并与div相邻</p>
    <p>这也是div的兄弟，但不相邻</p>
    </body>
    </html>

7.CSS-伪类选择器

伪类用于定义元素的特殊状态。

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

7.1 a标签的伪类

：link（未访问状态）
：visited（已被访问状态）
：hover（鼠标悬停状态）
：active（用户激活）

：link 和：visited

对未点击的链接和已点击的链接进行样式设置。

实例：

复制代码

    <html>
    <head>
    <title>伪类选择器</title>
    <style>
        /*已点击的链接颜色：红色*/
        a:link{
            color: red;
        }
        /*未点击的链接颜色：黄色*/
        a:visited{
            color: yellow;
        }
    </style>
    </head>
    <body>
        <a href="https://www.baidu.com/">百度一下</a>
    </html>

：hover

鼠标悬停时的样式。

实例：

复制代码

    <html>
    <head>
    <title>伪类选择器</title>
    <style>
    /*鼠标悬停时字体变大*/
        a:hover{
            font-size: larger;
        }
    </style>
    </head>
    <body>
        <a href="https://www.baidu.com/">百度一下</a>
    </html>

：active

用于选择活动链接。当您在一个链接上点击时，它就会成为活动的。即设置鼠标点击触发的样式。

实例：

复制代码

    <html>
    <head>
    <title>伪类选择器</title>
    <style>
        /*点击一下链接字体会变大*/
        a:active{
            font-size: larger;
        }
    </style>
    </head>
    <body>
        <a href="https://www.baidu.com/">百度一下</a>
    </html>

7.2 伪类选择器合集

选择器	实例	描述
:activ	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 < input > 元素。
:disabled	input:disabled	选择每个被禁用的 < input > 元素。
:empty	p:empty	选择没有子元素的每个 < p > 元素。
:enabled	input:enabled	选择每个已启用的 < input > 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 < p > 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 < p > 元素的每个 < p > 元素。
:focus	input:focus	选择获得焦点的 < input > 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 < input > 元素。
:invalid	input:invalid	选择所有具有无效值的 < input > 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 < p > 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 < p > 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 < p > 元素的每个 < p > 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 < p > 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 < p > 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个< p >元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个< p >元素的每个< p >元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 < p > 元素的每个 < p > 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 < p > 元素的每个 < p > 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 < p > 元素。
:optional	input:optional	选择不带 “required” 属性的 < input > 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 < input > 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 < input > 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 < input > 元素。
:required	input:required	选择指定了 “required” 属性的 < input > 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 < input > 元素。
:visited	a:visited	选择所有已访问的链接。

8.CSS-伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

8.1 伪元素合集

选择器	例子	描述
::after	p::after	在每个 < p > 元素之后插入内容。
::before	p::before	在每个 < p > 元素之前插入内容。
::first-letter	p::first-letter	选择每个 < p > 元素的首字母。
::first-line	p::first-line	选择每个 < p > 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

::after和::before

在元素之后/之前插入内容。

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>伪元素选择器</title>
    <style>
        p::after{
            content:url(image/1.jpg);
        } 
        p::before{
            content: url(image/1.jpg);
            
        }
    </style>
    </head>
    <body>
    <p>这是一个段落</p>
    
    </body>
    </html>

::first-letter

选中元素的第一个字/字母/数字…

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>伪元素选择器</title>
    <style>
        p::first-letter{
            color:red;
            font-size: 70px;
        }
       
    </style>
    </head>
    <body>
    <p>这是一个段落</p>
    </body>
    </html>

::first-line

选择第一行

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>伪元素选择器</title>
    <style>   
        p::first-line{
            background-color: red;
        }
       
    </style>
    </head>
    <body>
    <p>
        君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。
        人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。
        钟鼓馔玉不足贵，但愿长醉不愿醒。
        古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。
        主人何为言少钱，径须沽取对君酌。
        五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
    </p>
    </body>
    </html>

::selection

设置选中时的样式。

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>伪元素选择器</title>
    <style>  
        p::selection{
           background-color: green;
           color: yellow;
       }
    </style>
    </head>
    <body>
    <p>
        君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。
        人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。
        钟鼓馔玉不足贵，但愿长醉不愿醒。
        古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。
        主人何为言少钱，径须沽取对君酌。
        五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
    </p>
    </body>
    </html>

四.CSS创建

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

有三种插入样式表（css）的方法：

外部样式
内部样式
行内样式

1.外部样式

通过使用外部样式表，只需修改一个文件即可改变整个网站的外观！每张 HTML 页面必须在 head 部分的 < link > 元素内包含对外部样式表文件的引用。

实例：

HTML部分：

复制代码

    <html>
    <head>
    <title>外部样式</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div>
        <p>这是个盒子</p>
    </div>
    <h1>外部css</h1>
    <p>这是一个段落</p>
    </body>
    </html>

css部分：

复制代码

    div{
    background-color: red;
    text-align: center;
    }
    h1,div~p{
    text-align: center;
    color: blue;
    }

外部样式分为link引入和import引入两种方式。这两种方式区别：

link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；@import属于css范畴，只能加载css。
link引用css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持。
link支持使用JavaScript控制DOM去改变样式；而@import不支持。

2.内部样式

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 < style > 元素中进行定义。

实例：

复制代码

    <html>
    <head>
    <title>内部样式</title>
    <style>
    div{
    background-color: red;
    }
    </style>
    </head>
     <body>
    <div>
        <p>这是个盒子</p>
    </div>
    <p>这是一个段落</p>
    </body> 
    
    </html>

3.行内样式

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

实例：

复制代码

    <html>
    <head>
    <title>行内样式</title>
    </head>
    <body>
    <div style="background-color:pink; ">
        <p>这是个盒子</p>
    </div>
    <p style="color:red; ">这是一个段落</p>
    </body>
    </html>

4.多重样式优先级

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表。

（行内样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

4.1 行内样式 > 内部样式

实例：

复制代码

    <html>
    <head>
    <title>行内样式</title>
    <style>
        p{
            color: blue;
        }
    </style>
    </head>
    <body>
    <p style="color:red; ">这是一个段落</p>
    </body>
    </html>

上面的< p >样式蓝色并没有生效

4.2 行内样式 > 外部样式

实例：

HTML部分：

复制代码

    <html>
    <head>
    <title>行内样式</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"
    </head>
    <body>
    <p style="color:red; ">这是一个段落</p>
    </body>
    </html>

css部分：

复制代码

    p{
    color: blue;
    }

外部的样式还是没有被引用，颜色还是红色

4.3 内部样式 > 外部样式

实例：

HTML部分：

复制代码

    <html>
    <head>
    <title>行内样式</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style>
        p{
            color: red;
        }
    </style>
    </head>
    <body>
    <p>这是一个段落</p>
    </body>
    </html>

css部分：

复制代码

    p{
    color: blue;
    }

这里颜色还是红色，外部样式没有生效

注意：如果外部样式放在内部样式后面，则外部样式会覆盖内部样式

实例：

复制代码

    <html>
    <head>
    <title>行内样式</title>
    <style>
        p{
            color: red;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <p>这是一个段落</p>
    </body>
    </html>

这里就变成蓝色了，外部样式把内部样式覆盖了

我们可以总结出当渲染元素的顺序为从上到下，行内优先级最高，其次是内部和外部样式，在前面定义的样式会被后面定义的样式所覆盖！！

5.样式权重

！important（10000） >内联样式（1000）>id选择器（100）>l类、伪类选择器（10）>标签选择器（1）

五、CSS背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color：背景颜色
background-image：背景图像
background-repeat：背景图像铺排方式
background-attachment：背景图像滚动位置
background-position：设置背景图片的位置

1.background-colo（背景颜色）

background-color 属性定义了元素的背景颜色.

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css背景</title>
    <style>  
     p{
         background-color: red;
     }
    </style>
    </head>
    <body>
    <p>css背景</p>
    </body>
    </html>

页面的背景颜色使用在body的选择器中:

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css背景</title>
    <style>  
     body{
         background-color: red;
     }
    </style>
    </head>
    <body>
    <p>css背景</p>
    </body>
    </html>

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

2.background-image（背景图像）

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css背景</title>
    <style>  
     body{
         background-image: url("image/1.jpg");
     }
    </style>
    </head>
    <body>
    <p>css背景</p>
    </body>
    </html>

3.background-repeat（背景图像铺排方式）

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css背景</title>
    <style>  
     body{
         background-image: url("image/1.jpg");
     }
    </style>
    </head>
    <body>
    <p>css背景</p>
    </body>
    </html>

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css背景</title>
    <style>  
     body{
         background-image: url('image/1.jpg');
         background-repeat：repeat-x;
     }
    </style>
    </head>
    <body>
    <p>css背景</p>
    </body>
    </html>

有的时候背景图像会影响文本的排版，不太美观

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css背景</title> 
    <style>
    body
    {
    	background-image:url('img_tree.png');
    }
    </style>
    </head>
    
    <body>
    <h1>css背景</h1>
    </body>
    
    </html>

如果你不想让图像平铺，你可以使用 background-repeat 属性:no-repeat；

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css背景</title> 
    <style>
    body
    {
    	background-image:url('img_tree.png');
    	background-repeat:no-repeat;
    }
    </style>
    </head>
    
    <body>
    <h1>css背景</h1>
    </body>
    
    </html>

4.background-position（背景图像的位置）

默认背景图显示在左上角（0,0）

取值：

关键字：top、bottom、left、right、center
坐标：（x，y），向右为x正方向,向下为y正方向

上面实例中背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css背景</title> 
    <style>
    body
    {
    	background-image:url('img_tree.png');
    	background-repeat:no-repeat;
    	background-position:100px 100px;
    }
    </style>
    </head>
    
    <body>
    <h1>css背景</h1>
    </body>
    
    </html>

5.background 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 “background”

当使用简写属性时，属性值的顺序为：
background:background-color|background-image|background-repeat|background-position （用空格隔开）

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css背景</title> 
    <style>
    body
    {
    	background:white url('image/1.jpg') no-repeat right top;
    }
    </style>
    
    </head>
    
    <body>
    <h1>css背景</h1>
    </body>
    
    </html>

6.总结

属性	含义	说明
background-color	背景颜色	取值：transparent （透明） / color
background-image	背景图像	取值：none（没有） / url
background-repeat	背景图像铺排方式	取值：repeat（默认）/ no-repeat（不排列）/ repeat-x（横向排列）/ repeat-y（纵向排列）
background-position	背景图像的显示位置	取值：（x，y） / top（上面）/ center （中间）/ botton（下面）/ left（左边）/ right（右边）
background-attachment	背景图像滚动位置	取值：scroll(默认) / fixed（固定不动）

六、CSS文本

1.文本颜色（color）

颜色属性被用来设置文字的颜色。

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css文本</title>
    <style>  
    /*这里body属性定义的是全文的字体*/
    body{
        color: blue;
    }
    p{
        color: red;
    }
    </style>
    </head>
    <body>
    <p>css文本</p>
    <h1>这是一个标题</h1>
    </body>
    </html>

2.文本的对齐方式（text-align）

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css文本</title>
    <style>  
     p{
         text-align: center;   /*居中对齐*/
     }
     .left{
         text-align: left;     /*左对齐*/
     }
     .right{
         text-align: right;    /*右对齐*/
     }
    </style>
    </head>
    <body>
    <p>君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。  
    </p>
        <p class="left">人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。
        </p>
        <p class="right">
            岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。
        </p>
        
    </body>
    </html>

3.文本修饰（text-decoration）

text-decoration 属性用来设置或删除文本的装饰。

取值：overline（下划线在上面）、line-through（下划线在中间）、underline（下划线在下面）、none（无下划线）

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css文本</title>
    <style>  
      .one{
          text-decoration: overline;
      }
      .two{
          text-decoration: line-through;
      }
      .three{
          text-decoration: underline;
      }
    </style>
    </head>
    <body>
    <p class="one">我是段落1</p>
    <p class="two">我是段落2</p>
    <p class="three">我是段落3</p>
    </body>
    </html>

可以用来删除链接的下划线。

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css文本</title>
    <style>  
     a{
         text-decoration: none;
     }
    </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度一下</a>
    </body>
    </html>

4.文本中字母大小写转换（text-transform）

text-transform 属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

取值：lowercase（大写转小写）、uppercase（小写转大写）、capitalize（首字母大写）

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css文本</title>
    <style>  
      .one{
          text-transform: lowercase;     /*全部转小写*/
      }
      .two{
          text-transform: uppercase;    /*全部转大写*/
      }
      .three{
          text-transform: capitalize;   /*首字母都大写*/
      }
    </style>
    </head>
    <body>
    <p class="one">I am a handsome boy</p>
    <p class="two">I am a handsome boy</p>
    <p class="three">I am a handsome boy</p>
    </body>
    </html>

5.文本缩进（text-indent）

text-indent 属性是用来指定文本的第一行的缩进。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css文本</title> 
    <style>
    p {
    	text-indent:50px;
    	}
    </style>
    </head>
    <body>
    
    <p>
    	君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。
        人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。
        钟鼓馔玉不足贵，但愿长醉不愿醒。
        古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。
        主人何为言少钱，径须沽取对君酌。
        五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
    	</p>
    </body>
    </html>

6.总结

所有css文本

属性	描述	说明
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高	行之间的高度
text-align	对齐元素中的文本	取值：left、center、right
text-decoration	向文本添加修饰	取值：overline（下划线在上面）、line-through（下划线在中间）、underline（下划线在下面）、none（无下划线）
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母	取值：lowercase（大写转小写）、uppercase（小写转大写）、capitalize（首字母大写）
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐	取值：top、middle、bottom可以用于图片和文字的对齐方式
white-space	设置元素中空白的处理方式	文本超出后是否换行，取值：nowrap
word-spacing	设置字间距	只对英文有效

七、CSS字体

font 属性定义css字体，加粗，大小，文字样式。

1.字体大小（font-size）

font-size 属性设置文本的大小。

取值：

inherited 继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
px 像素 pixel
% 百分比，相对父标签字体大小的百分比
em 倍数，相对于父标签字体大小的倍数

HTML根元素默认字体的大小为16px,也称为基础字体大小

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css字体</title>
    <style>  
      .one{
          font-size: 20px;
      }
      .two{
          font-size: 40px;
      }
    
    </style>
    </head>
    <body>
    <p class="one">I am a handsome boy</p>
    <p class="two">I am a handsome boy</p>
    </body>
    </html>

2.字体粗细（ font-weight）

font-weight 属性指定字体的粗细。

取值：

normal ：普通（默认）
bold ：粗体
bolder：比bold粗
lighter：比normal细
自定义

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css字体</title>
    <style>  
      .two{
          font-weight: normal;
      }
      .three{
          font-weight: bold;
      }
      .four{
          font-weight: 300;
      }
    
    </style>
    </head>
    <body>
    <p class="one">我是一个小段落</p>
    <p class="two">我是一个小段落</p>
    <p class="three">我是一个小段落</p>
    <p class="four">我是一个小段落</p>
    </body>
    </html>

3.字体类型（font-family）

font-family 属性指定文本的字体类型

一般建议写3种字体：首选、其次、备用。以逗号隔开

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css字体</title>
    <style>  
      .two{
          font-family: "Times New Roman",Times,serif;
      }
      .three{
          font-family: Arial,Helvetica,sans-serif;
      }
    
    
    </style>
    </head>
    <body>
    <p class="one">我是一个小段落</p>
    <p class="two">这一段的字体是 Times New Roman</p>
    <p class="three">这一段的字体是 Arial.</p>
    </body>
    </html>

4.字体样式（font-style）

font-style 属性指定文本的字体样式

取值：

normal：普通
italic：斜体

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css字体</title>
    <style>
      .one{
          font-style: normal;
      }  
    
      .two{
          font-style: italic;
      }
    
    </style>
    </head>
    <body>
    <p class="one">这是一个段落,正常。</p>
    <p class="two">这是一个段落,斜体。</p>
    </body>
    </html>

5.font 简写属性

当使用简写属性时，属性值的顺序为：

font : font-style|font-weight|font-size|font-family（用空格隔开）

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css字体</title>
    <style>
      .one{
          font:italic bold 30px 华文楷体;
      }  
    
    </style>
    </head>
    <body>
    <p class="one">这是一个段落</p>
    
    </body>
    </html>

6.总结

属性	描述	取值
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列	Arial,Helvetica,sans-serif
font-size	指定文本的字体大小	inherited 继承，px 像素，% 百分比，em 倍数
font-style	指定文本的字体样式	normal：普通，italic：斜体
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。	normal ：普通（默认），bold ：粗体， bolder：比bold粗， lighter：比normal细，自定义

八、CSS链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

实例：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>css链接</title>
    <style>
        a:link{
            color: red;    /*未访问过的链接是红色*/
        }
        a:visited{
            color: yellow;   /*已访问过的链接是黄色*/
        }
        a:hover{
            color: blue;   /*鼠标经过链接是蓝色*/
        }
        a:active{
            color: green;  /*鼠标点击链接是绿色*/
        }
    </style>
    </head>
    <body>
    <a href="https://www.baidu.com" >百度一下</a>
    </body>
    </html>

九、CSS列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

属性	含义	说明
list-style-type	设置列表前的标记	取值：none、disc、circle、square、decimal
list-style-image	将图像作为列表前的标记
list-style-position	设置标记的位置	取值：outside(默认)、inside
list-style	简写

1.列表项标志的类型（list-style-type）

取值：none、disc、circle（空心圆点）、square（实心正方形）、decimal

此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css列表</title> 
    <style>
    .a {
    	list-style-type:circle;
    	}
    .b {
    	list-style-type:square;
    	}
    .c {
    	list-style-type:upper-roman;
    	}
    .d {
    	list-style-type:lower-alpha;
    	}
    </style>
    </head>
    
    <body>
    <p>无序列表实例:</p>
    
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>有序列表实例:</p>
    
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>

2.将图像设置为列表项标志（list-style-image）

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css列表</title> 
    <style>
    ul {
    	list-style-image:url("1.jpg");
    }
    </style>
    </head>
    
    <body>
    <ul>
    <li>妲己</li>
    <li>李白</li>
    <li>韩信</li>
    </ul>
    </body>
    </html>

3.列表简写属性（list-style）

当使用简写属性时，属性值的顺序为：

list-style : list-style-type|list-style-image|list-style-position（用空格隔开）

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css列表</title> 
    <style>
    ul {
    	list-style:square url("1.jpg");
    }
    </style>
    </head>
    
    <body>
    <ul>
    <li>妲己</li>
    <li>李白</li>
    <li>韩信</li>
    </ul>
    </body>
    </html>

4.移除默认设置（none）

list-style-type:none 属性可以用于移除小标记。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css列表</title> 
    <style>
    .a {
    	list-style-type:none;
    }
    </style>
    </head>
    
    <body>
    <p>默认效果</p>
    <ul>
        <li>妲己</li>
        <li>李白</li>
        <li>韩信</li>
    </ul>
    <p>移除默认效果</p>
    <ul class="a">
        <li>妲己</li>
        <li>李白</li>
        <li>韩信</li>
    </ul>
    </body>
    </html>

十.CSS表格

使用 CSS 可以使 HTML 表格更美观。

1.表格边框（border）

使用border属性指定CSS表格的边框。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table,th,td{
    	border:1px solid black;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    </tr>
    </table>
    </body>
    </html>

注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，可以使用 border-collapse属性。

2.折叠边框（border-collapse）

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table {
    border-collapse: collapse;
    }
    table,th,td{
    	border:1px solid black;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    </tr>
    </table>
    </body>
    </html>

3.表格宽度和高度

Width 和 height 属性定义表格的宽度和高度。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table{
    	width:100%;
    }
    th{
    	height:50px;
    }
    table,th,td{
    	border:1px solid black;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    </tr>
    </table>
    </body>
    </html>

这个例子是设置100％的宽度，50像素的th元素的高度的表格

4.表格文字对齐

表格中的文本对齐和垂直对齐属性。

4.1 水平对齐（text-align）

text-align 属性设置水平对齐方式，向左，右，或中心

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table{
    	width:100%;
    }
    th{
    	height:50px;
    }
    table,th,td{
    	border:1px solid black;
    }
    td{
    	text-align:right;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    </tr>
    </table>
    </body>
    </html>

4.2 垂直对齐（vertical-align）

vertical-align 属性设置垂直对齐，比如顶部，底部或中间

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table, td, th
    {
    	border:1px solid black;
    }
    td
    {
    	height:50px;
    	vertical-align:bottom;
    }
    </style>
    </head>
    
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄类型</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    <td>刺客</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    <td>刺客</td>
    </tr>
    <tr>
    <td>妲己</td>
    <td>魅力偶像</td>
    <td>法师</td>
    </tr>
    <tr>
    <td>嬴政</td>
    <td>至尊王权</td>
    <td>法师</td>
    </tr>
    </table>
    </body>
    </html>

5.表格填充（padding）

td 和 th 元素的填充属性（padding）可以控制边框和表格内容之间的间距。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table, td, th
    {
    	border:1px solid black;
    }
    td
    {
    	padding:15px;
    }
    </style>
    </head>
    
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄类型</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    <td>刺客</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    <td>刺客</td>
    </tr>
    <tr>
    <td>妲己</td>
    <td>魅力偶像</td>
    <td>法师</td>
    </tr>
    <tr>
    <td>嬴政</td>
    <td>至尊王权</td>
    <td>法师</td>
    </tr>
    </table>
    </body>
    </html>

6.表格颜色

我们可以指定表格边框的颜色，文本的颜色和背景颜色。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css表格</title>
    <style>
    table, td, th
    {
    	border:1px solid blue;
    }
    th
    {
    	background-color:green;
    	color:white;
    }
    </style>
    </head>
    
    <body>
    <table>
    <tr>
    <th>英雄名称</th>
    <th>英雄类型</th>
    <th>英雄技能</th>
    </tr>
    <tr>
    <td>李白</td>
    <td>青莲剑歌</td>
    <td>刺客</td>
    </tr>
    <tr>
    <td>韩信</td>
    <td>国士无双</td>
    <td>刺客</td>
    </tr>
    <tr>
    <td>妲己</td>
    <td>魅力偶像</td>
    <td>法师</td>
    </tr>
    <tr>
    <td>嬴政</td>
    <td>至尊王权</td>
    <td>法师</td>
    </tr>
    </table>
    </body>
    </html>

十一.CSS盒子模型

所有HTML元素都可以看作盒子！

1.CSS 盒子模型（Box Model）

在CSS中，盒子模型用于设计和布局。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述

说明：

Margin(外边距) - 边框外的区域，外边距是透明的。
Border(边框) - 在外边距和内边距中间的边框。
Padding(内边距) - 边框和内容之间的距离，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

系统默认外边距为8px。

2.元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，您设置的只是内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css盒子模型</title>
    <style>
    div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    }
    </style>
    </head>
    <body>
    
    <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
    
    </body>
    </html>

这个元素盒子的总宽度应该为：

300px (宽度) + 50px (左 + 右外边距) + 50px (左 + 右边框) + 50px (左 + 右内边距) = 450px

而如果你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css盒子模型</title>
    <style>
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }
    </style>
    </head>
    
    <body>
    
    <img src="250x250px.gif" width="250" height="250" />
    
    <div class="ex">上面的图片是250 px宽。这个元素的总宽度也是250 px。</div>
    
    </body>
    </html>

这个元素盒子的总宽度：

220px (宽度) + 10px (左 + 右边框) + 20px (左 + 右内边距) = 250px

总结：

元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

十二.CSS边框

1.CSS边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。
在这里插入图片描述

2.边框样式（border-style）

边框样式属性指定要显示什么样的边界。

border-style 属性用来定义边框的样式

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css边框样式</title> 
    <style>
    p.none {border-style:none;}
    p.dotted {border-style:dotted;}
    p.dashed {border-style:dashed;}
    p.solid {border-style:solid;}
    p.double {border-style:double;}
    p.groove {border-style:groove;}
    p.ridge {border-style:ridge;}
    p.inset {border-style:inset;}
    p.outset {border-style:outset;}
    p.hidden {border-style:hidden;}
    p.mix {border-style: dotted dashed solid double;}
    </style>
    </head>
    
    <body>
    <p class="none">无边框。</p>
    <p class="dotted">虚线边框。</p>
    <p class="dashed">虚线边框。</p>
    <p class="solid">实线边框。</p>
    <p class="double">双边框。</p>
    <p class="groove"> 凹槽边框。</p>
    <p class="ridge">垄状边框。</p>
    <p class="inset">嵌入边框。</p>
    <p class="outset">外凸边框。</p>
    <p class="hidden">隐藏边框。</p>
    <p class="mix">混合边框</p>
    </body>
    
    </html>

3.边框宽度（border-width）

可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：

可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
或者使用 3 个关键字之一，它们分别是 thick （粗的）、medium（默认值）和 thin（细的）。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>边框宽度</title>
    <style>
    p.one 
    {
    	border-style:solid;
    	border-width:5px;
    }
    p.two 
    {
    	border-style:solid;
    	border-width:medium;
    }
    p.three
    {
    	border-style:solid;
    	border-width:1px;
    }
    </style>
    </head>
    
    <body>
    <p class="one">边框宽度设置为5px</p>
    <p class="two">边框宽度设置为medium</p>
    <p class="three">边框宽度设置为1px</p>
    </body>
    
    </html>

注意： “border-width” 属性必须和border-style一起使用，否则不起作用！

4.边框颜色（border-color）

border-color属性用于设置边框的颜色。

可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

您还可以设置边框的颜色为"transparent"（透明的）。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

实例：

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>边框颜色</title>
    <style>
    p.one
    {
    	border-style:solid;
    	border-color:red;
    }
    p.two
    {
    	border-style:solid;
    	border-color:#98bf21;
    } 
    </style>
    </head>
    
    <body>
    <p class="one">实线红色边框</p>
    <p class="two">实线绿色边框</p>
    </body>
    </html>

5.边框-单独设置各边

在CSS中，可以把边框各边设置成不同的样式和颜色。

实例：

复制代码

    <style>
    p
    {
    	border-top-style:dotted;
    	border-right-style:solid;
    	border-bottom-style:dotted;
    	border-left-style:solid;
    }
    </style>
    </head>
    
    <body>
    <p>两个不同的边界样式。</p>
    </body>

也可以设置一个单一属性：

复制代码

    <style>
    p
    {
    	border-style:dotted solid;
    }
    </style>
    </head>
    
    <body>
    <p>两个不同的边界样式。</p>
    </body>

border-style属性可以有1-4个值：

复制代码

    border-style:dotted solid double dashed;

上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed

复制代码

    border-style:dotted solid double;

上边框是 dotted
- 左、右边框是 solid
- 底边框是 double

复制代码

    border-style:dotted solid;

上、底边框是 dotted
- 右、左边框是 solid

复制代码

    border-style:dotted;

四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

6.边框-简写属性

为了使用方便可以在border一个属性中设置边框。

你可以在"border"属性中设置：

border-width
border-style (required：必有的)
border-color

实例：

复制代码

    <style>
    p
    {
    	border:5px solid red;
    }
    </style>
    </head>
    
    <body>
    <p>段落中的一些文本。</p>
    </body>

7.总结

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
border-radius	设置圆角的边框。

十三.CSS轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

常用的outline属性：

outline-color:设置轮廓的颜色
outline-style:设置轮廓的样式
outline-width:设置轮廓的宽度

实例：

复制代码

    <style>
        p{
            border:1px solid black;
            outline:red solid 3px;
        }
    </style>
    
    </head>
    
    <body>
    <p>设置了元素的轮廓</p>
    </body>

十四.CSS外边距（margin）

1.CSS外边距的使用

margin外边距属性定义了元素周围的空间。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
在这里插入图片描述

外边距属性可能的值：

值	说明
auto（自动）	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

margin可以使用负值，重叠的内容。

2.Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距

实例：

复制代码

    <style>
    p
    {
    	background-color:yellow;
    }
    p.margin
    {
    	margin-top:100px;
    	margin-bottom:100px;
    	margin-right:50px;
    	margin-left:50px;
    }
    </style>
    </head>
    
    <body>
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="margin">这是一个指定边距大小的段落。</p>
    </body>

3.Margin - 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

所有边距属性的简写属性是 margin

实例：

复制代码

    <style>
    p
    {
    	background-color:red;
    }
    p.margin
    {
    	margin:100px 50px;
    }
    </style>
    </head>
    
    <body>
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="margin">这是一个指定边距大小的段落。</p>
    </body>

margin属性可以有一到四个值。

复制代码

    margin:25px 50px 75px 100px;

上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px

复制代码

    margin:25px 50px 75px;

上边距为25px
- 左右边距为50px
- 下边距为75px

复制代码

    margin:25px 50px;

上下边距为25px
- 左右边距为50px

复制代码

    margin:25px;

所有的4个边距都是25px

4.总结

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

十五.CSS内边距（padding）

1.CSS内边距的使用

CSS padding 属性定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding 可以单独改变元素的上，下，左，右内边距，也可以一次改变所有的属性。

内边距属性可能的值：

值	说明
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

2.Padding - 单边内边距属性

在CSS中，它可以指定不同的侧面不同的内边距

实例：

复制代码

    <style>
    p
    {
    	background-color:yellow;
    }
    p.padding
    {
    	padding-top:25px;
    	padding-bottom:25px;
    	padding-right:50px;
    	padding-left:50px;
    }
    </style>
    </head>
    
    <body>
    <p>这是一个没有指定内边距大小的段落。</p>
    <p class="padding">这是一个指定内边距大小的段落。</p>
    </body>

上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px

3.Padding - 简写属性

为了缩短代码，有可能使用一个属性中padding指定的所有内边距属性。这就是所谓的简写属性。

所有内边距属性的简写属性是 padding

实例：

复制代码

    <style>
    p
    {
    	background-color:red;
    }
    p.padding
    {
    	padding:25px 50px;
    }
    </style>
    </head>
    
    <body>
    <p>这是一个没有指定内边距的段落。</p>
    <p class="padding">这是一个指定内边距的段落。</p>
    </body>

padding属性可以有一到四个值。

复制代码

    padding:25px 50px 75px 100px;

上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px

复制代码

    padding:25px 50px 75px;

上边距为25px
- 左右边距为50px
- 下边距为75px

复制代码

    padding:25px 50px;

上下边距为25px
- 左右边距为50px

复制代码

    padding:25px;

所有的4个边距都是25px

4.总结

属性	描述
padding	简写属性。在一个声明中设置所有内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

十六.CSS分组和嵌套选择器

1.分组选择器

在样式表中有多相同样式的元素，为了减少代码，可以使用分组选择器！

例如：

复制代码

    h1 {
    color:green;
    }
    h2 {
    color:green;
    }
    p {
    color:green;
    }

样式都相同，我们可以使用分组选择器。每个选择器用逗号分隔。

复制代码

    h1,h2,p
    {
    color:green;
    }

呈现的效果都是一样的。

2.嵌套选择器

适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

实例：

复制代码

    <style>
    p
    {
    	color:blue;
    	text-align:center;
    }
    .marked
    {
    	background-color:red;
    }
    .marked p
    {
    	color:white;
    }
    p.marked{
    text-decoration:underline;
    }
    </style>
    </head>
    
    <body>
    <p>这个段落是蓝色文本，居中对齐。</p>
    <div class="marked">
    <p>这个段落不是蓝色文本。</p>
    </div>
    <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
    	
    <p class="marked">带下划线的 p 段落。</p>
    </body>

十七.CSS尺寸

CSS 尺寸 (Dimension) 用来控制元素的高度和宽度。

所有CSS 尺寸属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

十八.CSS Display(显示) 与 Visibility（可见性）

display(显示)属性设置一个元素应如何显示，visibility(可见性)属性指定一个元素应可见还是隐藏。

1.隐藏元素

使用display:none或visibility:hidden可以隐藏元素，但是两者效果不同，前者隐藏的元素不会占用任何空间，后者隐藏的元素仍占用和隐藏前相同的空间，仍然会影响布局！

2.改变元素的显示

块元素是一个元素，占用了全部宽度，在前后都是换行符。例如< h1 >，< p >

内联元素只需要必要的宽度，不强制换行。例如< span >，< a >

可以通过display 改变块级元素和内联元素，使元素有一定的特定布局。

display:block; 内联元素改为块级元素
display:inline; 块级元素改为内联元素

十九.CSS定位（Position）

position 属性指定了元素的定位类型，position 属性的五个值：

static （静态定位）
relative（相对定位）
fixed （固定定位）
absolute （绝对定位）
sticky（粘性定位）

1.static 定位（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

实例：

复制代码

    <style>
    div.static {
    position: static;
    border: 3px solid #73AD21;
    }
    </style>
    </head>
    <body>
    
    <p>使用 position: static; 静态定位的元素，不能设置偏移值（left/top/right/bottom),占用标准流（文档流）</p>
    
    <div class="static">
    该元素使用了 position: static;
    </div>
    
    </body>

2.fixed 定位（固定定位）

元素的位置相对于浏览器窗口是固定位置。不会随着窗口滚动而移动。

实例：

复制代码

    <style>
    p.pos_fixed
    {
    	position:fixed;
    	top:30px;
    	right:5px;
    }
    </style>
    </head>
    <body>
    
    <p class="pos_fixed">Some more text</p>
    <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
    </body>

可以看到窗口滚动但设置了fixed 定位的 “Some more text”元素是不会随窗口滚动的

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

3.relative 定位（相对定位）

元素的位置是相对于自身所占的位置，移动这个元素的位置，但是原本所占的空间不会改变，还会保留！

实例：

复制代码

    <style>
    h2.pos_left
    {
    	position:relative;
    	left:-20px;
    }
    
    h2.pos_right
    {
    	position:relative;
    	left:20px;
    }
    </style>
    </head>
    
    <body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
    </body>

移动相对定位元素，但它原本所占的空间不会改变，还会保留。

复制代码

    <style>
    h2.pos_top
    {
    	position:relative;
    	top:-60px;
    }
    </style>
    </head>
    
    <body>
    <h2>这是一个没有定位的标题</h2>
    <h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
    <p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。仍占用文档流</p>
    </body>

4.absolute 定位（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html >。

实例：

复制代码

    <style>
    h2
    {
    	position:absolute;
    	left:100px;
    	top:150px;
    }
    </style>
    </head>
    
    <body>
    <h2>这是一个绝对定位了的标题</h2>
    <p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。</p>
    </body>

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

5.sticky 定位（粘性定位）

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

实例：

复制代码

    <style>
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <p>尝试滚动页面。</p>
    <p>当顶部距离为 0 时，元素就会转换为固定定位</p>
    
    <div class="sticky">我是粘性定位!</div>
    
    <div style="padding-bottom:2000px">
      <p>滚动我</p>
      <p>来回滚动我</p>
      <p>滚动我</p>
      <p>来回滚动我</p>
      <p>滚动我</p>
      <p>来回滚动我</p>
    </div>
    
    </body>

6.重叠的元素（z-index）

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序

实例：

复制代码

    <style>
    img
    {
    	position:absolute;
    	left:0px;
    	top:0px;
    	z-index:-1;
    }
    </style>
    </head>
    
    <body>
    <h1>This is a heading</h1>
    <img src="w3css.gif" width="100" height="140" />
    <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
    </body>

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

二十.CSS布局（Overflow）

CSS的 overflow 属性用于控制内容溢出元素框时显示的方式，在对应的元素区间内添加滚动条。

overflow 属性只工作于指定高度的块元素上。

实例：

复制代码

    <style>
    #overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
    }
    </style>
    </head>
    <body>
    
    <div id="overflowTest">
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    </div>
    
    </body>

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

二十一.CSS浮动（Float）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往用于图像的布局。

1.元素是怎么浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它。

实例：

复制代码

    <style>
    img 
    {
    	float:right;
    }
    </style>
    </head>
    
    <body>
    <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    <p>
    <img src="logocss.gif" width="95" height="84" />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    </p>
    </body>

2.彼此相邻的浮动元素

当几个浮动的元素放在一起，如果有空间的话，它们将彼此相邻。

实例：

复制代码

    <style>
    .thumbnail 
    {
    	float:left;
    	width:110px;
    	height:90px;
    	margin:5px;
    }
    </style>
    </head>
    
    <body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    </body>

请添加图片描述
可以看到图片一直是靠着左边的。

3.清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

实例：

没有使用clear属性的效果：
在这里插入图片描述

使用了clear属性的效果：

复制代码

    <style>
    .thumbnail 
    {
    	float:left;
    	width:110px;
    	height:90px;
    	margin:5px;
    }
    .text_line
    {
    	clear:both;
    	margin-bottom:2px;
    }
    </style>
    </head>
    
    <body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <h3 class="text_line">第二行</h3>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    </body>

chear：left 清除左浮动
chear：right 清除右浮动
chear：both 清除左右浮动
chear：none 左右浮动都不清除

清除浮动的五种方法：

HTML代码：

复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        #parent{
            border: 1px solid black;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    </style>
    </head>
    <body>
    <div id="parent">
        <div id="child"></div>
    </div>   
    </body>
    </html>

方法一：额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

css样式：

复制代码

    #clear{
    clear: both;
    }

html代码：

复制代码

    <div id="parent">
    <div id="child"></div>
    <!-- 方法一  额外标签法 -->
    <div id="clear"></div>
    </div>

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

css样式：

复制代码

    #parent{
    overflow: hidden;
    }

方法三：使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

css样式：

复制代码

    #parent:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
    }
    #parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

方法四：使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

css样式：

复制代码

    #parent:after,#parent:before{
    content: "";
    display: table;
    }
    #parent:after{
    clear: both;
    }
    #parent{
    *zoom: 1;
    }

方法五：为父元素设置高度

缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

优点: 简单粗暴直接有效，清除了浮动带来的影响。

二十二.CSS布局-对齐

1.水平对齐

1.1 元素居中对齐

使用 margin: auto; 水平对齐一个元素，同时设置元素的宽度防止它溢出到容器的边缘！

元素通过指定宽度，将两边的空外边距平均分配，达到元素居中的效果！

实例：

复制代码

    <style>
    .center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
    }
    </style>
    </head>
    <body>
    
    <h2>元素居中对齐</h2>
    
    <div class="center">
      <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
    </div>
    
    </body>

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

1.2 文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

实例：

复制代码

    <style>
    .center {
    text-align: center;
    border: 3px solid green;
    }
    </style>
    </head>
    <body>
    
    <h2>文本居中对齐</h2>
    
    <div class="center">
      <p>文本居中对齐。</p>
    </div>
    
    </body>

1.3 图片居中对齐

要让图片居中对齐，首先要把它放在块级元素中，然后使用margin: auto;

实例：

复制代码

    <style>
    img {
    display: block;
    margin: auto;
    }
    </style>
    </head>
    <body>
    
    <h2>图片居中对齐</h2>
    <p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>
    
    <img src="1.jpg" alt="Paris" style="width:40%">
    
    </body>

1.4 使用定位方式实现左右对齐

position: absolute; 属性可以用来对齐元素。

实例：

复制代码

    <style>
    .right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
    }
    </style>
    </head>
    <body>
    
    <h2>右对齐</h2>
    <p>以下实例演示了如何使用 position 来实现右对齐:</p>
    
    <div class="right">
      <p>使用定位实现右对齐</p>
    </div>
    
    </body>

当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。同时，为了解决浏览器带来的差异，当使用 position 属性时，需要始终设置 !DOCTYPE 声明。

1.5 使用浮动方式实现左右对齐

同样也可以使用flaot属性来对齐元素。

实例：

复制代码

    <style>
    .right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
    }
    </style>
    </head>
    <body>
    
    <h2>右对齐</h2>
    <p>以下实例演示了使用 float 属性来实现右对齐:</p>
    
    <div class="right">
      <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>
    </div>
    
    </body>

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出！这个时候可以使用清除浮动来解决问题。

2.垂直对齐

可以通过设置内边距来实现垂直对齐！

实例：

复制代码

    <style>
    .center {
    padding: 70px 0;
    border: 3px solid green;
    }
    </style>
    </head>
    <body>
    
    <h2>垂直居中</h2>
    
    <div class="center">
      <p>我是垂直居中的。</p>
    </div>
    
    </body>

如果要水平和垂直都居中，可以使用 padding 和 text-align: center

实例：

复制代码

    <style>
    .center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
    }
    </style>
    </head>
    <body>
    
    <h2>Centering</h2>
    
    <div class="center">
      <p>我是水平和垂直都居中的。</p>
    </div>
    
    </body>

垂直居中 - 使用 line-height

实例：

复制代码

    <style>
    .center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
    }
    /* 如果文本有多行，添加以下代码: */
    .center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
    }
    </style>
    </head>
    <body>
    
    <h2>居中</h2>
    
    <div class="center">
      <p>我是垂直居中的。</p>
    </div>
    
    </body>

在这里插入图片描述
垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中

实例：

复制代码

    <style>
    .center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
    }
    
    .center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    </style>
    </head>
    <body>
    
    <h2>居中</h2>
    
    <div class="center">
      <p>我是水平和垂直居中的。</p>
    </div>
    
    <p>注意: IE8 及更早版本不支持 transform 属性。</p>
    
    </body>

二十三.CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。

1.CSS :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

1.1 匹配第一个 < p > 元素

选择器匹配作为任何元素的第一个子元素的 < p > 元素

实例：

复制代码

    <style>
    p:first-child
    {
    	color:blue;
    } 
    </style>
    </head>
    
    <body>
    <p>This is some text.</p>
    <p>This is some text.</p>
    <p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
    </body>

1.2 匹配所有< p > 元素中的第一个 < i > 元素

选择相匹配的所有< p >元素的第一个 < i > 元素

实例：

复制代码

    <style>
    p > i:first-child
    {
    	color:blue;
    } 
    </style>
    </head>
    
    <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
    </body>

1.3 匹配所有作为第一个子元素的 < p > 元素中的所有 < i > 元素

选择器匹配所有作为元素的第一个子元素的 < p > 元素中的所有 < i > 元素

实例：

复制代码

    <style>
    p:first-child i
    {
    	color:blue;
    } 
    </style>
    </head>
    
    <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
    </body>

二十四.CSS导航栏

1.HTML设置菜单项

使用CSS可以美化HTML的菜单！导航栏类似于链接列表，所以使用< ul >属性来创建

实例：

复制代码

    <body>
    <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

在这里插入图片描述
对菜单进行美化，删除外边距和填充，同时去掉无序列表标记

实例：

复制代码

    <style>
    ul
    {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
    </ul>
    </body>

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0

2.垂直导航栏

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色

实例：

复制代码

    <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    li a {
      display: block;
      width: 60px;
      background-color: #dddddd;
    }
    	/* 鼠标移动到选项上修改背景颜色 */
    li a:hover {
    background-color: rgb(144,144,144);
    color: white;
    }
    </style>
    </head>
    <body>
    
    <ul>
    	<li><a href="#home">主页</a></li>
    	<li><a href="#news">新闻</a></li>
    	<li><a href="#contact">联系</a></li>
    	<li><a href="#about">关于</a></li>
    </ul>
    
    <p>背景颜色添加到链接中显示链接的区域。</p>
    <p>注意，整个区域是可点击的链接，而不仅仅是文本。</p>
    
    </body>

请添加图片描述
示例说明：

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

2.1 激活/当前导航条

在点击了选项后，我们可以添加 “active” 类来表示哪个选项被选中

实例：

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    }
    
    li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    }
    
    li a.active {
    background-color: #4CAF50;
    color: white;
    }
    
    li a:hover:not(.active) {
    background-color: #555;
    color: white;
    }
    </style>
    </head>
    <body>
    
    <h2>垂直导航条</h2>
    <p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

2.2 创建链接并添加边框

可以在 < li> or < a> 上添加 text-align:center 样式来让链接居中。

可以在 border < ul> 上添加 border 属性来让导航栏有边框。

如果要在每个选项上添加边框，可以在每个 < li> 元素上添加border-bottom 。

实例：

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
    }
    
    li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    }
    
    li {
    text-align: center;
    border-bottom: 1px solid #555;
    }
    
    li:last-child {
    border-bottom: none;
    }
    
    li a.active {
    background-color: #4CAF50;
    color: white;
    }
    
    li a:hover:not(.active) {
    background-color: #555;
    color: white;
    }
    </style>
    </head>
    <body>
    
    <h2>垂直导航条</h2>
    <p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

2.3 全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

实例：

复制代码

    <style>
    body {
    margin: 0;
    }
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
    }
    
    li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    }
    
    li a.active {
    background-color: #4CAF50;
    color: white;
    }
    
    li a:hover:not(.active) {
    background-color: #555;
    color: white;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    <div style="margin-left:25%;padding:1px 16px;height:1000px;">
      <h2>Fixed Full-height Side Nav</h2>
      <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
      <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
      <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
    </div>
    
    </body>

3.水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

如果要链接到具有相同的大小，则必须使用浮动的方法。

3.1 内联列表项

建立一个横向导航栏的方法之一是指定元素。

实例：

复制代码

    <style>
    ul
    {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
    li
    {
    display:inline;
    }
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

示例说明：

display:inline; - 默认情况下，< li> 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

3.2 浮动列表项

使用内联列表项时，链接有不同的宽度，如果要使用相同的宽度，则需要使用浮动列表项。

实例：

复制代码

    <style>
    ul
    {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    	overflow:hidden;
    }
    li
    {
    	float:left;
    }
    a
    {
    	display:block;
    	width:60px;
    	background-color:#dddddd;
    }
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    
    
    <p>背景颜色添加到链接中显示链接的区域。整个链接区域是可点击的,不仅仅是文本。</p>
    
    <p><b>注意:</b> overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。</p>
    
    </body>

4.实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover {
    background-color: #111;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover:not(.active) {
    background-color: #111;
    }
    
    .active {
    background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover:not(.active) {
    background-color: #111;
    }
    
    .active {
    background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li style="float:right"><a class="active" href="#about">关于</a></li>
    </ul>
    
    </body>

添加分割线

< li> 通过 border-right 样式来添加分割线:

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    
    li {
    float: left;
    border-right:1px solid #bbb;
    }
    
    li:last-child {
    border-right: none;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover:not(.active) {
    background-color: #111;
    }
    
    .active {
    background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li style="float:right"><a href="#about">关于</a></li>
    </ul>
    
    </body>

固定导航条

可以设置页面的导航条固定在头部或者底部：

复制代码

    <style>
    body {margin:0;}
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover:not(.active) {
    background-color: #111;
    }
    
    .active {
    background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
    <h1>Fixed Top Navigation Bar</h1>
    <h2>Scroll this page to see the effect</h2>
    <h2>The navigation bar will stay at the top of the page while scrolling</h2>
    
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    
    </div>
    
    </body>

固定在底部：

复制代码

    <style>
    body {margin:0;}
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover:not(.active) {
    background-color: #111;
    }
    
    .active {
    background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    <div style="padding:20px;background-color:#1abc9c;height:1500px;">
    <h1>Fixed Bottom Navigation Bar</h1>
    <h2>Scroll this page to see the effect</h2>
    <h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
    
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    </div>
    
    </body>

灰色水平导航条：

复制代码

    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover:not(.active) {
    background-color: #ddd;
    }
    
    li a.active {
    color: white;
    background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>
    
    </body>

二十五.CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

1.基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

实例：

复制代码

    <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>
    </head>
    <body>
    
    <h2>鼠标移动后出现下拉菜单</h2>
    <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
    
    <div class="dropdown">
      <span>鼠标移动到我这！</span>
      <div class="dropdown-content">
    <p>css教程</p>
    <p>加油！！！</p>
      </div>
    </div>
    
    </body>

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：< span>, 或 a < button> 元素。

使用容器元素 (如： < div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 < div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

2.常见下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项

实例：

复制代码

    <style>
    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }
    
    .dropdown {
    position: relative;
    display: inline-block;
    }
    
    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
    display: block;
    }
    
    .dropdown:hover .dropbtn {
    background-color: #3e8e41;
    }
    </style>
    </head>
    <body>
    
    <h2>下拉菜单</h2>
    <p>鼠标移动到按钮上打开下拉菜单。</p>
    
    <div class="dropdown">
      <button class="dropbtn">下拉菜单</button>
      <div class="dropdown-content">
    <a href="http://www.runoob.com">韩信</a>
    <a href="http://www.runoob.com">李白</a>
    <a href="http://www.runoob.com">妲己</a>
      </div>
    </div>
    
    </body>

3.下拉内容对齐方式

复制代码

    <style>
    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }
    
    .dropdown {
    position: relative;
    display: inline-block;
    }
    
    .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
    display: block;
    }
    
    .dropdown:hover .dropbtn {
    background-color: #3e8e41;
    }
    </style>
    </head>
    <body>
    
    <h2>下拉内容的对齐方式</h2>
    <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>
    
    <div class="dropdown" style="float:left;">
      <button class="dropbtn">左</button>
      <div class="dropdown-content" style="left:0;">
    <a href="#">韩信</a>
    <a href="#">李白</a>
    <a href="#">妲己</a>
      </div>
    </div>
    
    <div class="dropdown" style="float:right;">
      <button class="dropbtn">右</button>
      <div class="dropdown-content">
    <a href="#">韩信</a>
    <a href="#">李白</a>
    <a href="#">妲己</a>
      </div>
    </div>
    
    </body>

二十六.CSS提示工具

提示工具在鼠标移动到指定元素后触发。

1.基础提示框

实例：

复制代码

    <style>
    /* Tooltip 容器 */
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;  /* 悬停元素上显示点线 */
    }
    /* Tooltip 文本 */
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    }
    /* 鼠标移动上去后显示提示框 */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <div class="tooltip">鼠标移动到这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

实例解析 ：

HTML：

使用容器元素 (like < div>) 并添加 “tooltip” 类。在鼠标移动到 < div> 上时显示提示信息。

提示文本放在内联元素上(如 < span>) 并使用class=“tooltiptext”。

CSS：

tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。

tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示。设置了一些宽度、背景色、字体色等样式。

CSS3 border-radius 属性用于为提示框添加圆角。

:hover 选择器用于在鼠标移动到到指定元素 < div> 上时显示的提示。

2.定位提示工具

以上实例中，提示工具显示在指定元素的右侧(left:105%) 。

注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。

在提示框显示在左边的情况也是这个原理。

显示在右侧：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>右侧提示工具</h2>
    <p>鼠标移动到以下元素:</p>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

显示在左侧：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>左侧提示工具</h2>
    <p>鼠标移动到以下元素:</p>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

如果你想要提示工具显示在头部和底部。我们需要使用 margin-left 属性，并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。

显示在头部：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;  /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>头部提示工具</h2>
    <p>鼠标移动到以下元素:</p>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

显示在底部：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;  /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    
    <h2>底部提示工具</h2>
    <p>鼠标移动到以下元素:</p>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

3.添加箭头

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

实例：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;  /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>顶部提示框/底部箭头</h2>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

实例解析：

在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。

注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头才能居中显示。

border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

底部提示框/顶部箭头：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;    /* 提示工具头部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>底部提示框/顶部箭头</h2>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

右侧提示框/左侧箭头：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
    }
    
    .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;  /* 提示工具左侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
    }
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>右侧提示框/左侧箭头</h2>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

左侧提示框/右侧箭头：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
    }
    
    .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;  /* 提示工具右侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
    }
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>左侧提示框/右侧箭头</h2>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

4.淡入效果

我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果

实例：

复制代码

    <style>
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
    }
    
    .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    }
    </style>
    <body style="text-align:center;">
    
    <h2>提示工具淡入效果</h2>
    <p>鼠标移动到以下元素，提示工具会再一秒内从 0% 到 100% 完全显示。</p>
    
    <div class="tooltip">鼠标移动到我这
      <span class="tooltiptext">提示文本</span>
    </div>
    
    </body>

二十七.CSS 属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 [ ] 来定义，[ ] 内部为元素的属性，属性选择器的权重要高于标签选择器

[属性名]：p[class] 查找p标签下的所有class属性

[属性名=属性值]： p[class=content] 查找p标签下的所有class属性名=content的属性值

[属性名^=属性值]：p[class ^=content] 查找class属性值含有content，且以content开头

[属性名 $=属性值]：p[class$ =content] 查找class属性值含有content，且以content结尾

[属性名 * =属性值]：p[class * =content] 查找class属性值中包含有content的就行

[属性名 ~=属性值]：p[class ~= content]：查找 class属性的属性值content单独存在或存在的属性值与其他属性值之间用空格隔开就能被选择

[属性名 |=属性值]：p[class |= content] ：查找 class 属性的属性值单独存在或属性值之间用 “-” 隔开且属性值 content在 “-” 前

1.[属性名]

p[class] ：查找p标签下的所有class属性

复制代码

    <style>
    	p[class]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="yi">我是一</p>
    	<p class="er">我是二</p>
    	<p class="san">我是三</p>
    	<p id="si">我是四</p>
    </body>

2.[属性名=属性值]

p[class=content] ：查找p标签下的所有class属性名=x 的属性值

复制代码

    <style>
    	p[class="x"]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="x yi">我是一</p>
    	<p class="x er">我是二</p>
    	<p class="x">我是x</p>
    	<p class="san">我是三</p>
    	<p id="si">我是四</p>
    </body>

3.[属性名^=属性值]

p[class ^=x] ：查找class属性值含有x，且x在最前面

复制代码

    <style>
    	p[class ^="x"]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="x yi">我是一</p>
    	<p class="x er">我是二</p>
    	<p class="x">我是x</p>
    	<p class="san">我是三</p>
    	<p id="si x">我是四</p>
    </body>

4.[属性名 $ =属性值]

p[class $ =x] ：查找class属性值含有x，且以x结尾

复制代码

    <style>
    	p[class $="x"]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="x yi">我是一</p>
    	<p class="x er">我是二</p>
    	<p class="x">我是x</p>
    	<p class="san">我是三</p>
    	<p class="san x">我也是三</p>
    	<p id="si x">我是四</p>
    </body>

5. [属性名 * =属性值]

p[class * =x] ：查找class属性值中包含有x的

复制代码

    <style>
    	p[class *="x"]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="x yi">我是一</p>
    	<p class="x er">我是二</p>
    	<p class="x">我是x</p>
    	<p class="san">我是三</p>
    	<p class="san x">我也是三</p>
    	<p id="si x">我是四</p>
    </body>

6.[属性名 ~=属性值]

p[class ~= x]： p元素中的 class属性的属性值x单独存在或存在的属性值与其他属性值之间用空格隔开就能被选择

复制代码

    <style>
    	p[class ~="x"]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="x-yi">我是一</p>
    	<p class="x er">我是二</p>
    	<p class="x">我是x</p>
    	<p class="san">我是三</p>
    	<p class="san x">我也是三</p>
    	<p id="si x">我是四</p>
    </body>

7.[属性名 |=属性值]

p[class |= x] ：p 元素中 class 属性的属性值单独存在或属性值之间用 “-” 隔开且属性值 x在 “-” 前

复制代码

    <style>
    	p[class |="x"]{
    		color:blue;
    	}
    </style>
    </head>
    <body>
    	<p class="x-yi">我是一</p>
    	<p class="x er">我是二</p>
    	<p class="x">我是x</p>
    	<p class="san-x">我是三</p>
    	<p class="san x">我也是三</p>
    	<p id="si x">我是四</p>
    </body>

二十八.CSS 表单

我们可以使用 CSS 来渲染 HTML 的表单元素

1.输入框(input) 样式

使用 width 属性来设置输入框的宽度：

复制代码

    <style> 
    input {
      width: 100%;
    }
    </style>
    </head>
    <body>
    
    <p>全宽输入框:</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
    </form>
    
    </body>

在这里插入图片描述
以上实例中设置了所有 < input> 元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：

input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框

2.输入框填充

使用 padding 属性可以在输入框中添加内边距：

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
    }
    </style>
    </head>
    <body>
    
    <p>设置文本框的内边距:</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </form>
    
    </body>

在这里插入图片描述
注意：我们设置了 box-sizing 属性为 border-box。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。

3.输入框(input) 边框

使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角：

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: 2px solid red;
      border-radius: 4px;
    }
    </style>
    </head>
    <body>
    
    <p>文本框的边框:</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </form>
    
    </body>

如果你只想添加底部边框可以使用 border-bottom 属性：

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: none;
      border-bottom: 2px solid red;
    }
    </style>
    </head>
    <body>
    
    <p>只在文本框底部添加边框:</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </form>
    
    </body>

4.输入框(input) 颜色

可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: none;
      background-color: #3CBC8D;
      color: white;
    }
    </style>
    </head>
    <body>
    
    <p>设置输入框颜色:</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
    
    </body>

5.输入框(input) 聚焦

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。

使用 :focus 选择器可以设置输入框在获取焦点时的样式。

实例：

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: 1px solid #555;
      outline: none;
    }
    
    input[type=text]:focus {
      background-color: lightblue;
    }
    </style>
    </head>
    <body>
    
    <p>在这个实例中，我们使用了 :focus 选择器（点击输入框时）来给文本输入框添加背景颜色:</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
    
    </body>

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: 3px solid #ccc;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      outline: none;
    }
    
    input[type=text]:focus {
      border: 3px solid #555;
    }
    </style>
    </head>
    <body>
    
    <p>在这个实例，我们使用 :focus 选择器，在文本框获取焦点时，设置文本框当边框颜色为黑色。</p>
    <p>注意，我们使用来 CSS transition 属性来设置边框当颜色 (在 0.5 秒内修改边框当颜色)。</p>
    
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
    
    </body>

6.输入框(input) 图标

如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：

复制代码

    <style> 
    input[type=text] {
      width: 100%;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      background-color: white;
      background-image: url('1.png');
      background-position: 10px 10px; 
      background-repeat: no-repeat;
      padding: 12px 20px 12px 40px;
    }
    </style>
    </head>
    <body>
    
    <p>输入框按钮:</p>
    
    <form>
      <input type="text" name="search" placeholder="搜索..">
    </form>
    
    </body>

7.带动画的搜索框

以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。

实例：

复制代码

    <style> 
    input[type=text] {
      width: 130px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      background-color: white;
      background-image: url('1.png');
      background-position: 10px 10px; 
      background-repeat: no-repeat;
      padding: 12px 20px 12px 40px;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
    }
    
    input[type=text]:focus {
      width: 100%;
    }
    </style>
    </head>
    <body>
    
    <p>搜索输入框带动画:</p>
    
    <form>
      <input type="text" name="search" placeholder="搜索..">
    </form>
    
    </body>

8.文本框（textarea）样式

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

实例：

复制代码

    <style> 
    textarea {
      width: 100%;
      height: 150px;
      padding: 12px 20px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      background-color: #f8f8f8;
      font-size: 16px;
      resize: none;
    }
    </style>
    </head>
    <body>
    
    <p><strong>提示:</strong> 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。</p>
    
    <form>
      <textarea>一些文本...</textarea>
    </form>
    
    </body>

9.下拉菜单（select）样式

实例：

复制代码

    <style> 
    select {
      width: 100%;
      padding: 16px 20px;
      border: none;
      border-radius: 4px;
      background-color: #f1f1f1;
    }
    </style>
    </head>
    <body>
    
    <p>下拉菜单</p>
    
    <form>
      <select id="country" name="country">
      <option value="au">Australia</option>
      <option value="ca">Canada</option>
      <option value="usa">USA</option>
      </select>
    </form>
    
    </body>

9.按钮样式

实例：

复制代码

    <style> 
    input[type=button], input[type=submit], input[type=reset] {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
    }
    </style>
    </head>
    <body>
    
    <p>按钮样式</p>
    
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    
    </body>

二十九.CSS !important 规则

1.什么是 !important

CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

实例：

复制代码

    <style>
    #myid {
      background-color: blue;
    }
    
    .myclass {
      background-color: gray;
    }
    
    p {
      background-color: red !important;
    }
    </style>
    </head>
    <body>
    
    <p>段落中的一些文本内容！！！都会显示红色，因为 !important 权重最大，覆盖了其他的样式</p>
    
    <p class="myclass">段落中的一些文本内容！！！</p>
    
    <p id="myid">段落中的一些文本内容！！！</p>
    
    </body>

如果3个元素属性都设置了！important，那么它最终呈现的样式是不变的。

实例：

复制代码

    <style>
    #myid {
      background-color: blue !important;
    }
    
    .myclass {
      background-color: gray !important;
    }
    
    p {
      background-color: red !important;
    }
    </style>
    </head>
    <body>
    
    <p>段落中的一些文本内容！！！</p>
    
    <p class="myclass">段落中的一些文本内容！！！</p>
    
    <p id="myid">段落中的一些文本内容！！！</p>
    
    </body>

全部评论 (0)

还没有任何评论哟~

web前端开发之CSS

文章目录 CSS 一.CSS语法二.CSS注释三.CSS选择器 1.CSS元素选择器 2.CSSid选择器（） 3.CSS类选择器（.） 4.CSS通用选择器（） 5.CSS分组选择器 6.CSS...

Web 前端开发技术 —— CSS

文章目录 Web前端开发技术——CSS 一、样式定义方式 1\.行内样式表 2内部样式表 3外部样式表二、选择器 1\.标签选择器 2\.ID选择器 3\.类选择器 4\.伪类选择器三、颜色四、...

web前端开发---CSS快速掌握

CSS简介 CSSCascadingStyleSheets的缩写，翻译为“层叠样式表”或者“级联样式表”，简称样式表。其主要作用是为HTML网页设置外观或样式HTML网页中文字的大小，颜色，字体，网...

Web前端基础之CSS

1.CSS概念 CSS（CascadingStyleSheets）层叠样式表，又叫级联样式表，简称样式表 CSS文件后缀名为.css CSS用于HTML文档中元素样式的定义,例如:字体颜色、字体大小等...

Web前端开发学习笔记04--CSS

CSS 1、Emmet语法 1.1生成HTML结构语法 1.2生成CSS样式语法 1.3快速格式化代码 2、CSS的复合选择器 2.1后代选择器 2.2子元素选择器（子代选择器） 2.3并集选择器 2...

Web前端开发技术 HTML、CSS、JavaScript pdf

链接：https://pan.baidu.com/s/1uYi32GDgqhEKWZuAKBog5w密码：2hch 本书为完整版，以下为内容截图：

web项目开发之前端规范 --- CSS编码规范

此文严格按照W3C规范和部分实际项目可读性，浏览器加载，性能等众多属性权衡，做出平时前端编码规范文档。供广大web工作者参考并实施，对维护和项目扩展升级都能省时省力。

Web前端-Web开发CSS基础6-弹性盒子

一.基础 1\.引入弹性盒子的目的是？ 2\.引入弹性盒子的目的是？ 3\.引入弹性盒子的目的是？ 4\.弹性盒子由组成； 5\.弹性盒子由组成； 6\.弹性盒子由组成； 7\.如何将容器定义为弹性容...

web前端开发------CSS有关知识梳理

CSSFonts字体用于定义系列，大小，粗细，和文字样式（如斜体）字体款式： CSS使用fontfamily属性定义文本的字体系列。举例： <head <style p//将p段落的字体设置为微软...

Web前端开发 CSS常用样式大全

Web前端开发CSS常用样式大全文章目录 1CSS简介 2选择器 2.1标签选择器 2.2类选择器 2.3id选择器 2.4复合选择器 2.4.1后代选择器 2.4.2子代选择器 2.4.3并集选择...

是否确定退出登录?

web前端开发之CSS

文章目录

CSS

一.CSS语法

二.CSS注释

三.CSS选择器

1.CSS-元素选择器

2.CSS-id选择器（#）

3.CSS-类选择器（.）

4.CSS-通用选择器（*）

5.CSS-分组选择器

6.CSS-组合器选择器

6.1 后代选择器（空格）

6.2 子选择器 (>)

6.3 相邻兄弟选择器 (+)

6.4 通用兄弟选择器 (~)

7.CSS-伪类选择器

7.1 a标签的伪类

：link 和 ：visited

：hover

：active

7.2 伪类选择器合集

8.CSS-伪元素选择器

8.1 伪元素合集

::after和::before

::first-letter

::first-line

::selection

四.CSS创建

1.外部样式

2.内部样式

3.行内样式

4.多重样式优先级

4.1 行内样式 > 内部样式

4.2 行内样式 > 外部样式

4.3 内部样式 > 外部样式

5.样式权重

五、CSS背景

1.background-colo（背景颜色）

2.background-image（背景图像）

3.background-repeat（背景图像铺排方式）

4.background-position（背景图像的位置）

5.background 简写属性

6.总结

六、CSS文本

1.文本颜色 （color）

2.文本的对齐方式 （text-align）

3.文本修饰 （text-decoration）

4.文本中字母大小写转换 （text-transform）

5.文本缩进（text-indent）

6.总结

七、CSS字体

1.字体大小（font-size）

2.字体粗细（ font-weight）

3.字体类型（font-family）

4.字体样式（font-style）

5.font 简写属性

6.总结

八、CSS链接

九、CSS列表

1.列表项标志的类型（list-style-type）

2.将图像设置为列表项标志（list-style-image）

3.列表简写属性（list-style）

4.移除默认设置（none）

十.CSS表格

1.表格边框（border）

2.折叠边框（border-collapse）

3.表格宽度和高度

4.表格文字对齐

4.1 水平对齐（text-align）

4.2 垂直对齐（vertical-align）

5.表格填充（padding）

6.表格颜色

十一.CSS盒子模型

1.CSS 盒子模型（Box Model）

2.元素的宽度和高度

十二.CSS边框

1.CSS边框属性

2.边框样式（border-style）

：link 和：visited

1.文本颜色（color）

2.文本的对齐方式（text-align）

3.文本修饰（text-decoration）

4.文本中字母大小写转换（text-transform）