CSS | 安橙的博客

CSS相关知识体系构建

7-CSS 图像

1. 控制图像大小可以利用 width 和 height 属性来控制图像的大小。相较于使用 <img> 标签的属性来控制图像大小，使用 CSS 控制的好处是可以提前预留足够的空间，页面的其他部分不需要等待图像加载完毕即可显示出来。 2. 图像对齐可以使用 float 属性来对图像进行对齐。 3. 图像居中默认情况下，图像元素是内联元素，这意味着它们与周围的文本一起流动。为了让图像居中，应该首先将图像转换成块级元素，即 display: block。转换成块级元素后，可以使用 text-align 或者 margin-left: auto; margin-right:auto 的方式来居中。 4. 背景图像 background-image 属性允许在任何 HTML 元素之后放置图像。背景图像可以填满整个页面或者是填充页面的一部分，默认情况下，背景图像会自动重复并充满整个盒子。指向图像的路径放在 url(...) 中。 5. 重复图像 backgroud-repeat 属性可以指定图像的重复方式。 repeat 值表示背景图像在水平方向和垂直方向上重复，这是默认显示方式。 repeat-x 值表示背景图像只在水平方向上重复。 repeat-y 值表示背景图像只在垂直方向上重复。 no-repeat 表示背景图像不重复，只显示一次。 background-attachment 属性用于指定背景图像在用户滚动页面时的移动方式。 fixed 表示背景图像固定在页面中的一个位置。 scroll 表示背景图像随着用户上下滚动。 6. 背景图像定位如果背景图像不进行重复，可以使用 background-position 属性来指定背景图像在浏览器窗口中的位置。该属性通常有两个值，第一个值表示水平位置：left、right、center，第二个值表示垂直位置：top、bottom、center。如果只指定一个值，那么第二个值默认为 center。还可以使用一对像素值或者百分数，用来表示与浏览器窗口左上角的距离 7. 简写也可以使用 background 属性进行简写，顺序为： ...

6-CSS 定位

1. 核心概念 1.1. 构建块 CSS 采用盒子模型来处理每个 HTML 元素，盒子可以是一个块级盒子，也可以是一个内联盒子。块级盒子另起一行显示，并且在布局中就像是主体构建块。内联盒子在其周围的文本间浮动。可以通过设置每个盒子的宽度来控制其占用的空间。可以使用边框、外边距、内边距来将盒子分开。 1.2. 包含元素如果一个块级元素位于另一个块级元素内部，那么这个外部的框就被称为包含元素或父级元素。人们通常将若干个元素集中在一个 <div> 元素中。一个盒子可能被嵌套在其他多个块级元素中，但包含元素只能是它的直接父元素。 2. 控制元素的位置 CSS 中包含三种用于控制页面布局的定位机制：普通流、相对定位和绝对定位。在 CSS 中通过 position 属性表明定位机制，还可以使用 float 属性让元素浮动。普通流：每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下方，即使有足够的空间能够让两个元素并排显示。相对定位：相对定位将一个元素从它在普通流中所处的位置上移动，在它原来的位置向上、向下、像左、向右移动，但是不会影响周围元素的位置。绝对定位：元素位置相对于它的包含元素。它完全脱离了普通流，不会影响周围任何元素的位置，使用绝对定位的元素随着页面的滚动而移动。为了确定一个盒子的位置，可能还要使用盒子位移属性将盒子与上、下、左、右的距离告诉浏览器。此外还有固定定位和浮动元素两种定位方式。固定定位：固定定位是绝对定位的一种形式，但是它是将元素相对于浏览器窗口进行定位，而不是相对于包含元素进行定位。固定定位的元素同样不会影响周围元素的位置。浮动元素：浮动一个元素可以让其脱离普通流，并定位到其包含盒子的最左边或最右边的位置。这个浮动的元素会成为一个周围可以浮动其他内容的块级元素。任何元素从普通流脱离时，盒子都会产生重叠。可以使用 z-index 属性来控制哪个盒子显示在上层。 3. 普通流使用 position:static 可以指定普通流，不过这是默认设置，可以不用显示指定。使用普通流的块级元素都会换行显示。 4. 相对定位使用 position:relative 可以指定该元素进行相对定位。相对定位的元素以其在普通流中所处的位置为起点进行移动。可以使用 top、bottom、left、right 属性进行移动。 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <title>相对定位</title> <link rel="stylesheet" href="hello.css" type="text/css" /> </head> <body> <p>段落1</p> <p class="test">段落2（相对流）</p> <p>段落3</p> </body> </html> 1 2 3 4 5 6 7 8 body { width: 500px; } p.test { position: relative; left: 300px; bottom: 20px; } ...

5-CSS 列表、表格和表单

1. 项目符号样式 list-style-type 属性允许你控制项目符号的形状或样式。该属性可以应用到 <ol>、<ul> 和 <li> 元素的规则中。对于无序列表的 list-style-type 属性，可以使用如下值： none disc circle square 对于有序列表的 list-style-type 属性，可以使用如下值： decimal decimal-leading-zero lower-alpha upper-alpha lower-roman upper-roman 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>项目符号样式</title> <link rel="stylesheet" href="hello.css" type="text/css" /> </head> <body> <ul> <li>项目1</li> <li>项目2</li> </ul> </body> </html> 1 2 3 ul { list-style-type: circle; } ...

4-CSS 盒子

1. 导言可以通过 CSS 来设置盒子的外观，包括：控制盒子的大小创建盒子周围的边框设置盒子的外边距和内边距显示和隐藏盒子 2. 盒子的大小默认情况下，一个盒子的大小刚好容纳其中的内容。如果需要自定义盒子的大小，就需要用到 width 和 height 属性。指定盒子大小的常用方式有像素、百分数或者 em 值。使用百分数时，盒子的大小与浏览器窗口的大小相关，如果这个盒子被装入另外一个盒子，那么百分数的大小就是相对外部盒子而言。使用 em 时，盒子的大小将以盒子中文本的大小相关。 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>盒子的大小</title> <link rel="stylesheet" href="hello.css" type="text/css" /> </head> <body> <div> 外部的盒子 <p>内部的盒子</p> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 div { height: 300px; width: 60%; background-color: cadetblue; } p { height: 4em; width: 80%; background-color: darkorange; } ...

3-CSS 文本

1. 控制文本外观的属性可以将用来控制文本外观的属性分为两类： ...

2-CSS 颜色

1. 前景色 color 属性允许指定元素中文本的颜色，可以在 CSS 中使用以下方法来指定任何颜色： ...

1-CSS 简介

1. CSS 概述 CSS 允许你创建一系列规则。 CSS 创建的规则可以指定元素中的内容该如何显示。（例如，指定页面背景色为蓝色、字体为 Arial 字体等） 2. 设想每个元素周围都有一个盒子在 HTML 中，每个元素的周围都有一个看不见的盒子。 CSS 允许你创建规则，来控制每个盒子，以及盒子中的内容的呈现方式。可以利用 CSS 在任何盒子周围添加边框，指定它的宽度和高度以及设定背景颜色，也可以控制盒子内的文本样式。 3. CSS 将样式规则和 HTML 元素相关联 CSS 通过规则与 HTML 元素相关联的方式来工作。 CSS 规则用来控制指定元素中的内容如何显示。一条 CSS 规则包含两部分：一个选择器和一条声明。选择器表明要应用规则的元素。同一条规则可以应用在多个元素上，前提是你需要将这些元素名用逗号隔开。声明用来表明应该如何显示选择器指明的元素。声明可以分为两个部分（属性和值），并以冒号作为分隔符。 1 2 3 p { font-family: Arial; } 上述 CSS 规则中，p 是声明，表示该规则应用于所有的 p 标签上，大括号内的 font-family: Arial; 是声明，表示应该用 Arial 字体来显示。 4. CSS 属性会影响元素的显示方式 CSS 声明位于大括号中，而且每条声明都由两部分组成：属性和值，两者由冒号隔开。可以在一条声明内指定多个属性，各属性之间用分号隔开。 1 2 3 4 h1, h2, h3 { font-family: Arial; color: yellow; } 属性表明想要改变元素的那些方面，例如字体、宽度、高度等。值用来指定想要在所选元素上应用的属性，例如指定字体颜色为蓝色。 5. 使用外部 CSS <link> 元素位于 <head> 元素中，用来告诉浏览器在何处寻找用于定义页面样式的 CSS 文件，它是一个空元素。 href 表明 CSS 元素的路径。 type 表示该页面链接到的文档类型，对于 CSS 而言，则值为 text/css。 rel 表示 HTML 页面与被链接文件的关系，当链接到一个 CSS 文件时，该特性的值为 stylesheet。一个页面可以使用多个 CSS 样式表，这时需要多个 <link> 元素。 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <title>使用外部 CSS</title> <link rel="stylesheet" href="hello.css" type="text/css" /> </head> <body> <h1>你好</h1> </body> </html> 1 2 3 h1 { color: red; } ...