CSS 基础学习笔记

发表于 更新于 分类于 阅读次数：
本文字数： 11k 阅读时长 ≈ 10 分钟

CSS

CSS基础

HTML、CSS、JavaScript

  • HTML是网页内容化的载体
  • CSS样式是表现（外观控制）
  • JavaScript是行为，用来实现网页特效效果

CSS层叠样式表（Cascading Style Sheets）

  • 用于定义HTML内容在浏览器内的显示样式

为什么学CSS

  • CSS简化HTML相关标签，网页体积小，下载快
  • 解决内容与表现分离的问题
  • 更好地维护网页，提高工作效率

CSS基础语法

CSS规则由两部分组成：选择器，声明

1
2
<!-- h1是选择器，`color: red;`和`font-size: 14px;`是样式，样式有属性和值 -->
h1 {color: red;font-size: 14px;}

CSS使用方法

  • 行内样式（内联样式）：在开始标签内添加style样式属性

    1
    <h1 style="color: red">hello css</h1>

  • 内部样式表（嵌入样式）

    1
    2
    3
    4
    5
    6
    7
    /* 需要放在head标签内 */
    <style type="text/css">
    /* 使用html注释，当低版本浏览器不兼容时不显示CSS代码 */
    	<!--
    	css code...
    	-->
    </style>

  • 外部样式表：HTML和CCS样式代码分离，位于不同的文件中

  • 导入式

    1
    2
    3
    4
    <style type="text/css">
    	@import url(css_base01.css);
    	...
    </style>

CSS使用方法区别

类别 引入方法 位置 加载
行内样式 开始标签内style html文件内 同时
内部样式 <head>中的<style>内 html文件内 同时
链入外部样式 <head>中的<link>内 CSS样式文件与html文件分离 页面加载时，同时加载CSS样式
导入外部样式(@import) 在样式代码最开始处 CSS样式文件与html文件分离 在读取完html文件之后加载

使用链入外部样式的好处

  1. CSS和HTML分离
  2. 多个文件可以使用同一个样式文件
  3. 多文件引用同一个css文件，css只需要下载一次

CSS不同使用方法生效的优先级

行内样式（最高）>内部样式>外部样式

Tip1. 外部样式表与内部样式表之间的优先级取决于在<head>标签中所处位置的先后

Tip2. 最后定义的优先级最高（就近原则）

Tip3. 当导入式样式与内部样式在同一<style>标签中时，内部标签优先于导入式样式

CSS选择器

  • 标签选择器：以HTML标签作为选择器

  • 全局选择器：*

  • 群组选择器：集体统一设置样式，选择器之间用逗号隔开

  • 类选择器：class=""

    Tip：class中有多个的值时，用空格隔开

  • id选择器：id=""

    Tip1:选择器class和id的值是区分大小写的

    Tip2:一个页面中最好不要有重名id

  • 后代选择器：选择器之间使用空格进行隔开

    1
    2
    3
    p a em{...}		/*p标签中a标签中的em*/
    #p1 em{...}		/*id为p1的标签中的em*/
    p.red a em{...}	/*class为red的p标签中a标签中的em*/

  • 伪类选择器

    • 伪类选择器定义特殊状态下的样式
    • 无法使用标签、id、class及其他属性实现

    1. 链接伪类

      链接的四种状态：激活状态，已访问状态，未访问状态和鼠标悬停状态

      伪类 说明
      :link 未访问链接
      :visited 已访问链接
      :hover 鼠标悬停状态
      :active 激活的链接

      Tip:

      链接伪类的书写顺序：::link > :visited > :hover > :active

      说明：

      1. a:hover必须置于a:link和a:visited之后才有效
      2. a:active必须置于a:hover之后，才有效
      3. 伪类名称对大小写不敏感

    2. 伪类：:hover和:active

      • :hover用于访问的鼠标经过某个元素时
      • :active用于一个元素被激活时（即按下鼠标之后，放开鼠标之前的时间）

      Tip:兼容性问题

      IE6及更早版本支持，支持<a>元素的4种状态

      IE6浏览器不支持其他元素的:hover和:active

CSS继承和层叠

CSS继承：从父元素那继承部分CSS属性

CSS层叠

  • 可以定义多个样式
  • 不冲突时，多个样式可层叠为一个
  • 冲突时，按不同样式规则优先级来应用样式

Tip1:当body中定义字体大小时，其他标签的字体大小会基于body字体的大小进行缩放

Tip2:继承的是计算后的值，不是直接把em或%的值继承过来

CSS优先级

id选择器 > class选择器 > 标签选择器

相同选择器，样式冲突时，就近原则

CSS优先级规则

  1. 权值相同：就近原则（离被设置元素越近优先级越高）
  2. 权值不同：根据权值来判断CSS样式，那种样式权值高，就用哪种样式
选择器 权值
通配符选择器 0
标签选择器 1
类选择器和伪类选择器 10
ID选择器 100
行内样式 1000

权值计算规则

  1. 统计不同选择器的个数
  2. 每个选择器的个数乘以相应权值
  3. 把所有的值想加得出选择器的权值

!important规则

  • 可以调整样式规则的优先级
  • 添加在样式之后，中间用空格隔开
1
div {color:red !important}

CSS优先级总结

  • !important声明优先级最高

  • CSS使用方法的优先级：行内样式（最高）>内部样式>外部样式

    Tip：link链入外部样式和style内部样式优先级，取决于“就近原则”

  • 样式表中优先级：id选择器 > class选择器 > 标签选择器 > 通配符

    权值相同，就近原则；权值不同，使用权值高的。

CSS命名规范

  • 采用英文字母，数字以及”-“和”_”命名
  • 以小写字母开头，不能以数字,”-“和”_”开头
  • 命名形式：单字，连字符，下划线和驼峰
  • 使用有意义命名

1. 页面结构命名

页面结构 命名
页头 header
页面主体 main
页尾 footer
内容 content/container
容器 container
导航 nav
侧栏 sidebar
栏目 column
页面外围控制 wrapper
左/右/中 left/right/center

2. 导航的命名

导航 命名
导航 nav
主导航 mainnav
子导航 subnav
顶导航 topnav
边导航 sidebar
左导航 leftsidebar
右导航 rightsidebar
菜单 menu
子菜单 submenu
标题 title
摘要 summary

3. 功能的命名

功能 命名
标志 logo
广告 banner
登陆 login
登录条 loginbar
注册 register
搜索 search
功能区 shop
标题 title

Tip1：id不要滥用，谨慎使用

Tip2：适当使用class

CSS字体和文本样式

文字：颜色、字体大小、字体、加粗等

文本：行高、对齐方式、文本装饰

文字

Tip：<font></font>标签已经不建议被使用了，使用CSS样式代替。

<h1><font face="宋体" color="red" size="20px">既然活着，不别抱怨</font></h1>

文字样式属性

样式 描述
font-family 字体
font-size 文字大小
color 文字颜色
font-weight 文字粗细
font-style 文字样式

字体：font-family

定义元素内文字以什么字体来显示

Grammar：font-family:[字体1],[字体2],[字体三],…

Suammary:

  • 设置多个字体，浏览器依次查找，如果都没有，使用浏览器默认样式
  • 含空格字体名和中文，用""括起来
  • 多个字体，用,隔开
  • 引号嵌套，外使用双引号，内使用单引号

font-family属性值：具体字体名，字体集

字体集：Serif、Sans serif、Monospace、Cursive、Fantasy

文字大小：font-size

定义元素内文字大小

Grammar：font-size:绝对单位|相对单位

绝对单位(不推荐使用)：

属性值 说明
in Inch，英寸；1英寸=2.54厘米
cm 厘米；1厘米=0.394英寸
mm 毫米；1毫米=0.1厘米
pt 磅，印刷的点数；72磅=1英寸
pc Pica；1pc=12pt
属性值 CSS2缩放系数1.2
xx-small 9px
x-small 11px
small 13px
medium 16px
large 19px
x-large 23px
xx-large 28px

相对单位

px（像素），em/%，larger，smaller

Tip：手机端不推荐使用px

文字颜色：color

定义元素内文字颜色

Grammar：color:颜色名|十六进制|RGB

文字粗细：font-weight

为元素内文字设置粗细

Grammar：font-weight:normal|bold|bolder|lighter|100~900

Tip：

默认值：normal；400等同于normal；700等同于bold

文字样式：font-style

为元素内文字设置样式

Grammar：normal|italic|onlique

字体变形：font-variant

设置元素中英文文本的小写字母为小型大写字母(针对英文)

Grammar：font-variant:normal|small-caps

font属性（简写）

Grammar：font:font-style font-variant font-weight font-size/line-height font-family

Tip：

  1. 值之间空格隔开；
  2. 同时设置font-size和font-family，属性才起作用（先设置font-size，再设置font-family才起作用）
  3. 值之间注意书写顺序，前三个顺序不要求，后两个先font-size，在font-family
  4. font-size和line-height作为一组，之间用”/“隔开，多个字体之间用”,”隔开

文本样式

文本水平对齐：text-align

设置元素内文本的水平对齐方式

Grammar：text-align:left|right|center|justify

文本行高：line-height

设置元素中文本行高

Grammar：line-height:长度值|百分比

垂直对齐方式：vertical-align

设置元素内容的垂直方式

Grammar：vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比

注：对行内元素生效，对块级元素不生效，可以应用于单元格元素

多行在div中垂直居中：可以使用父元素display:table，子元素display:table-cell，vertical-align:middle

文本的其他属性

字体属性 说明
word-spacing 设置元素内单词之间的间距
letter-spacing 设置元素内字母之间的间距
text-transform 设置元素内文本的大小写
capitalize|uppercase|lowercase|none
text-decoration 设置元素内文本的装饰
underline|overline|line-through|blink|none

注：word-spacing和letter-spacing对中文无效，中文有效需要加空格

Tip:blink有兼容性问题，了解即可(闪烁)

Summary:

  1. 网页制作从整体到局部
  2. 借助手册和网络

盒子模型

概念：

  • 盒子模型用来“放”网页中的各种元素
  • 网页设计中内容，如文字、图片等元素，都可以是盒子（div嵌套）

盒子模型的属性

宽度属性

属性 值
width 长度值/百分比/auto
max-width 长度值/百分比/auto
min-width 长度值/百分比/auto

Tip：IE6不兼容max-width和min-width。

高度属性

属性 值
height 长度值/百分比/auto
max-height 长度值/百分比/auto
min-height 长度值/百分比/auto

Q：那些HTML元素可以设置高和宽属性

A：块级元素（p,div,h1-h6,ul,li,ol,dl,dt,dd…）；替换元素（img,input,textarea…）。

Summary：

  1. width和height属性设置的是内容的高和宽
  2. width和height属性设置对块级元素和替换元素有效
  3. max-height(width)/min-height(width)有兼容问题，IE6不支持

边框属性

  • border-width(边框宽度)：thin/medium/thick/长度值

  • border-color(边框颜色)

  • border-style(边框样式)

    Grammar（简写）：border:[width] [style] [color]

    样式值 描述
    none 定义无边框（默认值）
    hidden 与“none”相同（除非在表格元素中解决边框冲突时）
    dotted 定义点状边框（在大多数浏览器中呈现为实线）
    dashed 定义虚线（在大多数浏览器中呈现为实线）
    solid 定义实线
    double 定义双线
    groove 定义3D凹槽边框
    ridge 定义3D垄断边框
    inset 定义3D inset边框
    outset 定义3D outset边框
    inherit 规定应该从父元素继承边框样式

    设置不同方向的属性：

    Ex:border-[left|right|top|buttom]-width(另外两个类似)

内边距属性

设置元素的内容与边框之间的距离（内边距或填充），分为4个方向（上、下、左、右）

  • padding-top：长度值/百分比
  • padding-right：长度值/百分比
  • padding-bottom：长度值/百分比
  • padding-left：长度值/百分比

注：值不能为负值

Tip：盒子在网页中占的空间，不单单与width和height属性有关，还与padding有关

Grammar（内边距属性缩写）：

padding:value1; // 4个方向都为value1

padding:value1 value2; // 上下=value1，左右=value2

padding:value1 value2 value3; // 上=value1，左右=value2，下=value3

padding:value1 value2 value3 value4; // 上1，右2，下3，左4

外边距属性

设置元素与元素之间的距离（外边距），4个方向（上、下、左、右）

  • margin-top：长度值/百分比/auto
  • margin-right：长度值/百分比/auto
  • margin-bottom：长度值/百分比/auto
  • margin-left：长度值/百分比/auto

注：值可以为负值

Grammar（外边距属性缩写）：

margin:value1; // 4个方向都为value1

margin:value1 value2; // 上下=value1，左右=value2

margin:value1 value2 value3; // 上=value1，左右=value2，下=value3

margin:value1 value2 value3 value4; // 上1，右2，下3，左4

  • 默认情况下，相应HTML块级元素存在外边距（body,h1~h6,p…）

  • 声明margin属性，覆盖默认样式

    body,h1,h2,h3,h4,h5,h6,p{margin:0;}

  • margin值为auto，实现水平方向居中显示效果
  • 由浏览器计算外边距
  • 垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并后外边距高度=两个发生合并外边距的高度中最大值。

盒子模型计算

盒子在页面中所占的宽度：左边距+左边框+左填充+内容宽度（width）+右填充+右边框+右边距

盒子在页面中所占的高度：上边距+上边框+上填充+内容高度（height）+下填充+下边框+下边距

IE盒子模型：

width：左边框+左填充+内容宽度+右填充+右边框

height：上边框+上填充+内容高度+下填充+下边框

display属性

  • inline：元素将显示为内联元素，元素前后没有换行符
  • block：元素将显示为块级元素，元素前后会带有换行符
  • inline-block：行内块元素，元素呈现为inline，具有block相应特性
  • none：此元素不会被显示

样式继承关系

样式属性 继承
width height 不继承（块级元素，替换元素）
padding 不继承
margin 不继承
border 不继承

Tip:

对于样式属性，通过设置值为inherit，指定从父元素继承相对属性值。

Ex：div{padding:10px} div p{padding:inherit}

CSS背景和列表

背景样式

  • background-color 设置元素的背景颜色
  • background-image 把图像设置为背景
  • background-position 设置背景图像的起始位置
  • background-attachment 设置背景图片是否固定或者随着页面的其余部分滚动
  • background-repeate 设置背景图片是否重复以及如何重复
  • background 简写属性，作用是将背景属性设置在一个声明中

背景颜色

设置元素的背景颜色：background-color:color|transparent

说明：

  • transparent是全透明黑色（black）的速记法，类似rgba(0,0,0,0)这样的值
  • color（颜色名|RGB|十六进制）
  • 背景区包括内容，内边距（padding）和边框，不包含外边距（margin）

背景图片

设置元素的背景图片：background-image：URL|none

说明：

  • url地址可以是相对地址，也可以是绝对地址
  • 元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边距
  • 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

Tip：如果既设置背景颜色又设置背景图片，背景图片会覆盖掉背景颜色

设置元素背景图片的重复方式：background-repeat:repeat|no-repeat|repeat-x|repeat-y​

设置元素背景图片的显示方式：background-attachment:scroll|fixed

说明：

scroll：默认值，背景图片随滚动条滚动

fixed：当页面的其余部分滚动时，背景图片不会移动

设置元素背景图片的起始位置：background-position:百分比|值|top|right|bottom|left|center

值 说明
长度值(x y) 第一个值水平位置，第二个垂直位置，左上角0 0
百分比(x% y%) 第一个值水平位置的百分比，第二个值垂直位置的百分比
top 顶部显示
right 右部显示
left 左边显示
bottom 底部显示
center 居中显示

注：只写一个参数，第二个参数默认居中

Tip:如果背景图片既设置了fixed，又设置了position，那么position是相对网页来说，而不是容器。

背景缩写

background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]

Tip:各值之间用空格分隔，不分先后顺序

列表样式

  • list-style-type 设置列表项标志的类型
  • list-style-image 将图片设置为列表项标志
  • list-style-position 设置列表中列表项标志的位置
  • list-style 简写属性，用于把所有列表的属性设置在一个声明中

设置列表项的标记样式类型

Grammar：list-style-type:关键字|none

无序列表

值 说明
none 无标记
disc 实心圆点
circle 空心圆点
square 实心方块

有序列表

值 说明
none 无标记
decimal 从1开始的整数
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母

使用图片设置列表项的标记

Grammar：list-style-image:url|none

设置列表项标记的位置

Grammar：list-style-position:inside|outside

inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside:默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

列表样式缩写

Grammar：list-style:[list-style-type] [list-style-position] [lisy-style-image]

说明：

  • 值之间用户空格分隔
  • 顺序不固定
  • list-style-image会覆盖list-style-type的设置

float浮动

会使元素左右移动

浮动元素会脱离普通流

元素浮动后具备inline-block（行内块元素）属性

CSS定位机制

普通流（标准流） 浮动 绝对定位

  • 普通流（标准流）：默认状态，元素自动从左往右，从上往下的排列

CSS Float的基础知识

  • 会使元素向左或向右移动，只能左右，不能上下
  • 浮动元素碰到包含框或另一个浮动框，浮动停止
  • 浮动元素之后的元素将围绕它，之前不受影响
  • 浮动元素会脱离标准流

Grammer:float:left float:right float:none

使用浮动后产生的问题

元素使用浮动后会脱离出普通流，出现“高度塌陷”（浮动溢出）。

清除浮动

设置了float的元素会影响其他元素，需要使用clear清除浮动，clear只会影响自身，不会对其相邻元素造成影响！

Grammar：clear:none|left|right|both

清除浮动的常用方法

  1. 在浮动元素后使用一个空元素

    Ex：<div class="clear"></div>

  2. 给浮动元素的容器添加overflow:hidden;【推荐】

    注意：zoom:1; –触发hasLayout，兼容IE6、7

  3. 使用CSS3的：:after伪元素【推荐 主流】

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 清除浮动的method3 */
    .clear-float:after {
        content:".";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
    }
    .clear-float {
        zoom:1;	/* 触发hasLayout兼容IE6、7 */
    }

:thinking:个人觉得个能方法2使用的会比较多，因为方法3会使HTML中引用的class增多。

使用推荐：小范围浮动清除使用方法2，大范围浮动的清除使用方法3

清除浮动的其他方法（了解）

  1. 父级元素定义height。只适合高度固定的布局。
  2. 父级元素也一起浮动。不推荐，会产生新的浮动问题。

CSS定位（position）

[First] Positioned Layout Module：提供与元素定位和层叠相关的功能，它是核心模块

1
2
3
4
盒子模型的类型和尺寸
布局模型
元素之间的关系
视口大小，图像大小等其他相关方面

[Second] 作为属性

1
2
3
.box {
    position: relative;
}

小知识点：document tree；normal-flow；containing-block。

定位模型

值 描述
static 自然模型
relative 相对定位模型
absolute 绝对定位模型
fixed 固定定位模型（视口）
sticky 磁贴定位模型（定位矩形）
inherit 继承父元素的定位模型（不推荐使用）

position之static

静态定位/常规定位/自然定位——定位中的一股清流–回归本真

作用：

使元素定位于常规/自然流中（块、行垂直排列下去、行内水平从左到右）

特点；

  1. 忽略top，bottom，left，right或者z-index声明
  2. 两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
  3. 具有固定width和height值的元素，如果把左右外边距都设置为auto，则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个快水平居中

position之relative

相对定位

作用：使元素成为containing-block——官话是可定位的祖先元素

特点：

  1. 可以使用top/right/bottom/left/z-index进行相对定位——相对它原来在普通流中的位置
  2. 相对定位的元素不会离开常规流——心念家乡（在普通流中的位置会预留，可以通过取消偏移量回到普通流中）
  3. 任何元素都可以设置为relative，它的绝对定位的后代都可以相对它进行绝对定位——超好用
  4. 可以使浮动元素发生偏移，并控制它们的堆叠顺序

position值absolute

绝对定位

作用：使元素脱离常规流

特点：

  1. 脱离常规流
  2. 设置尺寸要注意：百分比比的是谁？——最近定位祖先元素
  3. lrtb如果设置为0，它将对齐到最近定位祖先元素的各边——衍生出一个居中妙计
  4. lrtb如果设置为auto，它将被打回原形
  5. 如果没有最近定位祖先元素，会认<body>做爹爹
  6. z-index可以控制堆叠顺序，999999见过吧？

position之sticky（CSS3新增）

磁贴定位/粘性定位/吸附定位——赛季新秀 实力布局糖

作用：relative+fixed的完美结合，制造出吸附效果

特点：

  1. 如果产生偏移 原位置还是会在常规流中，一亩三分地留着
  2. 如果它的最近祖先元素有滚动 那么它的偏移尺寸就是最近祖先元素
  3. 如果最近祖先元素没有滚动 那么它的偏移标尺是视口
  4. 上下左右的偏移规则

Tip：IE不兼容Sticky，因此请学习用JS的实现方法

Summary

CSS网页布局

认识布局

  • 以最适合浏览的方式将图片和文字排放在页面的不同位置
  • 布局模式有多种，不同的制作者会有不同的布局设计

:thinking: 为什么学习网页布局：制作一个网页的基础

基础布局

经典的行布局

  • 基础的行布局

  • 行布局自适应

  • 行布局自适应最大宽

  • 行布局垂直水平居中

  • 行布局固定宽

  • 行布局某部位自适应

  • 行布局导航随屏幕滚动

经典的列布局

  • 两列布局固定
  • 两列布局自适应
  • 三列布局固定
  • 三列布局自适应

混合布局

  • 混合布局固定
  • 混合布局自适应

圣杯布局

圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念

在国内由淘宝UED[^1]的工程师传播开来

布局要求

  • 三列布局，中间宽度自适应，两边定宽
  • 中间栏要在浏览器中优先展示渲染
  • 允许任意列的高度最高
  • 用最简单的CSS、最少的HACK语句

注：middle部分要放在container的最前部分，其次是left right

双飞翼布局

经淘宝UED[^1]的工程师针对圣杯布局改良后得出双飞翼布局

去掉相对布局，只需要浮动和负边距

注：main要在最前面，其次是sub extra

圣杯布局和双飞翼布局的代码对比

1
2
3
4
5
6
<!-- 圣杯布局 -->
<div class="container">
    <div>middle</div>
    <div> left</div>
    <div> right </div>
</div>
1
2
3
4
5
6
<!-- 双飞翼布局 -->
<div class="main">
    <div>main</div>
</div>
<div>sub</div>
<div>extra</div>

—留白—

注解：

[^1]: User Experience Design 用户体验设计