CSS学习总结
- 1. CSS简介
- 2. CSS语法
- 3. CSS选择器
- 4. CSS导入方式
- 5. CSS 背景
- 6. CSS 文本
- 7. CSS 字体
- 8. CSS 列表
- 9. CSS 盒子模型
- 10. CSS 边框
- 11. 其他
- 参考
1. CSS简介
CSS指层叠样式表 (Cascading Style Sheets)- 样式定义如何显示 HTML 元素，即HTML管理网页的内容，CSS管理网页的样式
- 样式通常存储在样式表中
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2. CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
（上图说明所有一级标题的颜色为blue，字体大小为12像素）
- 选择器通常是需要改变样式的 HTML 元素
- 每条声明由一个属性和一个值组成，并以分号结束
- 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
3. CSS选择器
1. 元素选择器
元素选择器选择指定元素名称的所有元素
例：
p
{
background-color:yellow;
}
2. ID选择器
-
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
-
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
例：
/*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导入方式
1. 外部样式表
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部
例：
以该目录结构建立test.html文件和test.css文件
在test.html文件编写如下内容：
<!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">
<link rel="stylesheet" type="text/css" href="../CSS/test.css">
<title>Document</title>
</head>
<body>
<p>
我是段落
</p>
<div id="d">div</div>
</body>
</html>
在test.css文件编写如下内容：
p{
background-color: aqua;
}
#d{
border: 2px solid orange;
text-align: center;
}
运行结果：
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>
运行结果：
3. 内联样式
在标签中，编写style属性，在其中编写样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
例：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4. 多重样式优先级
一般多重样式优先级排序为：
- 内联样式
- 内部样式表或外部样式表
- 浏览器缺省样式
总的来说，优先级为“就近原则”，即谁进就用谁的样式
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 字体
| 属性 | 含义 | 案例 |
|---|---|---|
| font | 设置所有的字体属性 | 尝试一下 |
| font-family | 字体系列 | 尝试一下 |
| font-size | 字体大小 | 尝试一下 |
| font-style | 字体样式 | 尝试一下 |
| font-weight | 字体粗细 | 尝试一下 |
8. CSS 列表
| 属性 | 含义 | 案例 |
|---|---|---|
| list-style | 设置所有的列表属性 | 尝试一下 |
| list-style-image | 将图像设置为列表项标志 | 尝试一下 |
| list-style-position | 设置列表中列表项标志的位置 | 尝试一下 |
| list-style-type | 设置列表项标志的类型 | 尝试一下 |
9. CSS 盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
如：
说明：
- Content(内容) - 盒子的内容，显示文本和图像等。
- Padding(内边距) - 内容和边框之间的内容。
- Border(边框) - 围绕在内边距和内容外的边框。
- Margin(外边距) - 边框以外和其他元素的区域。
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
下面的例子中的元素的总宽度为300px：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
300px (宽)+50px (左 + 右填充)+50px (左 + 右边框)+50px (左 + 右边距) = 450px
因此，最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
10. CSS 边框
| 属性 | 含义 | 案例 |
|---|---|---|
| border | 设置宽度、样式、颜色 | 尝试一下 |
| border-style | 边框样式 | 尝试一下 |
| border-width | 边框宽度 | 尝试一下 |
| border-color | 边框颜色 | 尝试一下 |
更多属性：
11. 其他
参考
标签：总结,尝试,样式,元素,样式表,选择器,CSS 来源： https://blog.csdn.net/weixin_46628481/article/details/114652862
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。