CSS
文章
01 简介
什么是 CSSCSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 CSS 是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。 发展历史从 1990 年代初 HTML 被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着 HTML 的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计 CSS。 当时已经有过一些样式...
02 使用方法
第一种内联样式通过HTML元素的style属性来设置CSS样式，语法如下: 1style="css属性:css属性值;" 示例代码: 12345678910<!DOCTYPE html><html> <head> <title>01_第一种使用方式.html</title> </head> <body> <!-- style="css属性:css属性值;" --> <div style="color:red;" >atguigu</div> </body></html> 第二种内联样式通过HTML页面的style元素来设置CSS样式，语法如下: 12345<style type="text/css"> 选择器 { 属性名 : 属性值; }</style> 示例代码: 12345678910...
03 盒子模型
什么是盒子模型盒子模型，也可以称为框模型。 所有 HTML 元素可以看作盒子。在 CSS 中，”box model” 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 不同部分的说明: Margin（外边距）: 清除边框区域。Margin没有背景颜色，它是完全透明。 Border（边框）: 边框周围的填充和内容。边框是受到盒子的背景颜色影响。 Padding（内边距）: 清除内容周围的区域。会受到框中填充的背景颜色影响。 Content（内容）: 盒子的内容，显示文本和图像。 为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。 元素的宽度和高度下面的例子中的元素的总宽度为 300px: 1234width:250px;padding:10px;border:5px solid gray;margin:10px; 完整的 HTML 代码如下: 1234567891011121314151617181920212223<!DOCTYPE html>&...
04 语法格式
语法格式1选择器 {属性名称 : 属性值; 属性名称 : 属性值;...} 语法特点: CSS声明总是以键值对(key\value)形式存在。 CSS声明总是以分号(;)结束。 声明组以大括号({})括起来。 为了让CSS可读性更强，每行只描述一个属性。 CSS 注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束。 1234567<style type="text/css"> /* 这是一个注释 */ div { /* 这是另一个注释 */ color : red; }</style> 值得注意的问题值的不同写法和单位例如在设置字体颜色时，以下几种方式效果相同。 第一种方式 1#show1 {color : red;} 第二种方式 1#show2 {color : #ff0000;} 像上面这种使用十六进制设置颜色时，如果两两相同，可以写成如下格式: 1#show2 {...
05 选择器
元素选择器元素选择器就是通过 HTML 页面的元素名称来设置 CSS 样式。具体语法如下: 1元素名称 { 属性名 : 属性值; } 示例代码: 1div {color : red; } 类选择器类选择器就是通过 HTML 元素的 class 属性值来设置 CSS 样式。具体语法如下: 1.class属性值 { 属性名 : 属性值; } 示例代码: 1.myDiv {color : red; } ID选择器ID选择器就是通过 HTML 元素的 id 属性值来设置 CSS 样式。具体语法如下: 1#id属性值 { 属性名 : 属性值; } 示例代码: 1#show1 {color : red; } 属性选择器属性选择器就是通过 HTML 元素的属性名称来设置 CSS 样式。具体语法如下: 1[属性名称] { 属性名 : 属性值; } 示例代码: 1[name] {color : red; } 选择器 描...
06 位置
CSS 的 position 定位属性允许自定义元素在 HTML 页面的位置，但需要先开启元素在 HTML 页面中的定位。 值得注意的是: 元素在 HTML 页面中默认是不开启定位的。 CSS 定位属性提供了四种方式的定位效果: static: 默认值，表示元素为静态定位。 absolute: 表示元素为绝对定位。 fixed: 表示元素为固定定位。 relative: 表示元素为相对定位。 当设置元素的 position 定位属性为非默认值时，CSS 提供了上、右、下和左四个方向的偏移量完成元素的位置设置。 top: 表示当前元素到上边的距离。 right: 表示当前元素到右边的距离。 bottom: 表示当前元素到下边的距离。 left: 表示当前元素到左边的距离。 绝对定位 属性值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 元素开启绝对定位后，与浮动效果类似: 元素会脱离文档流。 元...
07 伪类
CSS 伪类用于向某些选择器添加特殊的效果。 属性 描述 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 锚伪类1234a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ :first-child伪类1p:first-child {font-weight: bold;} 选择器的优先级在实际开发中，经常会为同一个标签设置多个样式。使用不同方式的选择器，由...
08 可见性
CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。 display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。 visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，会影响布局。 display 属性 属性值 描述 none 此元素不会被显示。 当将一个元素的 CSS 属性 display 设置为 none 时，该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。 在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下: 1234567891011121314151617181920212223<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #d1 { ...
09 浮动
文档流将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。 文档流是 HTML 页面的底层结构，HTML 页面创建的元素默认都在文档流中。 块级元素 块级元素在文档流中自上向下排列（垂直方向排列） 块级元素在文档流中默认的宽度是父元素的100% 块级元素在文档流中默认的高度被是所有子元素的高度总和 内联元素 内联元素在文档流中自左向右水平排列（水平方向排列） 内联元素的宽度和高度都由内容确定 值得注意的是: 如果在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列。 有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。 值得注意的是: 在 IE 浏览器中浮动元素也存在于文档流中。 浮动CSS 的 Float（浮动），会使元素脱离文档流，向左或向右移动。其他元素会被重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 属性值 描述 none 默认值。元素不浮动。 left 元素向左浮动。 right 元素向右浮动。 设置元素浮动效果时，以下四种情况比较特殊: 子元素...
10 块级元素
大多数 HTML 元素被定义为块级元素或内联元素。 10. 块级元素块级元素在浏览器显示时，通常会以新行来开始（和结束）。 我们已经学习过的块级元素有: <h1>, <p>, <ul>, <table> 等。 值得注意的是: <p> 标签中不能包含任何块级元素。 <div> 元素<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。 值得注意的是: <div> 取代了使用表格定义布局的老式方法。 内联元素内联元素在显示时通常不会以新行开始。 我们已经学习过的内联元素有: <td>, <a>, <img> 等。 值得注意的是: <a> 标签中不能包含 <a> ...
