CSS笔记

CSS

什么是CSS
- CSS的作用是:可以给网页中的每一个元素设置样式("化妆"、排版布局),让网页更加精美。
- 完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片
- CSS全称是Cascading Style Sheets. 层叠样式表

CSS样式书写格式

CSS提供了各种各样、丰富多彩的CSS样式，书写格式如下所示

color: red

冒号左边是样式名，冒号:右边是样式值

如何将CSS样式应用到元素上？

CSS提供了3种方法、可以将CSS样式应用到元素上
- 内联样式(inline style)
- 文档样式表(document style sheets)、内嵌样式表(embed style style sheet)
- 外部样式表 (external style sheet)

内联样式

将样式直接写在元素的style属性上

<div style="color: white;background-color: red">文字内容</div>

CSS样式之间用;隔开,建议每条CSS样式后面都加上分号;
在很多国内外资料中，CSS样式与 CSS属性是一个意思
- 样式名对应的属性名
- 样式值对应的属性值
有些人也把inline 翻译为"行内"，用"内联"更合适，表示"内部自带"的意思

文档样式表

将样式写在head元素中的style元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: white;
            background-color: red;
        }
    </style>
</head>

<style> 元素的type属性值默认的是text/css

外部样式表

将样式写在单独的CSS文件中，然后在当前网页的head元素中的link元素引用

image.png

image.png

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>

<link rel="stylesheet" >元素的type属性值默认是text/css
在CSS文件中使用@charset指定文件编码，一般都是UTF-8

image.png

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

image.png

image.png

不建议使用@import 导入CSS文件，它的效率比link元素低

HTML和CSS的编写准则

在编写HTML和CSS代码过程汇总，要遵守一个准则
- 结构、样式分离
- 因此，不要使用HTML元素的属性来给元素添加样式，比如body的bgcolor、img的width \ height等
- 以下是不建议写法

<body>
    <img src="beer.png" alt="" width="300" height="400">
</body>

以下是建议的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: red;
        }
        
        img {
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="beer.png" alt="">
</body>
</html>

设置网页图标

link元素除了可以用来引入CSS文件，还可以设置网页的图标(href的值是图标链接)

   <link rel="icon" type="image/x-icon" href="http://www.jd.com/favicon.ico">

image.png

link元素的rel属性不能省略，用来指定文档与链接资源的关系
一般rel若确定，相应的type也会默认确定，所有可以省略type
网页图标支持的图片格式化是ico、png，常用大小是16x16、24x24、32x32(单位：像素)

常用CSS属性

按照CSS属性的具体用途，大致可以分类为
- 文本:color、direction、letter-spacing、word-spacing、line-height、text-align、text-transform、text-decoration、white-space
- 字体：font、font-family、font-style、font-size、font-variant、font-weight
- 背景：background、background-color、background-image、background-repeat、background-attachment、background-positioin
- 盒子模型: width、height、border、margin、padding
- 列表：list-style
- 表格：border-collapse
- 显示：display、visibility、overflow、opacity、filter
- 定位：vertical-align、 position、left、top、right、bottom、float、clear

最常用的CSS属性值

color：前景色(文字颜色)
background：背景色
width：宽度
height：高度
font-size：文字大小

background-color

background-color 决定背景色

color

color属性用来设置文本内容的前景色
- 包括文字、装饰线、边框、轮廓等的颜色

span元素

默认情况下，跟普通文件几乎没有差别
用与区分特殊文本和普通文本，比如用来显示一些关键字

image.png

div元素

一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分

CSS属性可用性

由于浏览器版本、CSS版本等问题，有些CSS属性是无法使用的
- 可以到https://caniuse.com/查询CSS属性的版本

颜色

颜色有几下几种表示方法
- 基本颜色关键字
  - red：红色、black：黑色、yellow：黄色等
  - 只提供了上百种基本颜色的关键字

span {
   background-color: red;
}

RBG颜色
- 十进制：rgb(red,green,blue)
- 十六进制：#rrggbb、#rgb


        span {
            /*    十进制*/
            background-color: rgb(255,0,0);
            /*    十六进制*/
            background-color: #ff0000;
            /* 或者*/
            background-color: #f00;
        }

RGBA颜色
- rgba(red,green,blue,alpha)
- alpha取值范围是0.0~1.0,表示透明度，数值越大越不透明
- background-color: rgba(255,0,0,5)

CSS属性-字体

font-size

font-size决定文字大小
常用设置
- 具体数字 + 单位
  - 比如100px
  - 也可以使用em单位：1em代表100%、2em代表200%、0.5em代表50%
百分比
- 基于父元素的font-size计算，比如50%表示等于父元素的font-size的一半
一般给body设置font-size就代表设置网页的默认字体大小
- 其他元素可以基于父元素设置字体大小
- 到时候只需要改变body的字体大小，其他元素都会按照比例改变

font-family

font-family用于设置文字的字体名称
可以设置1个或者多个字体名称(从左到右按顺序选择字体，直到找到可以用的字体为止)
- font-family: Consolas;
- font-family: "微软雅黑","Consolas","Symbol","Microsoft Sans Serif";
一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
- 所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面

       div {
            font-family: "Courier New","华文彩云";
        }

@font-face

@font-face可以让网页支持网络字体(Web Font),不在局限于系统自带字体
常见的字体种类
- TrueType字体：拓展名是 .ttf
- OpenType字体：拓展名是.ttf、otf，建立在TrueType字体之上
- Embedded OpenType 字体：扩展名是.eot,OpenType字体的压缩版
- SVG字体：扩展名是.svg、.svgz
- web开放字体：扩展名是.woff,建立在TrueType字体之上
并不是所有的浏览器都支持以上字体，使用时要多加测试
字体下载：http://font.chinaz.com/
font-face使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            /*字体名称：可以随便写，但建议最好跟原字体名字一致*/
            font-family: "微米简书体";
            src: url("fonts/微米简书.otf");
        }
        div {
            font-family: "微米简书体";
            font-size: 50px;
        }
    </style>
</head>
<body>
<div>hello!我是微米简书体</div>

</body>
</html>

image.png

font-weight

font-weight用于设置文字的粗细(重量)
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
- normal：等于400
- bold：等于700
strong、b、h1~h6等标签的font-weight默认就是bold

font-sytle

用于设置文字的常规、斜体显示
- normal：常规显示
- italic：用字体的斜体显示
- oblique：文本倾斜显示
- italic和oblique区别：
  - italic 字体本身带有倾斜属性，如果没有使用它没有用
  - oblique有些字体没有倾斜这个属性，这个时候就只能用他了。
em、i、cite、address、var、dfn这些元素的font-style默认就是italic

font-variant

可以影响小写字母的显示形式
可以设置的值如下：
- normal：常规显示
- samll-caps：将小写字母替换为缩写过的大写字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            font-size: 30px;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<span>123,GO!What's wrong?</span>

</body>
</html>

image.png

line-height

line-height用于设置文本的最小行高
行高可以先简单理解为一行文字所占的高度
行号的严格定义是：两行文字基线之间的距离
基线(baseline)：与小写字母x最底部对齐的线

image.png
可以设置的值如下
- 具体的单位：比如40px
- 百分比：比如200%，最终的行高值使用百分比乘以元素的字体大小
  - 如果是写百分比，继承下来的就是经过计算后的像素值
- noraml：常规显示，浏览器会基于元素字体调整一个合理值，范围在1.0~1.2
注意区分height和line-height的区别
height：元素的整体高度
line-height：元素中每一行文字所占据的高度

image.png

image.png
line-height设置的仅仅是最小行高，不能决定最终行高

font

是一个缩写属性
font-style、font-variant、font-weight、font-size/ling-height、font-family

div {
   font: italic small-caps 700 20px/40px "微软雅黑" ;
}

font-style、font-variant、font-weight可以随意调换顺序,也可以省略
/line-height可以省略,如果不省略，必须跟在font-size后面
font-size，font-family不可以调换顺序，不可以省略

CSS属性-文本

text-decoration

用于设置文字的装饰线
- none：无任何装饰线
- underline：下划线
- overline：上划线
- line-through：中划线(删除线)
u、ins元素默认就是设置了text-decoration为underline

letter-spacing word-spacing

分别用于设置字母、单词之间的间距
默认是0，可以设置为负数

text-transform

用于设置文字的大小转换
可以设置以下值
- capitalize: 将每个单词的首字符变为大写
- uppercase：将每个单词所有的字符变为大写
- lowercase：将每个单词的所有字符变为小写
- none：没有任何影响

text-indent

用于设置第一行内容的缩进
text-indnt：2em;刚好是缩进2个文字

image.png

text-align

可用于设置元素内容在元素中的水平对齐方式
常用的值
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐

CSS选择器

开发中经常需要找打特定的网页元素进行设置样式
什么是CSS选择器
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器的种类繁多，大概可以这么归类
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-class)
- 伪元素(pseudo-elements)

元素选择器(type selectors)

所有的div元素

div {
color: red;
}

<body>
<div>文字内容1</div>
<p>文字内容2</p>
<span>文字内容3</span>
<div>文字内容4</div>
</body>

image.png

或者叫做"标签选择器"

通用选择器

所有的元素

* {
color: red;
}

<body>
<div>文字内容1</div>
<p>文字内容2</p>
<span>文字内容3</span>
</body>

image.png

一般用来给我所有元素做一些通用性的设置
- 比如内边距、外边局
- 参考：http://www.jd.com
效率比较低，尽量不要使用

id选择器

id值为one的元素

#one {
  color: red;
}

<body>
<div id="two">文字内容1</div>
<p id="one">文字内容2</p>
<span id="three">文字内容3</span>
</body>

image.png

id注意点
- 一个HTML文档里面的id值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接,也可以使用驼峰标识。
- 最好不要用标签名作为id值

<span id="three">文字内容3</span>
<!--中划线隔开-->
 <div id="the-first-box"></div>
<!--下划线隔开-->
 <div id="the_second_box"></div>
<!--驼峰标识:第一个单词首字母小写，其他单词首字母大写-->
 <div id="theAThreadBox"></div>

中划线又叫连字符

类选择器

class值有one元素

       .one {
           color: red;
       }

<body>
<div class="two">文字内容1</div>
<p class="one">文字内容2</p>
<span class="two one">文字内容3</span>
<div class="one">文字内容4</div>
</body>

image.png

class注意点
- 一个元素可以有多个class值，每个class之间使用空格隔开
- class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识.
- 最好不要用标签名作为class的值

属性选择器(attribute slecotors)

拥有title属性的元素

[title] {
       color: red;
}

<body>
<div title="one">文字内容1</div>
<div>文字内容2</div>
<div>
    <p title="two">文字内容3</p>
</div>
<span title="">文字内容4</span>
</body>

image.png

属性选择器 - [att=val]

title 属性值恰好等于one的元素

  [title="one"] {
          color: red;
      }

<body>
<div title="one">文字内容1</div>
<div>文字内容2</div>
<div>
    <p title="one">文字内容3</p>
</div>
<span title="two">文字内容4</span>
</body>

image.png

属性控制器 - [attr~=val]

title属性值包含单词one的元素(单词one与其他单词之间必须用空格隔开)

[title~="one"] {
         color: red;
  }

<body>
<div title="testonetwo">文字内容1</div>
<div title="testone two">文字内容2</div>
<div title="test one two">文字内容3</div>
<div title="test one">文字内容4</div>
<div title="one two">文字内容5</div>
<div title="one-two">文字内容6</div>
<div title="one_two">文字内容7</div>
<div title="one">文字内容8</div>
<div title="two">文字内容9</div>
</body>

image.png

属性选择器 - [attr|=vale]
- title属性值恰好等于one或者以单词one开头且后面紧跟着连字符-元素
- 一般使用在lang属性上面
```
  [lang|="en"] {
            color: red;
        }
```

属性选择器 - [attr^=val]

title属性值以单词one开头的元素

 [lang^="one"] {
     color: red;
}

<body>
<div title="one">文字内容1</div>
<div title="one two">文字内容2</div>
<div title="onetwo">文字内容3</div>
<div title="one-two">文字内容4</div>
<div title="one_two">文字内容5</div>
</body>

-属性选择器 - [attr$=val]

title属性值以单词one结尾的元素

   [title$="one"] {
          color: red;
      }

  <body>
<div title="one">文字内容1</div>
<div title="twoone">文字内容2</div>
<div title="two one">文字内容3</div>
<div title="two-one">文字内容4</div>
<div title="two_one">文字内容5</div>
</body>

属性选择器 - [attr*=val]

title属性值包含单词one的元素

[title*="one"] {
        color: red;
}

<body>
<div title="one">文字内容1</div>
<div title="twoone">文字内容2</div>
<div title="two one">文字内容3</div>
<div title="two-one">文字内容4</div>
<div title="two_one">文字内容5</div>
<div title="two呵呵one">文字内容6</div>
</body>

组合

后代选择器(descendant combinator)

div元素里面的span元素(包括直接、间接子元素)

div span {
    color: red;
}

<body>
<span>文字内容1</span>
<div>
    <span>文字内容2</span>
    <p>
        <span>文字内容3</span>
    </p>
</div>
<div>
    <span>文字内容4</span>
</div>
<span>文字内容5</span>
</body>

image.png

子选择器(child combinators)

div元素里面的直接span子元素(不包括间接子元素)

div>span {
    color: red;
}

<body>
<span>文字内容1</span>
<div>
    <span>文字内容2</span>
    <p>
        <span>文字内容3</span>
    </p>
</div>
<div>
    <span>文字内容4</span>
</div>
<span>文字内容5</span>
</body>

image.png

相邻兄弟选择器

div元素后面紧挨着的p元素

div+p {
    color: red;
}

</head>
<body>
<p>文字内容1</p>
<div>
    <p>文字内容3</p>
</div>
<p>文字内容3</p>
<p>文字内容4</p>
</body>

image.png

全体兄弟选择器

div元素后面的p元素(且div、p元素必须是兄弟关系)

div~p {
    color: red;
}

<body>
<p>文字内容1</p>
<div>
    <p>文字内容3</p>
</div>
<p>文字内容3</p>
<p>文字内容4</p>
</body>

image.png

选择器组- 并集选择器

所有的div元素+所有class值有one的元素+所有title属性值等于test元素

div,.one,[title="test"] {
    color: red;
}

<body>
<div>文字内容1</div>
<span title="test">文字内容2</span>
<p class="one">文字内容3</p>
</body>

选择器组-交集选择器

同时符合2个条件的元素：div元素、class的值有one

div.one {
    color: red;
}

<div class="one">文字内容1</div>
<span class="one">文字内容2</span>
<p class="one">文字内容3</p>

image.png

伪类

常见的伪类有
动态伪类(dynamic pseudo-classes)
- :link、:visited、:hover、:active、:focus
目标伪类(target pseudo-classes)
- :target
语言伪类(language pseudo-classes)
- :lang()
元素状态伪类(UI element states pseudo-classes)
- :enabled、:disabled、:checked
结构伪类(structural pseudo-classes)
- :nth-child()、:nth-lase-child()、:nth-of-type、:nth-last-of-type()
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
否定伪类(negation pseudo-classes)
- :not()

动态伪类

使用举例
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上
- a:active 激活链接(鼠标在链接上长按住未松开)
使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所有建议编写顺序是:link、:visited、:hover、:active
记忆：女朋友看到LV包包后.ha ha大笑
除了a元素,:hover、:active也能用在其他元素上

动态伪类-：focus

:focus指当前拥有输入焦点的元素(能接收键盘的输入)
- 本文输入框一聚焦后，背景就会变红色
```
 input:focus {
   background-color: red;
 }
```
- 因为链接a元素可以被键盘Tab键选中聚焦,所有:focus也适用于a元素
```
input:focus {
  color: red;
}
a:focus {
    color: red;
}
```
动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、active
- 记忆：女朋友看到LV包包后，Feng疯一样地ha ha大小
去除a元素默认的:focus效果

a:focus {
    outline: none;
}

或者将tabindex属性设置为-1

tabindex属性

使用tabindex可以控制tab键选中元素的顺序，从1开始
tabindex设置为-1,代表禁止使用tab键选中
细节
- 直接给a元素设置样式，相当于给a元素所有的动态伪类都设置了
```
a {
   color: red;
}
```
- 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

目标伪类(target pseudo-classes)

当元素被锚点链接当作目标跳转之后起作用

p:target {
    color: red;
}

<p id="ppp"></p>
<a href="#ppp"></a>

image.png

语言伪类(language pseudo-classes)

语言是en系列(英语)的所有div元素

div:lang(en) {
    color: red;
}

<body lang="en">
<div>文字内容1</div>
<div lang="en">文字内容2</div>
<div lang="zh">文字内容3</div>
<div lang="en-us">文字内容4</div>
</body>

image.png

元素状态伪类(UI element states pseudo-classes)

:enable启动状态
:disabled禁止状态
:checked被选中状态


input:enabled {
    border: 2px solid red;
}
input:disabled {
    border: 2px solid black;
}

input:checked {
    outline: 2px solid blue;
}

结构伪类

:nth-child(1)

是父元素中的第一个子元素

image.png

:nth-child(2n)

n代表任意正整数和0
是父元素中的第偶数个子元素
跟:nth-child(even)同义

:nth-child(2n+1)

父元素中第奇数个子元素
跟:nth-child(odd)同义

:nth-child()的完整使用格式是:nth-child(an+b)

是父元素中的第an+b个子元素
a 、b需要给出具体的值，可以是正整数、也可以是负整数，0
n代表任意正整数和0

:nth-last-child()从最后一个子元素开始往前计数，

:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2),代表最后两个子元素
练习:表示第2个~倒数第2个元素(去除头和尾元素)

p:nth-child(n + 2):nth-last-child(n+2) {
    color: red;
}

<body>
<div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
</div>
</body>

image.png

:nth-of-type()、:nth-last-of-type()

:nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类元素，就是只计数兄弟类

其他 :first-child、:last-child、:first-of-type、:last-of-type、:only-child、only-of-type、root:

first-child 等同于:nth-child(1)
:last-child 等同于:nth-last-child(1)
:first-of-type 等同于:nth-of-type(1)
:last-of-type 等同于:nth-last-of-type(1)
:ony-child 是父元素中唯一的子元素。
- 等同于 :first-child:last-child或者:nth-child(1):nth-last-child(1)
:only-of-type 是父元素中唯一的这种元素的子类
- 等同于:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)

:empty

:empty代表里面完全空白元素

p:empty {
    width: 200px;
    height: 20px;
    background: red;
}

<body lang="en">
<p></p>
<p>文字内容1</p>
<p> </p>
<p><span></span></p>
<p>文字内容2</p>
</body>

image.png

否定伪类(negation pseudo-class)

:not()的格式是:not(x)
- x是一个简单的选择器
- 可以是元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(出否定伪类)

/*除了第一个同级子类p元素和最后一个同级子类p元素以外的所有p元素*/
p:not(:first-of-type):not(:last-of-type) {
    color: red;
}

<body>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</body>

image.png

:not(x)表示除x以外的元素

/*除了p元素、body元素、html元素以外的所有元素都为红色*/
:not(p):not(body):not(html) {
    color: red;
}

<body>
<p>文字内容1</p>
<span>文字内容2</span>
<div>文字内容3</div>
<p>文字内容4</p>
</body>

image.png

伪元素(pseudo-elements)

常用的伪元素有
- :first-line等价写法::first-line
- :first-letter等价写法::first-letter
- :before等价写法::before
- :after等价写法::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

::first-line

可以针对首行文本设置属性

div::first-line {
    color: blue;
    text-decoration: underline;
}

image.png

只有一下属性可以可以应用在::first-line伪元素
- 字体属性、颜色属性、背景属性
- word-spacing、letter-spacing、text-decoration、text-transform、line-height

::first-letter

::first-letter可以针对首个字符设置属性

div::first-letter {
    color: blue;
    text-decoration: underline;
    font-size: 30px;
}

image.png

只有下列属性可以应用在::first-letter伪元素
- 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
- text-decoration、text-transform、letter-spacing、word-spacing、line-height、float、vertical-align(只有当float是none时)

::before和::after

用来在一个元素的内容之前或者之后插入其他内容(可以是文字图片)

div {
    color: red;
}
div::before {
    /*在div前面插入的内容"before"*/
    content: "before";
    font-size: 40px;

}
div::after {
    /*在div后面输入一张图片*/
    content: url("https://www.jd.com/favicon.ico");
}

<body>
<div>这是京东icon</div>
</body>

image.png

attr()

在content中，还可以使用attr属性名来获取元素的属性值

/*a[href^="http"]细节
a[href]表示元素里面必须href元素
href^="http" 表示href必须以http开头
*/
a[href^="http"]::after {
    content: "[" attr(href) "]";
}

<body>
<a href="http://www.jd.com">京东</a> <br>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.taobao.com">淘宝</a><br>
<a href="http://www.520it.com">小码哥</a>
</body>

image.png

特性

属性继承

CSS中有些属性是可以继承的，何为元素属性继承？
- 一个元素如果没有设置某属性值，就会跟随父元素的值
- 当然，一个元素如果有设置某属性的值，就使用自己设置的值
比如color 、font-size等属性都可以继承的
不能继承的属性，一般可以使用inherit值强制继承
CSS属性继承的是计算值，并不是当初编写属性时的指定的值(字面值)

    <style>
        .div1 {
            font-size: 30px;
        }
        .div2 {
            font-size: 50%;
        }
        .div3  {
            /*inherit强制继承，继承的是30px * 50% = 15px,这里15px是计算值*/
            /*div3 的font-size 为15px*/
            font-size: inherit;
        }
    </style>

<body>
<div class="div1">div1
    <div class="div2">div2
        <div class="div3">div3</div>
    </div>
</div>
</body>

属性层叠

CSS允许多个相同名字的CSS属性层叠在同一个元素上
- 层叠后的结果是：只有一个CSS属性会生效

    <style>
        #box {
            color: red;
        }
        .word {
             color: green;
         }

        div {
            color:blue;
        }
    </style>

<div class="word" id="box">div1

image.png

使用经验

为何有时候编写的CSS属性不好使，有可能是因为
- 选择器的优先级太低
- 选择器没选中对应的元素
- CSS属性样式不对
  - 元素不支持此CSS属性，比如span默认是不支持width和height的
  - 浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
  - 被同类型的CSS属性覆盖，比如font覆盖font-size
建议
- 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错

元素类型

块级、行内级元素

根据元素的显示类型、HTML元素可以主要分为2大类
- 块级元素
  - 独占一行
  - 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、artcle、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
- 行内级元素
  - 多个行内级元素可以在父元素的同一行中显示
  - 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio等

替换、非替换元素

根据元素的内容类型，HTML元素可以主要分为2大类
- 替换元素
  - 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
  - 比如img、input、video、embed、canvas、audio、object等
- 非替换元素
  - 和替换元素相反，元素本身是有实际内容的，浏览会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底是什么内容
  - 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、div、nav、section、blockquote、hr、a、strong、span、code、label等

元素的分类总结

image.png

display

CSS中有个display属性，能修改元素的显示类,有4个常用的值
block：让元素显示为块级元素
inline：让元素显示为行内级元素
none：隐藏元素
inline-block：让元素同时具备行内级、块级元素的特征
display的以下取值，等同于某些HMTL元素
- table：<table>，一个block-level表格
- inline-table：<table>，一个inline-level表格
- table-row：<tr>
- table-row-group：<tbody>
- table-header-group：<thead>
- table-footer-group：<tfoot>
- table-cell：<td>、<th>，一个单元格
- table-caption：<caption>，表格标题
- list-item：<li>

inline-block

可以让元素同时具备块级、行内级元素的特征
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 宽高默认有内容决定
可以理解为
- 对外来说，它是一个行内级元素
- 对内来说，它是一个块级元素
常见用途
- 让行内级非替换元素(比如a、span等)能够随时设置宽高
- 让块级元素(比如div、p等)能够跟其他元素在同一行显示

visibility

visibility，能控制元素的可见性，有2个常用值
- visible：显示元素
- hidden：隐藏元素
visibility:hidden;和display:none;区别
- visibility:hidden
  - 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
- display:none
  - 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

overflow

overflow用于控制内容溢出时的行为
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scoll：溢出的内容被裁剪，但可以通过滚动机制查看
  - 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
- auto：自动根绝内容是否溢出来决定是否提供滚动机制
- 还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向(建议还是直接使用overflow，因为目前overflow-x，overflow-y还没有成为标准，浏览器不支持)

元素之间的空格

行内级元素：包括(inline-block元素)的代码之间如果有空格，会被解析显示为空格

<span>span1</span> <span>span2</span>
<span>span3</span>

image.png

目前建议解决的方法
- 1.元素代码之间不要留空格
- 2.注释掉空格
```
<span>span1</span><span>span2</span>
```
- 3.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size
  - 此方法在safari不适用
- 4.给元素加float

注意点

块级元素、line-block元素
- 一般情况下，可以包含任何其他元素(比如块级元素、行内级元素、inline-block元素)
- 特殊情况，p元素不能包含其他块级元素
行内级元素
- 一般情况下，只能包含行内级元素

盒子模型

盒子

HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性
- 内容(content)
  - 盒子里面装的东西
- 内边距(padding)
  - 怕盒子里面装的东西损坏而添加的泡沫或者其他抗震的辅料
- 边框(border)
  - 就是盒子的边框，比如木盒子四周的目标
- 外边距(margin)
  - 为了方便取出，盒子之间保留一定的空隙
    
    image.png
默认的盒子模型如下图所示

image.png
浏览器开发者工具中看到的盒子模型

image.png

一个元素实际占用的宽度= border-left + padding-left + width + padding-right + border-right
一个元素实际占用的高度= border-top + padding-top + height + padding-bottom + border-bottom
一个元素的空间宽度= margin-left + border-left + padding-left + width + padding-right + border-right + margint-right
一个元素空间的高度= margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

宽度、高度相关

width：宽度
- min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width：最大宽度,无论内容多少，宽度都小于或等于max-width
hegith：高度
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height

内边距相关

padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
padding：是paddng-top、padding-right、padding-bottom、padding-left的简写属性。
- 注意：这个简写属性是有顺序的按照顺时针旋转依次为：上、右、下、左。如果缺少left，那么left就是用rightd的值、如果缺少bottom，那么bottom就是用top的值

外边距相关属性

margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距
margin：是margin-top、margin-right、margin-bottom、margin-left的简写水属性。和padding的规律一样。都是顺时针旋转。

上下margin传递

margin-top传递

如果块级元素的顶部线和块级父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

<div style="width: 100px;height: 100px;background: green">
    <div style="width: 100px;height: 100px;background: red;margin-top: 10px">aa</div>
</div>

margin-bottom传递
如果块级元素的底部线和块级父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom的值会传递给父元素

<div style="width: 100px;height: 100px;background: green;height: auto">
    <div style="width: 100px;height: 100px;background: red;margin-bottom: 10px">aa</div>
</div>
<div style="background: cyan">aa</div>

水平方向的margin是永远不会发生传递现象
如何防止传递问题？
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 给父元素或者子元素设置display:inline-block
建议
- margin一般使用设置兄弟元素之间的间距
- padding一般用来设置父子元素之间的间距

上下margin折叠

垂直方向上相邻的2个margin(margin-top、margin-bttom)有可能合并为一个margin，这种现象叫做collaps(折叠)
水平方向上的margin(margin-left、margin-right)永远不会collapse
折叠后的最终值的计算规则
- 如果都是正数，最终值是：绝对值最大的那个正数值
- 如果都是负数，最终值是：绝对值最大的那个负数值
- 如果正数、负数都有，最终值是：最大的正数和最小的负数相加
如何防止margin collapse
- 只设置其中一个元素的margin
- 条件允许的话，使用padding取代margin
两个兄弟块级元素之间上下margin折叠

image.png
父子块级元素之间的margin折叠

image.png
无内容块级元素的margin的折叠

image.png
无内容块级元素的margin的折叠(折叠可以是连续的)

image.png
块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处
- 比如连续段落之间的margin，恰好需要这种折叠效果
  
  image.png

边框(border)相关属性

边框宽度
- border-top-width、border-right-width、border-bottom-width、border-left-width
- border-width是上面4个属性的简写属性
边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
- border-color是上面4个属性的简写属性
边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性

边框样式的取值

none:没有边框，边框颜色，边框的宽度会被忽略
hidden：与"none"类似，多用在表格上，用于解决边框冲突
dotted：边框是一些列的点
dashed：边框是一条虚线
solid：边框是一条实线
double：边框有两条实线。两条线宽度和其中的空白的宽度之和等于border-width的值
groove：边框看上去好像是雕刻在画布中吐出来的
inset：该边框使整个框看上去好像是嵌在画布中
outset：和inset相反，该边框使整个框看上去好像是凸出来

image.png

边框相关的属性

border-top、border-right、border-bottom、border-left

            border-top: 2px #0f0 dotted;
            border-right: 2px solid #f00;
            border-bottom: 2px dashed #0ff;
            border-left: 2px solid #ff0;

image.png

边框颜色、宽度、样式的编写顺序任意
border：统一设置4个方向的边框

border: 2px solid #f00;

边框的形状

边框的形状可能是
- 矩形、梯形、三角形等形状
  
  image.png

边框妙用- 实现三角形

image.png

transparent 透明
transform：旋转

边框妙用-实现双色平分

        div {
            background: #DDD;
            width: 100px;
            height: 50px;
            border-bottom: 50px solid #111;
        }

image.png

行内级费替换元素的注意点

以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
以下属性对行内级非替换元素效果比较特殊
- padding-top、padding-bottom、border-top、border-bottom

border---radius

圆角半径相关的属性有
virder-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius
border-top-left-radius: 40px 20px;
border---radius定义的是四分之一椭圆的半径
- 第一个是水平半径
- 第二个是垂直半径(如果不设置，就跟随水平半径的值)
border-top-left-radius: 50%
还可以设置百分比
- 参考的是border-box的宽度和高度(也就是元素的实际占用尺寸，border+padding+width\height)
border-top-left-radius:55px 25px

image.png

border-radius

border-radius是一个缩写属性
bordeer-radius:10px 20px 30px 40px/15px 25px 35px 45px
斜线/前面是水平半径，后面是垂直半径
4个值的顺序是top-left、top-right、bottom-right、bottom-left(顺时针方向)
- 如果bottom-left没设置，就跟随top-right
- 如果bottom-right没设置，就跟随top-left
- 如果top-right没设置，就跟随top-left
border-radius大于或等于50%时，就会变成一个圆

        div {
            width: 90px;
            height: 90px;
            border: 30px solid #000;
            background-color: #f00;
            border-radius: 50%;
        }

image.png

outline

outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外面
- 每个部位都是完整连接的，不会像border那样有可能断开(比如行内级非替换元素的换行)
outline相关属性有
- outline-width
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color
- outline:outline-width、outline-style、outline-color的简写属性，跟border用法类似
- outline-offset：设置outline和border之间的间距
应用实例
- 去除a元素、input元素的focus轮廓效果

box-shadow

box-shadow属性可以设置一个或多个阴影
- 每个阴影用<shadow>表示
- 多个阴影之间用逗号隔开，从前到后叠加
- <shadow>的常见格式如下
  - <shadow> = inset? && <length>{2,4} &&<color>?
  - 第一个<length>：水平方向的偏移，正数往右偏移
  - 第二个<length>：垂直方向的偏移，正数往下偏移
  - 第三个<length>：模糊半径
  - 第四个<length>：延伸距离
  - <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
  - inset：外框阴影变成内框阴影

box-shadow示例1

            width: 100px; height: 100px;
            border: 12px solid blue; background-color: orange;
            border-top-left-radius: 60px 90px;
            border-bottom-right-radius: 60px 90px;
            box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset,
            12px 12px 0px 8px rgba(0,0,0,0.4) ;

image.png

box-shadow示例2

image.png

text-shadow

text-show用于类似于box-shadow，用于给文字添加阴影效果
text-show同样适用于::first-line、::first-letter

box-sizing

box-sizing用来设置盒子模型中的宽高行为
content-box
- padding、borde都布置在width、height外边
border-box
padding、border布置在width、height里边

content-box

image.png

元素的实际宽度 = border + padding + width
元素的实际高度 = border + padding + height

border-box

image.png

元素的实际占用宽度= width
元素的实际占用高度 = height

盒子模型

image.png

元素的水平居中显示

在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
行内级元素、inline-block元素
- 水平居中：在父元素中设置text-align:center
块级元素
水平居中：给自己设置margin-left:auto、margin-right:auto

背景

background-image

background-image用于设置元素的背景图片
- 会盖在background-color的上面
- 在图片的透明区域，可以看到背景色
如果设置了多张图片
background-image: url("bg001.png"),url("bg002.png"),url("bg003.png");
- 设置的第一张图片将会在最上面，其他图片按顺序层叠在下面
注意：如果设置了背景图后，元素没有具体的宽高，背景图片是不会显示出来的

background-repeat

background-repeat用于设置背景图片是否需要平铺
常见的设置右
- repeat：平铺
- no-repeat：不平铺
- repeat-x：只有在水平放心上平铺
- repeat-y：只有在垂直方向上平铺

background-size

background-size用于设置大小

            /*宽度150，高度180*/
            background-size: 150px 180px;
            /* 宽度保持原来的宽高比自动计算。高度180*/
            background-size: auto 180px;
            /* 宽度150，高度保持原来的宽高比自动计算*/
            background-size: 150px auto;
            background-size: 150px;

background-position

用于设置背景图片水平、垂直方向上的具体位置

image.png
水平方向上还可以设置：left、center、right
垂直方向上还可以设置：top、center、bottom
如果只设置了1个方向，另一个方向默认是center
比如background-position:80px;等价于background-position:80px center;

Sprite

什么是CSS Sprint
- 是一种CSS图像合成技术，将各种小图片合并到一张图上，然后利用CSS的背景定位来显示对应的图片部分
- 有人翻译为：CSS雪碧、CSS精灵
使用CSS Sprint的好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
- 更换风格方便简单，只需要在少数张图片上修改图片的颜色和样式，整个网页的风格就可以改变
Sprite图片制作
- 方法1：Photoshop
- 方法2：https://www.toptal.com/developers/css/sprite-generator

background-attachment

可以设置以下3个值
- scroll：背景图片跟随元素一起滚动(默认值)
- local：背景图片跟随元素以及元素内容一起滚动
- fixed：背景图片相当于浏览器窗口固定

background

是一系列背景相关属性的简称，常用格式是
- image position/size repeat attachment color
- background-size可以省略不写，如果不省略，/background-size必须紧跟在background-position的后面
- 其他属性也都可以省略。而且顺序任意
  background: url("image/beer.png" ) center center/150px 250px no-repeat #f00;
Sprite编写建议


        /*先将所有的image加载出来*/
        .div1,.div2,.div3 {
            background: url("images/mhxy.jpg");
        }
        /*在分别设置对应点的位置*/
        .div1 {
            background-position: -10px -30px;
        }
        .div2 {
            background-position: -60px -50px;
        }
        .div3 {
            background-position: -110px -75px;
        }

background-image和img的选择

利用background-image和img都能够实现显示图片的需求，在开发中如何选择？

image.png
总结
- img，作为网页内容的重要组成部分，比如广告图、LOGO图片、文章配图、产品图片
- background-image，可有可无。有，能让网页更美观。无，也不影响用户获取完整网页内容信息
- 宗旨
  - 在没有任何CSS样式的情况下，用户也能浏览到网页中完整的内容信息。(PS：网络出现问题或服务器出现问题是，有可能会导致CSS文件加载失败)

文档画布背景

没有HTML元素对应着文档画布，如何设置文档画布的背景
- html或者body元素的背景都能够延伸到整个文档画布
- 如果同时设置了html和body元素的背景，根元素html的背景才会作为文档的画布背景
- 建议通过body元素来设置文档画布背景

伪元素::first-line的背景

::first-line虽然意为第一行内容，但它的背景并不一定填满一行，取决于各种因素
文字大小、容器宽度、文字对齐方式

        div::first-line {
            background-color: blue;
        }

image.png

background实现图片链接

使用background也可以实现图片链接

        a {
            background: url("bg001.png") no-repeat;
            width: 70px;
            height: 70px;
            display: inline-block;
        }
<a href="https://www.baidu.com"></a>

cursor

cursor属性有auto、default、pointer、text、none

image.png
cursor除了可以设置系统自带的一些值以外，还可以设置图片
cursor: url("text/russel.png" 0 0,pointer);
- url()后面的2个数字
  - 分别代表图片在水平、垂直方向上的偏移，不能设置负数
  - 0和0代表图片左上角和指针是重叠的，数值变大，图片左上角会朝着左上角方向偏移
  - 如果水平、垂直分别设置图片宽度的一半，图片的中心点将和指针重叠
如果图片找不到，就会使用pointer作为cursor的值

定位

标准流

默认情况下，元素都是按照normal flow(标准流、常规流、正常流、文档流(document flow))进行定位
- 从上到下、从左到右顺序摆放好
- 默认情况下，互相之间不存在层叠现象
  
  image.png

margin、padding定位

在标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
比较明显的缺点是
- 设置一个元素的margin或者padding，通常会影响到标准流中的其他元素
- 不便于实现元素的层叠效果

position

利用position可以对元素进行定位，常用取值有4个
- static：静态定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位

relative 相对定位

元素按照normal flow布局、
可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示