css 基本使用

CSS

CSS

• 层叠样式表 (Cascading Style Sheets)
• css可以用来为网页创建样式表，通过样式
  表可以对网页进行装饰。
• 所谓层叠，可以将整个网页想象成是一层
  一层的结构，层次高的将会覆盖层次低的。
• 而css就可以分别为网页的各个层次设置样
  式。

基本语法

• CSS的样式表由一个一个的样式构成，一个
  样式又由选择器和声明块构成。
• 语法：
  – 选择器 {样式名:样式值；样式名:样式值 ; }
  – p {color:red ; font-size:12px;}

行内样式

• 可以直接将样式写到标签内部的style属性
  中，这种样式不用填写选择器，直接编写
  声明即可。
  <p style="color: red;font-size: 30px"></p>
• 这种方式编写简单，定位准确。但是由于
  直接将css代码写到了html标签的内部，导
  致结构与表现耦合，同时导致样式不能够
  复用，所以这种方式我们不使用。

内部样式表

• 可以直接将样式写到<style>标签中。

  <style>
  p{color:red; font-size: 30px;}
  </style>

• 这样使css独立于html代码，而且可以同时为
  多个元素设置样式，这是我们使用的比较多的
  一种方式。
• 但是这种方式，样式只能在一个页面中使用，
  不能在多个页面中重复使用。

外部样式表

• 可以将所有的样式保存到一个外部的css文
  件中，然后通过<link>标签将样式表引入
  到文件中。

  <link rel="stylesheet" type="text/css"
  href="style.css">

• 这种方式将样式表放入到了页面的外部，
  可以在多个页面中引入，同时浏览器加载
  文件时可以使用缓存，这是我们开发中使
  用的最多的方式。

选择器

选择器

• 选择器（selector），会告诉浏览器：网页
  上的哪些元素需要设置什么样的样式。

• 比如：p这个选择器就表示选择页面中的所
  有的p元素，在选择器之后所设置的样式会
  应用到所有的p元素上。

  元素选择器

• 元素选择器（标签选择器），可以根据标
  签的名字来从页面中选取指定的元素。

• 语法：
  标签名 { }

• 比如p则会选中页面中的所有p标签，h1会
  选中页面中的所有h1标签。

  类选择器

• 类选择器，可以根据元素的class属性值选
  取元素。

• 语法：

     `.className { }`

• 比如.hello会选中页面所有class属性为
  hello的元素。

ID选择器

• ID选择器，可以根据元素的id属性值选取
  元素。
• 语法： #id { }
• 比如#box会选中页面中id属性值为box的
  元素，和class属性不同，id属性是不能重
  复的。

复合选择器

• 复合选择器，可以同时使用多个选择器，
  这样可以选择同时满足多个选择器的元素。
• 语法：选择器1选择器2{}
• 例如div.box1会选中页面中具有box1这个
  class的div元素。

群组选择器

• 群组选择器，可以同时使用多个选择器，
  多个选择器将被同时应用指定的样式。
• 语法：
  选择器1,选择器2,选择器3 { }
• 比如p,.hello,#box会同时选中页面中p元素，
  class为hello的元素，id为box的元素。

通用选择器

• 通用选择器，可以同时选中页面中的所有
  元素。
• 语法：
  *{ }

  标签之间的关系

• 祖先元素
  – 直接或间接包含后代元素的元素。
• 后代元素
  – 直接或间接被祖先元素包含的元素。
• 父元素
  – 直接包含子元素的元素。
• 子元素
  – 直接被父元素包含的元素。
• 兄弟元素
  – 拥有相同父元素的元素

后代选择器

• 后代选择器可以根据标签的关系，为处在
  元素内部的代元素设置样式。
• 语法：
  祖先元素 后代元素 后代元素 { }
• 比如p strong 会选中页面中所有的p元素
  内的strong元素。

伪类和伪元素

• 有时候，你需要选择本身没有标签，但是
  仍然易于识别的网页部位，比如段落首行
  或鼠标滑过的连接。CSS为他们提供一些选
  择器：伪类和伪元素。

给链接定义样式

• 有四个伪类可以让你根据访问者与该链接的交
  互方式，将链接设置成4种不同的状态。
• 正常链接
  – a:link
• 访问过的链接
  – a:visited（只能定义字体颜色）
• 鼠标滑过的链接
  – a:hover
• 正在点击的链接
  –a:active

其他

• 获取焦点
  – :focus
• 指定元素前
  – :before
• 指定元素后
  – :after
• 选中的元素
  – ::selection

其他选择器

给段落定义样式

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

属性选择器

• 属性选择器可以挑选带有特殊属性的标签。
• 语法:

  [属性名]
  [属性名="属性值"]
  [属性名~="属性值"]
  [属性名|="属性值"]
  [属性名^="属性值"]
  [属性名$="属性值"]
  [属性名*="属性值"]

  子元素选择器

• 子元素选择器可以给另一个元素的子元素
  设置样式。
• 语法：
  父元素 > 子元素{}
• 比如body > h1将选择body子标签中的所
  有h1标签。

其他子元素选择器

• :first-child
  – 选择第一个子标签
• :last-child
  – 选择最后一个子标签
• :nth-child
  – 选择指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
  – 选择指定类型的子元素

兄弟选择器

• 除了根据祖先父子关系，还可以根据兄弟
  关系查找元素。
• 语法:
  – 查找后边一个兄弟元素
  • 兄弟元素 + 兄弟元素{}
    – 查找后边所有的兄弟元素
  • 兄弟元素 ~ 兄弟元素{}

否定伪类

• 否定伪类可以帮助我们选择不是其他东西
  的某件东西。
• 语法:
  :not(选择器){};
• 比如p:not(.hello)表示选择所有的p元素但
  是class为hello的除外。

继承

• 就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式
  同样也会被子元素继承。
• 继承是指应用在一个标签上的那些CSS样式会同时被应用到其
  内嵌标签上。
• 比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。
• 当然并不是所有的样式都会被继承，这一点我们讲到具体样式
  时，再去讨论。

选择器的权重

• 在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个
  选择器选中。
• 比如：
  – body h1
  – h1
• 上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一
  致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，
  这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式，
  权重又是如何计算的呢？

权重的计算

• 不同的选择器有不同的权重值：
  – 内联样式：权重是 1000
  – id选择器：权重是 100
  – 类、属性、伪类选择器：权重是 10
  – 元素选择器：权重是 1
  – 通配符：权重是 0
• 计算权重需要将一个样式的全部选择器相加，比如上边的body
  h1的权重是20，h1的权重是10，所以第一个选择器设置的样
  式会优先显示。

最后的几点说明：
!important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；
如果比较后权重相同，那么后者覆盖前者，后渲染的胜出；
内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式；
CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器。
重中之重，1000/100/10/1这种权值系数的比较方式只是便于理解，真实情况下 10个class并不能逆转1个id。

盒子模型

盒子

• CSS处理网页时，它认为每个元素都包含在一
  个不可见的盒子里。
• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
• 我们只需要将相应的盒子摆放到网页中相应的
  位置即可完成网页的布局。

盒子模型

• 一个盒子我们会分成几个部分：
  – 内容区(content)
  – 内边距(padding)
  – 边框(border)
  – 外边距(margin)

内容区

• 内容区指的是盒子中放置内容的区域，也就是元素
  中的文本内容，子元素都是存在于内容区中的。
• 如果没有为元素设置内边距和边框，则内容区大小
  默认和盒子大小是一致的。
• 通过width和height两个属性可以设置内容区的大
  小。
• width和height属性只适用于块元素。

内边距

• 顾名思义，内边距指的就是元素内容区与边框以内
  的空间。
• 默认情况下width和height不包含padding的大小。
• 使用padding属性来设置元素的内边距。
• 例如：
  – padding:10px 20px 30px 40px
  – 这样会设置元素的上、右、下、左四个方向的内边距。
• padding:10px 20px 30px;
  – 分别指定上、左右、下四个方向的内边距
• padding:10px 20px;
  – 分别指定上下、左右四个方向的内边距
• padding:10px;
  – 同时指定上左右下四个方向的内边距
• 同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom分别用来指定四个方向的内边距。

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。
  • 可以使用border属性来设置盒子的边框：
    – border:1px red solid;
    – 上边的样式分别指定了边框的宽度、颜色和样式。
  • 也可以使用border-top/left/right/bottom分别指定上右下左
    四个方向的边框。
  • 和padding一样，默认width和height并包括边框的宽度。

边框的样式

• 边框可以设置多种样式：
  – none（没有边框）
  – dotted（点线）
  – dashed（虚线）
  – solid（实线）
  – double（双线）
  – groove（槽线）
  – ridge（脊线）
  – inset（凹边）
  – outset（凸边）

外边距

• 外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 用法和padding类似，同样也提供了四个方向的
  margin-top/right/bottom/left。
• 当将左右外边距设置为auto时，浏览器会将左右外
  边距设置为相等，所以这行代码margin:0 auto可
  以使元素居中。

display

• 我们不能为行内元素设置width、height、
  margin-top和margin-bottom。
• 我们可以通过修改display来修改元素的性
  质。
• 可选值：
  – block：设置元素为块元素
  – inline：设置元素为行内元素
  – inline-block：设置元素为行内块元素
  – none：隐藏元素（元素将在页面中完全消失）

visibility

– visibility属性主要用于元素是否可见。
– 和display不同，使用visibility隐藏一个元
素，隐藏后其在文档中所占的位置会依然
保持，不会被其他元素覆盖。
– 可选值：
– visible：可见的
– hidden：隐藏的

overflow

– 当相关标签里面的内容超出了样式的宽度
和高度是，就会发生一些奇怪的事情，浏
览器会让内容溢出盒子。
– 可以通过overflow来控制内容溢出的情况。
– 可选值：
– visible：默认值
– scroll：添加滚动条
– auto：根据需要添加滚动条
– hidden：隐藏超出盒子的内容

文档流

– 文档流指的是文档中可现实的对象在排列时所占用的位置。
– 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排
放元素，即为文档流。
– 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如
果右边不足以放下元素，元素则会另起一行，在新的一行中继
续从左至右摆放。
– 这样一来每一个块元素都会另起一行，那么我们如果想在文档
流中进行布局就会变得比较麻烦。

浮动

– 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
– 浮动使用float属性。
– 可选值：
– none：不浮动
– left：向左浮动
– right：向右浮动

• 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一
  个块级元素。
• 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元
  素时我们都会为其指定一个宽度
• 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕
  在元素的周围。
• 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
• 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他
  浮动元素。
• 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也
  就是浮动元素不会撑开父元素。
• 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个
  块元素。

清除浮动

• clear属性可以用于清除元素周围的浮动对元素的影响。
• 也就是元素不会因为上方出现了浮动元素而改变位置。
• 可选值：
  – left：忽略左侧浮动
  – right：忽略右侧浮动
  – both：忽略全部浮动
  – none：不忽略浮动，默认值

定位

• position属性可以控制Web浏览器如何以
  及在何处显示特定的元素。
• 可以使用position属性把一个元素放置到网
  页中的任何位置。
• 可选值：
  – static
  – relative
  – absolute
  – fixed

相对定位

• 每个元素在页面的文档流中都有一个自然位置。相
  对于这个位置对元素进行移动就称为相对定位。周
  围的元素完全不受此影响。
• 当将position属性设置为relative时，则开启了元素
  的相对定位。
• 当开启了相对定位以后，可以使用top、right、
  bottom、left四个属性对元素进行定位。

相对定位的特点

• 如果不设置元素的偏移量，元素位置不会发生改变。
• 相对定位不会使元素脱离文本流。元素在文本流中
  的位置不会改变。
• 相对定位不会改变元素原来的特性。
• 相对定位会使元素的层级提升，使元素可以覆盖文
  本流中的元素。

绝对定位

• 绝对定位指使元素相对于html元素或离他最近
  的祖先定位元素进行定位。
• 当将position属性设置为absolute时，则开启
  了元素的绝对定位。
• 当开启了绝对定位以后，可以使用top、right、
  bottom、left四个属性对元素进行定位

绝对定位的特点

• 绝对定位会使元素完全脱离文本流。
• 绝对定位的块元素的宽度会被其内容撑开。
• 绝对定位会使行内元素变成块元素。
• 一般使用绝对定位时会同时为其父元素指定一
  个相对定位，以确保元素可以相对于父元素进
  行定位。

固定定位

• 固定定位的元素会被锁定在屏幕的某个位置上，当
  访问者滚动网页时，固定元素会在屏幕上保持不动。
• 当将position属性设置为fixed时，则开启了元素的
  固定定位。
• 当开启了固定定位以后，可以使用top、right、
  bottom、left四个属性对元素进行定位。
• 固定定位的其他特性和绝对定位类似

z-index

• 当元素开启定位以后就可以设置z-index这
  个属性。
• 这个属性可以提升定位元素所在的层级。
• z-index可以指定一个整数作为参数，值越
  大元素显示的优先级越高，也就是z-index
  值较大的元素会显示在网页的最上层。

设置元素的背景

background-color

• background-color属性用来为元素设置背
  景颜色。
• 需要指定一个颜色值，当指定了一个颜色
  以后，整个元素的可见区域都会使用这个
  颜色作为背景色。
• 如果不设置背景颜色，元素默认背景颜色
  为透明，实际上会显示父元素的背景颜色。

background-image

• background-image可以为元素指定背景
  图片。
• 和background-color类似，这不过这里使
  用的是一个图片作为背景。
• 需要一个url地址作为参数，url地址需要指
  向一个外部图片的路径
• 例如：background-image: url(1.jpg)

background-repeat

• background-repeat用于控制背景图片的
  重复方式。
• 如果只设置背景图片默认背景图片将会使
  用平铺的方式，可以通过该属性进行修改。
• 可选值：
  – repeat：默认值，图片左右上下平铺
  – no-repeat：只显示图片一次，不会平铺
  – repeat-x：沿x轴水平平铺一张图片
  – repeat-y：沿y轴水平平铺一张图片

background-position

• background-position用来精确控制背景
  图片在元素中的位置。
• 可以通过三种方式来确定图片在水平方向
  和垂直方向的起点。
  – 关键字：top right bottom left center
  – 百分比
  – 数值

background-attachment

• background-attachment用来设置背景图
  片是否随页面滚动。
• 可选值：
  – scroll：随页面滚动
  – fixed：不随页面滚动

background

• background是背景的简写属性，通过这个
  属性可以一次性设置多个样式，而且样式
  的顺序没有要求。
• 例如：
  background: green url(1.jpg) no-repeat center center fixed;

CSS Sprite

• CSS Sprites 是一种网页图片应用处理方式。
• 通过这种方式我们可以将网页中的零星图
  片集中放到一张大图上。
• 这样一来，一次请求便可以同时加载多张
  图片，大大提高了图片的加载效率