CSS学习总结
CSS学习
1.CSS简介
什么是CSS ？
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义显示样式样式通常存储在样式表中
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
尝试一下
2.CSS语法
CSS实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
（上图说明所有一级标题的颜色为blue，字体大小为12像素））
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
实例：
3.CSS选择器
1.元素选择器
元素选择器选择指定元素名称的所有元素
例：
p
{
background:blue;
}
2.ID选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
例：
#para1
{
text-align:center;
color:red;
}
3.Class选择器
- class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
- class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
- class不能以数字开头
例：
/*类选择器以.开始*/
.center {
text-align:center;
}
4.其余选择器
如 element,element 选择器、element element 选择器、element>element 选择器等
可参考菜鸟教程的CSS选择器参考手册
4.CSS导入方式
如何插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
1.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<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");}
2.内联样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p{
color: greenyellow;
}
.s{
border-radius: 10px;
}
</style>
<title>Document</title>
</head>
<body>
<p>001</p>
<button class="s">我是按钮</button>
</body>
</html>
结果显示：
在标签中，编写style属性，在其中编写样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4.多重样式优先级
一般多重样式优先级排序为：
- 内联样式
- 内部样式
- 外部样式表
- 浏览器缺省样式
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
5.CSS背景
| 属性 | 含义 | 案例 |
|---|---|---|
| background-color | 背景颜色 | 尝试一下 |
| background-image | 背景图片 | 尝试一下 |
| background-repeat | 背景图片不平铺 | 尝试一下 |
| background-position | 背景图片定位 | 尝试一下 |
| background-attachment | 背景固定或滚动 | 尝试一下 |
背景-简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
实例：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
6.CSS文本
| 属性 | 含义 | 案例 |
|---|---|---|
| color | 颜色 | 尝试一下 |
| text-align | 对齐方式 | 尝试一下 |
| text-decoration | 文本修饰 | 尝试一下 |
| text-transform | 文本转换 | 尝试一下 |
| text-indent | 文本缩进 | 尝试一下 |
其他实例
7.CSS字体
serif和sans-serif字体之间的区别
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
CSS字型
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
- 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
| Generic family | 字体系列 | 说明 |
|---|---|---|
| Serif | Times New Roman Georgia | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | Arial Verdana | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | Courier New Lucida Console | 所有的等宽字符具有相同的宽度 |
字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
多个字体系列是用一个逗号分隔指明：
实例
p{font-family:"Times New Roman", Times, serif;}
字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
8.CSS列表
CSS 列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
无序列表
-
Coffee
-
Tea
-
Coca Cola
-
Coffee
-
Tea
-
Coca Cola
有序列表
-
Coffee
-
Tea
-
Coca Cola
-
Coffee
-
Tea
-
Coca Cola
列表项标记
list-style ：设置所有的列表属性
list-style-image: 将图像设置为列表项标志
list-style-position: 设置列表中列表项标志的位置
list-style-type: 设置列表项标志的类型
9.CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
说明：
- Content(内容) - 盒子的内容，显示文本和图像等。
- Padding(内边距) - 内容和边框之间的内容。
- Border(边框) - 围绕在内边距和内容外的边框。
- Margin(外边距) - 边框以外和其他元素的区域。
元素的宽度和高度
重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
下面的例子中的元素的总宽度为300px：
实例
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
10.CSS边框
| 属性 | 含义 | 案例 |
|---|---|---|
| border | 设置宽度、样式、颜色 | 尝试一下 |
| border-style | 边框样式 | 尝试一下 |
| border-width | 边框宽度 | 尝试一下 |
| border-color | 边框颜色 | 尝试一下 |
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
