文章目录
一、啥是CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
什么是css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
二、语法
1. 基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
p {
color:red;
text-align:center;
}
CSS注释是以/*开始，*/结束，实例如下：
/*这是个注释*/
p{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
2. 选择器class/id
2.1 Class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 .号显示：
.center {text-align:center;}
当然也可以指定HTML元素使用class
例如，让所有p标签元素使用class = “center” 让该元素的文本居中：
p.center {text-align:center;}
2.2 id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
例如，下面以 id = “body” 为例：
#body{
text-align:center;
color:red;
}
3. 如何插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
3.1 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link > 标签链接到样式表。 < link > 标签在头部< head >标签内：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
3.2 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style > 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3.3 内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。不建议使用，除非这个样式仅仅在一个元素上
应用一次时。
<p style="color:sienna;margin-left:20px">这是一个段落。</p
4. 背景
CSS 背景属性用于定义HTML元素的背景。
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
背景颜色 实例：
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
body {background-color:#b0c4de;}
背景图片 实例：
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:
body {background-image:url('paper.gif');}
简写： 实例
为了简化属性的代码，可以将这些属性合并在一个属性中例如：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
如果想使用简写的话，属性值的依次顺序如下：
- background-color 背景颜色
- background-image 背景图片
- background-repeat 设置背景图像是否及如何重复
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-position 设置背景图像的起始位置
5. 文本
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
实例：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当ext-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐
实例:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
实例：
a {text-decoration:none;}
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写
实例：
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
实例：
p {text-indent:50px;}
6. 字体
字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
实例:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请使用正确的HTML标签，就< h1 > - < h6 >表示标题和< p >表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
设置字体大小像素
设置文字的大小与像素，完全控制文字大小：
实例：
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
7. 链接
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
实例：
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
实例：
a:link {text-decoration:none;} /* 没有下划线 */
a:visited {text-decoration:none;}/* 没有下划线 */
a:hover {text-decoration:underline;}/* 有下划线 */
a:active {text-decoration:underline;}/* 有下划线 */
背景颜色
背景颜色属性指定链接背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
8. 表格
表格边框
指定CSS表格边框，使用border属性
实例：
table, th, td{
border: 1px solid black;
}
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
实例：
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
table {
width:100%;
}
th{
height:50px;
}
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心
- right 右边
- left 左边
- center 中间
实例：
td{
text-align:right;
}
9. 盒子模型（Box Model）
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
用一张图片来解释：
盒子模型：
- 所有HTML元素可以看作盒子，封装周围的元素包括：边距，边框，填充，实际内容
- Margin(外边距) 清楚边框外的区域
- Border(边框） 围绕在内边距和内容外的边框。
- Padding(内边距) 清除内容周围的区域，内边距是透明的
- Content(内容) 盒子的内容，显示文本和图像
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
元素的高度和宽度
当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，还必须添加内边距，边框和外边距。
下面例子的元素总宽度为450px：
div {
width: 300px;
/* 下面每个，左右各50，共150*/
border: 25px solid green;
padding: 25px;
margin: 25px;
}
9.1 border边框
border-style值
边框宽度
可以通过 border-width 属性为边框指定宽度。
border-style属性可以有1-4个值：
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
实例：
p.one{
border-style:solid;
border-width:5px;
}
p.two{
border-style:solid;
border-width:medium;
}
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。
p.one{
border-style:solid;
border-color:red;
}
p.two{
border-style:solid;
border-color:#98bf21;
}
简写属性
上面的例子用了很多属性来设置边框。
也可以在一个属性中设置边框。
可以在"border"属性中设置：
- border-width
- border-style (required)
- border-color
实例：
border:5px solid red
全部属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
| border-radius | 设置圆角的边框。 |
9.2. margin外边距
marage:
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
margin-单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
实例：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性
margin属性可以有一到四个值。
-
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
-
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
-
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
-
margin:25px;
- 所有的4个边距都是25px
所有的CSS边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
9.3 padding填充
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
实例：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
- 上内边距是 25px
- 右内边距是 50px
- 下内边距是 25px
- 左内边距是 50px
简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
Padding属性，可以有一到四个值。
- padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
- padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
- padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
- padding:25px;
- 所有的填充都是25px
所有填充属性
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
三、小结
写本文主要是为了分享我的学习过程，也是给自己记个笔记，哪里忘记了，回来再看一眼，也可以很快的回想起来
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
