CSS基础

简介

• 层叠样式表 Cascading Style Sheets
• css可用来为网页创建样式表, 通过样式表可以对网页进行装饰,所谓层叠, 可以将整个网页想象成是一层一层的结构, 层次高的覆盖层次低的,css就可以分别为网页的各个层次设置样式
• CSS不是编程语言，不是标记语言，是一种样式表语言。只是一种计算机语言。

CSS官方文档： https://www.w3.org/TR/?tag=css

CSS推荐文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95

查询CSS属性的可用性:https://caniuse.com/

历史

早期网页都是用HTML编写的，但我们希望HTML页面可以变得更加丰富，这个时候就有了具备特殊样式的元素，比如i、strong

• 1994 哈肯·维姆莱和伯特·波斯合作了CSS，1996发布了CSS1
• 1997，W3C成立CSS工作组
• 1998发布了CSS2
• 2006-2009非常流行div+css布局
• 从CSS3开始，所有的CSS被分成了不同的模块，每一个模块都有CSS2中额外增加的功能
• 可以说，没有真正的CSS3，因为CSS3之后全都模块化了，每一个模块单独发展。
• 第一个CSS模块从2011年发布的。

作用：美化HTML

结构和样式分离

• 方式1：添加样式，比如颜色、字体、大小、下划线
• 方式2：布局，比如flex和grid

基础知识

像素 px

长度单位 像素px

是在网页中使用最多的一个单位 相当于屏幕中的一个小点 我们的屏幕就是由这些点构成的

不同的显示器, 一个像素的大小也不同, 显示效果越好, 越清晰, 像素就越小, 反之像素就越大

百分比%

也可以将单位设置为百分比的形式, 这样浏览器会根据其父元素的样式来计算该值

好处 : 当父元素的属性值变化的时候, 子元素也会按照比例发生改变

在我们创建一个自适应页面的时候, 经常使用百分比作为单位

em

和百分比类似, 是相对于当前元素字体大小来计算的

1 em = 1 font-size

使用em的时候, 当字体大小发生改变的时候, em也会随之改变

设置字体相关的样式的时候经常会使用em

颜色

可以直接使用颜色的单词来表示不同的颜色

可以用RGB值

• 通过red, blue, green设置, 通过这三种颜色不同的浓度表示不同的颜色
• 方式 : rgb(red值, green值, blue值)
• 数值
  • 可以为 0 – 255 之间的数字
  • 可以用 00 – FF 之间的16进制数字, 两位重复的颜色可以用简写, 如 aabbcc 可以表示为 #abc
  • 可以用 0% ~ 100% 之间的百分数

编写位置

标签中（内联样式）

• 可以将CSS样式写到元素的style属性当中, 叫做内联样式, 只对当前元素的内容起作用, 这样的复用性不太好, 不推荐使用
• 内联样式属于结构与表现耦合, 在实际开发中不推荐使用
• 也是名-值对结构

1
2

<p style="color: red; font-size: 50px;">WARNING</p>
<!-- 字体颜色; 字体大小 -->

::: tip

在原生的HTML中不推荐使用，但是，在Vue的template中某些动态的样式会使用内联样式的

:::

head中（内部样式表）

• 也可以将CSS样式便写道head中的style标签中
• 将样式表编写到style标签中吗这样可以将样式进一步复用
• 也可以使表现和结构进一步分离
• 是我们推荐的使用方式
• 缺陷 : 但是这种方式只能在同一个页面中复用, 不能在不同页面复用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!doctype html>
<html>
    <head>
        <title>CSS</title>
        <meta charset="UTF-8" />
        <style type="text/css">
	<!-- 中间的type是默认值, 写上是因为有的浏览器不兼容会出问题-->
            p{
            color: red;
            font-size: 50px;
            }
<!-- p表示对下面的所有p标签内容有效,大括号内是对这些东西的设置 -->
        </style>
    </head>
    <body>
        <p>窗前明月光, 疑似地上霜</p>
    </body>
</html>

::: tip
在vue的开发过程中，每一个组件也有一个style元素，和内部样式非常相似，但是原理并不相同
:::

外部CSS文件中

• 开发中最推荐使用
• 还可以将样式表编辑道外部的CSS文件中, 然后用link标签将外部的CSS文件引入到当前页面中
• 完全使得结构和表现分离, 可以使样式表在不同的页面中使用, 最大限度地使样式可以进行复用
• 使用link自结束标签引入, 可以利用浏览器的缓存, 加快用户访问的速度, 提高了用户的体验
• rel=”stylesheet” type=”text/css”是默认值, 记住就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!--myStyle.css-->
p{
    color: royalblue;
    font-size: 30px;
}

<!-- test.html -->
<!doctype html>
<html>
    <head>
        <title>CSS</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="myStyle.css"/>
    </head>
    <body>
        <p>窗前明月光, 疑似地上霜</p>
    </body>
</html>

补充：

可以在index.css中引入其他所有的css文件

1
2
3
4

@import url(./style.css);

@import url(./position.css);

link元素是外部资源链接的元素，规定了文档与外部资源你的关系，通常位于head中

常见的 属性：

• href：指向被链接的资源的URL，这个URL可以是绝对的，也可以是相对的

• rel：指定链接的类型，常见的类型：

  • icon：站点图标
  • stylesheet CSS样式

其他常见的类型：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types

CSS语法

• 在style标签中间就不是HTML代码了, 所以用HTML代码的注释就失效了
• 在CSS代码或者文件中应该用 /* */ 表示注释
  CSS语法 : 选择器和声明块
  选择器 :
• 通过选择器可以选中页面中指定的元素, 并且将声明块中的样式应用到选择器对应的元素上

声明块 :

• 紧跟在选择器的后面, 用{}括起来
• 实际上是一组名值对结构, 中间用 : 链接
• 名值对叫做声明
• 一个声明块中可以写多个声明, 多个声明之间用 ; 隔开

::: tip
疑问：注释写多了会不会造成文件css文件过大，从而导致用户方面的加载速度过慢？

不会，因为我们实际开发的时候会使用打包和构建工具，他们会优化我们的代码，因此我们在项目中可以随心所欲地写注释。
:::

内联（行内）和块元素

这两个元素在HTML5已经没有了

div :

• 块元素, 独占一行的元素，无论内容有多少都会独占一整行
• p, h1, h2 等也是块元素, 都会独占一行
• 没有任何语义(表示一块区域), 就是一个纯粹的块元素, 并且不会为其中的元素设置任何默认样式
• 主要对页面进行布局(分区)

span :

• 内联元素(行内元素)
• 有几个字就占多少地方
• 后面可以跟着其他元素
• 一行容不下的时候会自动换行
• a, img, iframe, span 都是内联元素
• 没有任何语义
• 用来选中自由的文字, 然后为文字设置样式

注意 :

• 一般情况下使用块元素包含内联元素 , 而不是用内联元素包含块元素
• a元素可以包含除了他本身的任何元素
• p不可包含其他任何块元素

盒子模型

一个盒子我们会分成几部分, 盒子的大小由以下这些加起来决定

• 内容区(content) 盒子的内容，显示文本 图像
• 内边距(padding) 内容和边框之间的区域，是透明的
• 边框(border) 元素的边框
• 外边距(margin) 外边距是透明的

边框

• width 内容区宽度
• height 内容区高度
• background-color 内容区背景颜色

要为一个元素设置边框, 必须设置三个样式

• border-width 宽度
  • 可以分别指定四个边框的宽度, 空格之间用空格隔开, 分别表示 上左下右 的边框(顺时针)
  • 如果设置 3 个值, 则分别设置给 上 左右 下
  • 两个值的话, 就分别设置为 上下 左右
  • 如果指定一个值, 则四个边都是这个值
  • 注意 : 这个规则不仅适用于边框, 还适用于下面的边框颜色, 样式等
• border-color 颜色
• border-style 边框样式
  • 可选值 : solid 实线
  • dotted 点状
  • dashed 虚线
  • double 双线
  • …更多的参见W3C手册

盒子的可见框的大小由内容区, 内边框, 外边距加起来决定

除了border-width, CSS还提供了四个border-xxx-width, xxx可以使top, left, right, bottom, 可以分别设置指定边的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    <style>
        .box1{
            /*宽和高*/
            width: 100px;
            height: 100px;

            /*设置背景颜色*/
            background-color: blue;

            /*边框*/
            border-width: 20px 10px 20px 10px;
            border-color: red orange;
            border-style: solid double; /*实线*/
        }
    </style>
...
    <body>
        <div class="box1"> </div>
    </body>

大部分浏览器, 边框宽度和颜色都是有默认值的, 而边框的样式默认值为none

边框简写样式 border

• 通过他可以直接设置四个边框的样式, 宽度, 颜色 而且没有任何的顺序要求
• 但是一指定就是四个边, 四个边不能分别制定
• 但是可以通过 border-top, border-left, border-bottom, border-left 分别对四个边的属性进行指定, 规则同 border

内边距

指的是盒子的内容区与盒子边框之间的距离

一共有四个方向的内边距, 可以通过

• padding-top
• padding-left
• padding-right
• padding-bottom
  来设置四个方向的内边距值

内边距会影响盒子的可见框的大小, 元素的背景会延伸到内边距

使用padding可以同时设置四个边框的样式, 规则和border-width一致

外边距

指的是当前盒子与其他盒子的距离

盒子有四个方向的外边距

• margin-top
• margin-right
• margin-bottom
• margin-left

这个值可以理解为是一个最小值

由于页面中的元素都是靠左靠上拜访的时候, 当我们设置上和左外边距的时候, 会导致盒子的位置发生改变, 如果是设置下和右边距的大小的时候, 会导致其他盒子的位置发生改变, 也就是”挤走”

外边距也可以指定为一个负值, 即向反方向移动

margin还可以设置为auto, aoto一般只设置给水平方向的margin

• 如果只指定, 左外边距或者有外边距的margin为auto, 则会将外边距设置为最大值
• 垂直方向如果设置为auto, 则默认就是 0
• 如果left和right同时设置为auto, 则会将两侧的外边距设置为相同的值
• 就可以使元素自动在父元素中居中, 所以我们经常将左右外边距设置为auto, 以使子元素在父元素中居中

外边距也可以使用简写属性margin, 具体方法和内边距一样

垂直外边距的重叠

• 在网页中, 垂直方向相邻外边距会发生外边距的重叠
• 即 兄弟元素之间的相邻外边距会区最大值而不是取和
• 如果父子元素的垂直外边距相邻了, 则子元素的外边距会设置传递给父元素
  • 解决方法:
  • 给父元素设置内边距或者给子元素设置外边距让他俩不相邻
  • 使用空的table标签可以隔离父子元素的外边距, 阻止外边距重叠
• 最终方案:
  • display可以将一个元素设置为表格显示
  • 具体方法见”解决高度塌陷的最终方案”

浏览器为了 在页面中没有样式的时候也有一个比较好的显示效果, 默认设置了一些margin和padding, 而这些默认样式正常情况下我们是不需要使用的, 所以在我们编写样式之前需要将浏览器中的默认margin和padding去掉

1
2
3
4
5
6

<!-- 清除浏览器默认样式 -->
*{
    margin:0;
    padding:0;
}

内联元素的盒子

内联元素不能设置width和height

可以设置水平内边距, 可以影响页面布局

可以设置垂直内边距, 但是不会影响页面的布局

可以设置边框, 水平边框影响布局, 垂直的不影响

支持水平方向外边距, 不会重叠

支持垂直方向外边距, 会重叠

_display&visiability&overflow

通过display样式可以修改元素的类型

• inline 可以将一个元素作为内联元素显示
• block 可以将一个元素作为块元素显示
• inline-block 将以一个元素转换为行内块元素
  • 既可以设置宽高, 又不独占一行
• none 不显示元素并且元素不会在页面中继续占用位置
  • 使用该方式隐藏的元素不会在页面中显示并且不再占用页面的位置

visibility 可以用来设置元素的隐藏和显示的转台
可选值: visible 和 hidden

使用这个方式隐藏的元素虽然不可见了, 但是还会占用空间

子元素默认在父元素的内容去中, 理论上子元素的最大大小可以等于父元素的内容区的大小如果超过了父元素的大小, 超过的内容会在父元素意外的位置显示, 超过的内容叫溢出的内容，溢出的元素默认在外面显示，通过overflow可以设置如何处置溢出的内容

可选值:

• visible 一处之后在父元素意外的位置显示
• hidden 溢出的内容会被修剪掉
• scroll 显示滚动条, 可以拖动滚动条查看全部内容
  • 缺点 : 不论是否溢出都会显示滚动条
• aoto 根据需求自动添加滚动条, 需要水平就水平, 需要垂直就垂直

文档流

文档流处在网页的最底层表示的是一个页面中的位置, 我们所创建的元素都是在文档流中

元素在文档流中的特点

• 块元素
  • 块元素在文档流中会独占一行 块元素自上向下排列
  • 块元素在文档流中默认宽度是父元素的100%
  • 当元素的高度或者宽度的值为auto的时候, 此时指定内边距不会影响可见框的大小, 而是会自动修改宽以适应内边距
  • 块元素在文档流中高度默认被内容撑开
• 内联元素
  • 内联元素在文档流中只占自身大小, 会从左到右排列
  • 如果装不下了就换行之后 从左向右排列
  • 宽和高默认都是被内容撑开

浮动与文档流

如果希望块元素在页面中水平排列, 可以使块元素脱离文档流–使用float来使元素浮动, 从而脱离文档流

float

可选值

• none 默认值, 在文档流中排列

• right 元素会脱离文档流向右浮动

• left 元素会脱离文档流向左浮动

• 当为一个元素设置浮动以后(float非none), 元素会立即脱离文档流, 脱离以后, 在其下的元素会立即向上移动, 浮动以后会尽量向页面的右上或者左上浮动

• 元素浮动以后, 会尽量向页面的左上或右上漂浮, 直到遇见父元素的边框或者其他的浮动元素

• 如果浮动元素上面是一个没有浮动的块元素, 则浮动元素不会超过块元素

• 如果一行中不足以容纳所有浮动元素, 则会自动换行

• 浮动的元素不会超过它的兄弟元素, 最多对齐

• 浮动的元素不会盖住文字, 文字会自动环绕在元素周围, 所以我们可以通过浮动来设置文字坏绕图片效果

• 在文档流中, 子元素, 默认占据父元素的全部

• 块元素脱离文档流以后, 高度和宽度都被内容撑开

• 内联元素脱离文档流以后会变成块元素

布局

高度塌陷

在文档流中, 父元素的元素是默认被子元素撑开的, 也就是子元素多高, 父元素就多高, 但是, 当为子元素设置浮动以后, 子元素会完全脱离文档流, 此时, 将会导致子元素无法撑开父元素的高度, 导致了父元素的高度塌陷

带来的问题 : 由于父元素的高度塌陷, 代指了父元素的下面的所有元素向上移动, 导致了页面布局混乱
在开发中一定要尽力避免高度塌陷的问题

解决问题的办法:

• 我们可以将父元素的高度写死来避免这种问题, 但是一旦写死, 父元素的高度将不能自动适应子元素, 所以不推荐使用

办法一:

• 原理 : 根据W3C标准, 页面中的元素都有一个隐含的属性, Block Formatting Context (BFC), 该属性可以设置打开或关闭, 当开启了之后, 元素将会有如下特性
  • 父元素的垂直外边距不会和子元素重叠(子元素的外边距将不会传递给父元素)
  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的父元素可以包含浮动的子元素(子元素就可以撑开父元素了)
• 如何开启?
  • 设置元素浮动
    • 虽然可以撑开父元素, 但是会导致父元素的宽度丢失
    • 而且使用这种方式也会导致斜边的元素上移动
    • 不能彻底解决问题
  • 设置元素绝对定位
  • 设置元素为inline-block
    • 可以解决问题, 但是也会导致宽度丢失, 不推荐使用
  • 将元素的overflow设置为一个非visible的值(设置为hidden是最简单的方式)
    • 但是在IE6及以下的浏览器中不支持开启BFC, 所以使用这种方式不能兼容IE6
    • 在IE6中虽然没有BFC但是又另一个隐含的属性hasLayout, 该属性的作用和BFC类似, 所以在IE6中可以通过开启hasLayout解决
    • 副作用最小的: 将元素的zoom设置为1即可 zoom:1
    • zoom表示放大, 后面的数值为将元素放大几倍
    • zoom只在IE6中支持

方案二 :

clear样式 清除其他元素对当前元素产生的影响, 清除以后, 其他元素会回到原来的位置
可选值:

• none 不清除浮动
• left 左侧
• right 右侧
• both 两侧(清除对他影响最大的元素的浮动)

可以直接在高度塌陷的父元素的最后添加一个空白的div, 由于这个div并没有浮动, 所以他是可以撑开父元素的高度的, 然后再对其进行清除浮动, 这样可以通这个空白的div来撑开父元素的高度, 基本没有副作用

但是, 只用这种方式虽然可以解决问题, 但会在页面中添加多余的结构.

方案三:

通过after伪类, 选中父类的最后面, 想元素的最后添加空白的块元素, 对其清除浮动, 这样做和添加一个div的原理一样, 可以达到相同的效果, 而且不会在页面中添加多余的div, 这是最推荐使用的方式, 几乎没有副作用

(IE6不支持, 还IE6是要用hasLayout的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    <style>
        .box1{
            border:1px solid red;
        }

        .box2{
            height: 100px;
            width: 100px;
            background-color: blue;
        }

        .clearfix{
            content: "";
            display: block;
            clear: both;
        }
    </style>
...
    <body>
        <div class="box1 clearfix">
            <div class="box2">
            </div>
        </div>
    </body>

最终方案:

经过修改后的clearfix是一个多功能的, 既可以解决高度塌陷, 又可以确保父元素和子元素的垂直外边距不会重叠

1
2
3
4
5
6
7
8

<style>
    .clearfix:before, .clearfix: after{
        content: "";
        display: table;
        clear: both;
    }
</style>

定位

快捷生成标签。标签名.类名$*数量

如

1
2
3
4
5
6
7
8

div.box$*3

结果为:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

• 定位指的就是将指定的元素摆放到任意位置
• 通过定位可以任意的摆放元素
• position属性来设置定位, 可选值
  • static 默认值, 元素没有开启定位
  • relative 开启了相对定位
  • absolute 开启了绝对定位
  • fixed 开启了固定定位

相对定位

特点

1. 开启了相对定位(position值relative)而不设置偏移量的时候不产生任何变化
2. 是相对于元素在文档流中原来的位置的定位进行移动
3. 相对定位的元素不会脱离文档流, 原来的位置还被它占着
4. 相对定位会使元素提高一个层级, 即”盖住别的元素”
5. 通常只需要使用两个就够了
6. 开启之后元素的性质不变, 块还是块

开启后, 可以通过left right top bottom 四个属性来设置元素的偏移量

• left 相对于定位位置的左侧的偏移量
• right 右
• top 上
• bottom 下

绝对定位

当position的值为absolute的时候开启了绝对定位

特点

• 开启之后, 元素脱离文档流(与相对定位不同)
• 开启之后, 如果不设置偏移量, 元素的位置不变
• 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况, 开启了子元素的绝对定位的同时会开启父元素的相对定位)
  • 如果所有的祖先元素都没有开启定位, 则相对于浏览器的窗口进行定位
• 绝对定位会使元素提升一个层级
• 绝对定位会改变元素的性质, 内联元素变为块元素, 块元素的宽度和高度默认被内容撑开

固定定位

当元素的position属性设置为fixed的时候开启了固定定位

固定定位也是一种绝对定位, 它的大部分特点都和绝对定位一样

不同的是:

• 永远都会相对于浏览器窗口进行定位
• 固定定位的元素会固定在浏览器窗口的某个位置, 不会随滚动条滚动而被滚上去

IE6不支持固定定位

元素的层级

• 如果定位元素的层级是一样的, 则下面的会盖住上面的
• 通过z-index属性可以用来设置元素的层级
• 可以为z-index指定一个整数值, 该值将会作为当前元素的层级
• 对于没有开启定位的元素不能用z-index
• 父元素的层级再高也不会盖住子元素

设置透明属性opacity

需要一个0-1之间的值, 0表示完全透明, 1表示完全不透明(这个属性在IE8及以下的浏览器中不支持, 需要使用 filter:alpha(opacity=50)相当于0.5的透明度)

背景

使用background-image设置背景图片

格式 :background-image:url(相对路径);

返回上一个路径用 ../ (和cmd一样哎)

• 如果图片大于元素, 默认显示图片的左上角, 一样大就全部显示
• 如果图片小于元素大小, 则将图片平铺到元素的大小
  • 如何设置只显示一个 ? background-repeat
  • 默认值 repeat 背景图片会双向重复
  • no-repeat 不重复, 有多大显示多大
  • repeat-x 沿着x轴重复
  • repeat-y 沿着y轴重复
• 可以同时设置背景颜色和背景图片, 这样背景颜色将会在背景图片的下面
• 一般设置背景图片的时候会同时指定一个背景颜色
• 背景图片默认贴着元素的左上角显示
  • 如何改变背景图片的开始位置 ? background-position
  • 可以使用 yop right left botton center 中的两个值指定一个背景图片的位置(如果只指定了一个值, 则另一个默认为center)
  • 可以使用xpos ypos 直接指定两个偏移量, 水平偏移量 垂直偏移量, 正值向右/下
• 如何让背景图片不随着滚动条滚动 ? background-attachment
  • 默认scroll 随着滚动
  • fixed 不随着滚动, 这时候背景图片的定位永远相对于浏览器的窗口
    • 不随窗口滚动的图片我们一般都设置给body
  • inherit 继承父元素的background-attachment设置

背景简写 : background, 没有顺序要求 没有数量要求, 不写的就使用默认值

表格样式

• width 宽度
• margin 外边距
• border 外边框
• border-spacing: table和td边框之间默认有一个距离, 可以设置这个数值(px)来改变这个距离
  • 如果想让边框合并呢 ?
  • border-collapse 的值改为 collapse
  • 如果设置了边框合并, 则border-spacing自动失效

常用选择器

元素选择器

作用 : 通过元素选择器可以选择页面中所有指定的元素

1
2
3
4
5

<style>
    p{
        color: red;
    }
</style>

id选择器

作用 : 通过元素的id选中唯一的一个元素

语法 : #id

注意 : id不能以数字开头

1
2
3
4
5
6
7
8
9
10

<style>
    #p123{
        color: black;
    }
</style>

......

<p id="p123">123132132123</p>

类选择器

我们可以为元素设置class属性

class 属性和 id 类似, 但是可以重复

拥有相同class属性值的元素属于同一个类

语法 : .class的属性值{}

1
2
3
4
5
6
7
8
9
10

    <style>
        .p1{
            color: aqua;
        }
    </style>
<body>
    <p class="p1">123132132123</p>
    <p class="p1">123132132123</p>
    <p class="p1">123132132123</p>
</body>

class 比 id 的功能强大, class 可以设置多个class属性值, 多个值之间用空格隔开

1
2
3
4
5
6
7
8
9
10
11
12
13

        <style>
            .p1{
                color: aqua;
            }
            .p2{
                font-size: 50px;
            }
        </style>
...
    <body>
        <p class="p1 p2">123132132123</p>
        <p class="p1">123132132123</p>
    </body>

选择器分组(并集选择器)

通过选择器分组可以同时选中多个选择器对应的元素

语法 : 选择器1, 选择器2, …, 选择器n{}

1
2
3
4
5
6
7
8
9
10

        <style>
            .p1, .p2{
                color: aqua;
            }
        </style>
...
    <body>
        <p class="p1 p2">123132132123</p>
        <p class="p1">123132132123</p>
    </body>

交集选择器

可以同时选择满足多个条件的元素, 精准地选择某个元素，如:span标签的某class

语法 : 选择器1选择器2…选择器n{}

1
2
3
4
5
6
7
8
9
10

        <style>
            p.p2{
                color: aqua;
            }
        </style>
...
    <body>
        <p class="p1 p2">123132132123</p>
        <p class="p1">123132132123</p>
    </body>

通配选择器

用来选择页面中的所有元素

语法 : *{}

1
2
3
4
5
6
7
8
9
10
11

        <style>
		  *{
                color: aqua;
            }
        </style>
...
    <body>
        <p class="p1 p2">123132132123</p>
        <p class="p1">123132132123</p>
    </body>

后代选择器

元素之间的关系

• 父元素 : 直接包含子元素的元素
• 子元素 : 直接被父元素包含的元素
• 祖先元素 : 直接或间接包含后代元素的元素, 父元素也是祖先元素
• 后代元素 : 直接或间接被祖先元素包含的元素
• 兄弟元素 : 拥有相同父元素的元素

后代选择器 :

选中制定元素的后代元素

语法 : 祖先元素 空格 后代元素{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

        <style>
            #d1 p{
                /*选中id为d1的父元素中的p标签的元素*/
                color: aqua;
            }

            #d1 span p{
                /*选中id为d1的父元素的span标签中的p子元素*/
                color: red;
            }
        </style>
...
    <body>
        <div id="d1">
            <p class="p1 p2">123132132123</p>
            <span><p class="p4">123132132123</p></span>
        </div>
        <div>
            <p class="p1">123132132123</p>
        </div>
    </body>

子元素选择器

作用 : 选中指定父元素的指定子元素

ie6及以下的浏览器不兼容子元素选择器

语法 : 父元素 > 子元素

1
2
3
4
5
6
7
8
9
10
11

        <style>
            #d1 > p{
                background-color: rgb(8, 204, 83);
            }
        </style>
...
    <body>
        <div id="d1">
            <p class="p1 p2">123132132123</p>
            <span><p class="p4">123132132123</p></span>
        </div>

子元素选择器的伪类

• first-child 选择第一个子标签
• last-child 选择最后一个子标签
• nth-child(n) 选择第n个子标签(括号里是变量)
  • 括号里可以传特殊值, 如even 表示偶数位置, odd表示奇数位置
• 和他们的父标签是谁没有关系

1
2
3
4
5
6
7
8
9
10
11

    <style>
        p:first-child{
            background-color: yellow;
        }
    </style>
...
    <body>
        <p>123123123132</p> <!--变色-->
        <p>123123123132</p>
        <div><p>123123123132</p></div> <!--变色-->
    </body>

• first-of-type 某类型的第一个元素
• last-of-type 某类型的第一个元素
• nth-of-type 某类型的第一个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <style>
        p:first-of-type{
            background-color: yellow;
            /*p类型的第一个(作为)子标签变色*/
        }
    </style>
...
    <body>
        <p>123123123132</p> <!--变色-->
        <p>123123123132</p>
        <div><p>123123123132</p><!--变色-->
            <p>123123123132</p>
        </div>
    </body>

兄弟类型选择器

• 后一个兄弟元素选择器
  • 选中后一个紧挨着的元素
  • 语法 : 前一个 + 后一个
• 后边所有兄弟元素选择器
  • 语法: 前一个 ~ 后面所有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <style>
        /*选择div后面所有的兄弟p元素*/
        div ~ p{
            background-color: yellow;
        }
    </style>
...
    <body>
        <div>
            <p>123123123132</p>
        </div>
        <p>123123123132</p> <!--变色-->
        <p>123123123132</p> <!--变色-->
        <div>123123123123</div>
    </body>

伪类选择器

伪类和伪元素选择器都可以用一个冒号或者两个冒号，只不过为了区分，将伪类选择器写成一个冒号，伪元素是两个冒号

伪类 : 专门用来表示元素的一种特殊的状态

比如 :

• 访问过的超链接
• 普通的超链接
• 获取焦点的文本框

给链接定义样式

• 正常连接 a:link
• 访问过的链接 a:visited
  • 由于涉及到用户的隐私问题, 所以使用visited的时候只能设置字体的颜色
• 鼠标滑过的链接 a:hover
• 正在被点击的链接 a:active
• hover和active不仅可以对a标签用, 还可以对p等其他标签用(IE6除外)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <style>
		a:link{
            color: blue;
        }
        a:visited{
            color: gray;
        }
        a:hover{
            color : red;
        }
        a:active{
            color: yellow;
        }
    </style>
...
    <body>
        <a href="#">go to top</a>
    </body>

使用注意：

• hover必须放在link和visited后面才能生效
• active必须放在hover后面才能生效
• 所以建议的顺序为：link visited focus hover active

• 获取焦点 :focus
• 选中内容 ::selection (两个冒号!)
  • 这个伪类在火狐中要采用另一种方式去写 (-moz-selection{}), 为了都兼容, 可以写两个selection

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <style>
        input:focus{
            /*输入状态的文本框显示蓝色*/
            background-color: aqua;
        }
        p::selection{
            /*选中的文本为绿色*/
            background-color: green;
        }
    </style>
...
    <body>
        <input type="text" />
        <p>this is a test text...</p>
    </body>

伪元素选择器

使用伪元素来表示元素中的一些位置

• 首字母 ::first-letter
• 首行 ::first-line

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
        p::first-line{
            /*首行字体大小*/
            font-size: 50px;
        }
        p::first-letter{
            /*首个字母颜色*/
            color: red;
        }
</style>
...

        <p>This is a <br />test text...</p>

before 和 after

使用的时候不能省略 content

• :before
  • 表示元素最前面的部分
  • 一般的before都需要结合content这个样式一起使用
  • 通过content可以向before或者after的位置添加一些内容
  • 不能被选中
• :after
  • 表示元素的最后面
  • 其余和before类似

1
2
3
4
5
6
7
8
9

    <style>
        p::before{
            content: "This";
        }
    </style>
...
    <body>
        <p>This is a test text...</p>
    </body>

扩展：

在这种列表中，前后的小组件一般都是用的after和before伪元素

因为before和after伪元素的内容也可以是图片。

具体形式：

1
2
3
4
5
6
7
8

.box::before {
    content: url("./hot.svg");
    
/*
    后面可以使用定位等手段继续调整位置。
    before和after也可以单独设置样式，成为上述列表的样式。
*/
}

为什么要这样做？

未来大型项目的代码量会非常多，如果所有的都用标签的话会非常复杂，通过css设置before和after可以简化开发，不需要很多HTML标签。

属性选择器

title属性:

• 可以为所有标签指定
• 当鼠标移入到元素上的时候, 元素中的title属性的值会作为提示文字提示

属性选择器

作用 : 可以根据元素的属性或属性值来选取指定元素

语法 :

• 标签[属性名]{} 选取含有指定属性的元素
• 标签[属性名 = “”]{} 选取含有制定元素值的元素
• 标签[属性名 ^= “”]{} 选取属性值以指定值开头的元素
• 标签[属性名 $= “”]{} 选取属性值以指定值结尾的元素
• 标签[属性名 *= “”]{} 选取属性值中包含指定值的元素
• 标签[属性名 |= “”]{} 选取属性值等于指定值或以这个值开头后面紧跟-的元素
• 标签[属性名 ~= “”]{} 选取属性值中包含指定值的元素，如果有其他值必须以空格和val分割

1
2
3
4
5
6
7
8
9
10
11
12
13

    <style>
        /*为所有具有title属性并且为te开头的p元素设置背景颜色为黄色*/
        p[title ^= "te"]{
            background-color: yellow;
        }
    </style>
...
    <body>
        <p title="test01">This is a test text...</p>
        <p title="taxs02">This is a test text...</p>
        <p title="test02">This is a test text...</p>
    </body>

否定伪类

作用 : 可以从已经选中的元素中剔除某些元素

语法 ::not(选择器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <style>
        /*为所有p元素设置一个背景颜色为黄色
        除了class 值为a123 的*/
        p:not(.a123){
            background-color: yellow;
        }
    </style>
...
    <body>
            <p class="a123">123123123132</p>
            <p>123123123132</p> <!--变色-->
            <p class="a123">123123123132</p>
    </body>

继承性

• 祖先的样式会传给后代，但不是所有的样式都会传给后代
• 如 : 文字相关的

其余可以查文档。

注意：

继承下来的属性是计算值，而不是设置值

如果一个元素无法继承，但是还是想要他继承父元素的值，如何做？

• 设置属性为inherit

1
2
3

.para p{
    border: inherit;
}

属性的层叠

CSS的翻译是层叠样式表，什么是层叠呢？

• 对于一个元素来说，相同一个属性我们可以通过不同的选择器给它进行多次设置那么属性会被一层层覆盖上去，但是最终只有一个会生效。

那么多个样式属性覆盖上去，哪一个会生效呢？

• 判断一：选择器的权重，权重大的生效，根据权重可以判断出优先级
• 判断二：先后顺序，权重相同时，后面设置的生效

选择器优先级（权重）

当使用不同选择器选中同一个元素的时候, 并且设置了相同的样式, 这时我们的样式之间会产生冲突, 最终会采用哪个样式, 由选择器的优先级(权重)决定

优先级高的优先选中

规则 :

• !important 优先级 10000
• 内联样式, 优先级 1000
• id选择器 优先级 100
• 类和伪类选择器 优先级 10
• 元素选择器 优先级 1
• 通配选择器 优先级 0
• 继承的样式 没有优先级

注意 :

• 当出现多种选择器的时候, 需要将所有选择器的优先级相加, 但是 : 选择器的优先级计算不会超过它的最大数量级

• 如果选择器的优先级一样, 则使用靠后的样式
• 并集选择器的优先级单独计算
• 可以在样式的最后添加一个 !important 则样式将会获得最高的优先级, 优先于所有的优先级显示, 甚至超过内联样式, 但是在开发中尽量避免使用

伪类顺序

link, visited, hover, active 这四个伪类的优先级是一样的

所以如果两个状态同时存在, 则用下面的状态

所以伪类的顺序:

• link
• visited
• hover
• active

如果伪类设置了背景图片, 则会在第一次切换图片的时候, 发现图片会有个非常快的闪烁, 这个闪烁会产生不好的用户体验

• 原因 : 背景图片是以外部资源的形式加载进网页的, 浏览器每架在一个外部资源会单独的发送一次请求, 但是我们外部资源并不是同时加载, 浏览器会在使用资源的时候才加载, 由于link和hover的状态没被马上触发, 所以并不会预先加载, 在加载的过程中会有一段时间, 导致背景图片无法显示, 才会出现闪烁的情况.
• 解决方法 : 把三个状态弄到同一张图片上(CSS-Sprite图片整合技术), 不同的状态显示不同的位置, 用background-position
• 优点:
  • 浏览器只需要发送一次请求就可以加载多个图片, 提高了访问效率, 提高了用户体验
  • 减小了图片的总大小(颜色表合并), 提高了请求速度, 提高了用户体验

字体和文本

• 前景颜色 color
• 背景颜色 background-color

字体分类

网页中的字体分成了五大类(大的分类)

• serif(衬线字体) (有顿笔)
• sans-serif(非衬线字体) (没有顿笔)
• monospace(等宽字体)
• cursive(草书字体)
• fantasy(虚幻字体)

可以将这些最设置为大分类的字体, 然后浏览器从大分类中的字体中自动选择一个使用

不同浏览器对同一个字体的理解可能不同, 所以在不同浏览器打开的时候可能会不一样

一般会将大分类指定为 font-family 的最后一个字体

1
2

<span style="font-family: Arial;">你好世界HelloWorld123</span>
<span style="font-family: cursive;">你好世界HelloWorld123</span>

字体属性

font-size 字体大小【重要】

默认是16px

• 设置的并不是文字本身的大小
• 在页面中, 每个文字都是在一个’格子’里, 我们设置的font-size实际上是设置的’格子’的高度
• 一般情况下, 文字都要比这个值要小一些，也有时候会比格子大
• 根据字体不同, 显示的效果也不一样

1em = 16px，也就是原本从父元素继承下来的字体大小的1倍

2em = 32px

font-family 字体样式

• 如 Arial, 微软雅黑等
• 如果浏览器支持, 就用指定的, 不支持就用默认字体
• 该样式可以同时指定多个字体, 不同的字体用逗号隔开, 当采用多个字体的时候, 浏览器会优先使用前面的字体

也可以使用@font-face指定的可以直接下载字体

font-style 文字斜体

可选值

• normal 默认值, 文字正常显示

• italic 文字会以斜体显示

  • 字体本身支持斜体时，浏览器会直接调用字体本身的斜体字样

• oblique 以倾斜状态显示

  • 不管支持与否，浏览器对其进行倾斜

• 大多数浏览器的这两个倾斜是一样的

1

<p style="font-style: italic;" >123123</p>

font-weight 加粗

可选值:

• normal 默认值 = 400
• bold 加粗 = 700
• 100–900 之间的值表示粗细程度
  • 但是因为用户计算机中没有这么多级别的字体, 所以可能达不到我们的效果
  • 200可能比100粗, 也可能一样

1

<p style="font-weight: bold;">12132</p>

font-variant 小型大写字母

可选值:

• normal 正常
• small-caps 小型大写字母

1

<p style="font-variant: small-caps;">ABCabc</p>

还有一个样式叫font, 可以通过这个同时设置字体相关的所有样式

也就是以上的那些样式, 可以同时设置, 不同的值之间使用空格隔开 没有顺序要求 甚至可以写可不写(默认值)

但是文字的大小和字体必须写, 而且字体必须是最后一个样式, 大小必须是倒数第二个样式

1
2
3
4
5
6
7
8
9
10

    <style>
        p{
            font : 100 bold 30px;
        }
    </style>
...
    <body>
        <p>123123</p>
    </body>

实际上使用简写属性的性能比较好

line-height 行高

定义：两行文字的基线的间距。（基线：与小写字母x底部对齐的线）

CSS中并没有提供直接设置行间距的方式, 我们只能通过设置行高来间接设置行间距,而且文字会默认居中在行中显示

行间距 = 行高 - 字体大小

通过设置 line-height 来调整行高

• 可以直接接收一个大小
• 也可以指定一个百分数:相对于字体的大小
• 可以传入一个数字表示相对于字体的倍数

1
2
3
4
5

<style type="text/css">
    p{
    line-height:20px;
}
</style>

tips:

• 对于单行文本来说, 将行高设置为和父元素高度一致, 则单行文本在父元素中居中
• 在 font 中也可以指定行高
• 行高只对文本有效。

text-transform 文本大小写

可选值:

• none 默认值
• capitalize 每个单词的首字母大写(通过空格识别)
• uppercase 所有都大写
• lowercase 所有都小写

1
2
3
4

<p style="text-transform: none;">text transform</p>
<p style="text-transform: uppercase;">text transform</p>
<p style="text-transform: lowercase;">text transform</p>
<p style="text-transform: capitalize;">text transform</p>

text-decoration 文本修饰

用来给文本添加各种线或者闪烁文本

可选值

• none 默认值【常用】
• underline 文本下划线 (超链接默认为这个)
• hoverline 文本上划线
• line-through 穿过文本的线（删除线）

1
2
3
4

<p style="text-decoration: none;">none</p>
<p style="text-decoration: underline;">underline</p>
<p style="text-decoration: line-through;">line-through</p>
<p style="text-decoration: overline;">overline</p>

font 综合属性

font-style font-variant font-weight font-size/line-height font-family

• font-style font-variant font-weight 没有顺序要求，并且都可以省略

• /line-height 可以省略，如果不省略，则必须跟在font-size后面

• font-size和font-family不可以调换顺序，也不能省略

1
2

font: small-caps italic 700 30px/50px "等线";
font: 30px/50px "等线";

对齐文本

text-aligh 对齐方式【非常重要】

作用：描述行内级元素在其父元素中的对齐方式

可选值

• left 左对齐 默认值
• right 右对齐
• center 居中对齐
• justify 两端对齐 调整文本之间的空格的大小达到两端对齐的目的

这个属性对块级元素无效，但是把块级元素改成行内元素就生效了。

test-indent 首行缩进

• 设置值, 对其他行没有影响
• 可以设置像素值, 但是最好设置为em, 即几倍的字体大小
• 当指定正值时, 则自动向右侧缩进指定的像素
• 负值向左缩进 (可以将一些不想显示的字隐藏起来)
  • 不希望用户看见, 但希望搜索引擎看见

1
2
3
4
5
6
7
8
9
10

    <style>
        p{
            text-align:center;
            text-indent: 2em;
        }
    </style>
...
    <body>
        <p>i love you</p>

字符间距

字母间距 letter-spacing 字符之间的间距 中英文都有效
单词间距 word-spacing 单词之间的间距 词与词之间空格的大小(对中文来说没啥意义)
这两个属性都可以直接指定一个长度或者百分数, 正数表示增加距离, 负数表示减少距离

1
2
3
4
5
6
7

<style>
    p{
        letter-spacing: 1px;
        word-spacing: 3px;
    }
</style>