01 简介
CSS （Cascading Style Sheet）指的是层叠样式表，可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中，即实现一张HTML页面可切换多个样式。
CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
CSS 从 HTML 页面中删除了样式格式！
样式定义通常保存在外部 .css 文件中。通过使用外部样式表文件，更改一个文件即可更改整个网站的外观！
02 语法
e.g.
color是属性，red是属性值text-align（水平对齐）是属性，center是属性值-
<!DOCTYPE html>是一个文档类型声明，它告诉浏览器当前文档应该使用哪个 HTML 版本进行渲染。这个声明应该放在 HTML 文档的最开始，位于<html>标签之前。在 HTML5 中，
<!DOCTYPE html>是唯一需要的文档类型声明。它告诉浏览器这个文档是一个 HTML5 文档。使用这个声明可以确保浏览器以标准模式渲染页面，避免触发怪异模式或兼容模式，这些模式可能会导致页面布局和样式出现问题。
03 选择器
- 元素选择器 element
- id选择器 #id
- 类选择器 .class
- 选择有特定 class 属性的 HTML 元素 .center
- 指定只有特定的 HTML 元素会受类的影响 p.center（具有 class="center" 的 <p> 元素）
- HTML 元素也可以引用多个类
<p class="center large"> 这个段落引用两个类：center、large </p>
- 通用选择器 *
- 分组选择器 h1, h2, p
- 路径选择器
04 使用
三种插入样式表的方法：
-
外部 CSS
- 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用
- 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
- 外部 .css 文件不应包含任何 HTML 标签。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
rel: 定义了当前文档与被链接文档之间的关系。在链接 CSS 样式表的上下文中，rel="stylesheet"表示被链接的文档是一个样式表。type: 指定被链接文档的 MIME 类型。对于 CSS 样式表，MIME 类型通常是text/css。在现代浏览器中这个属性通常可以省略，因为浏览器能够根据文件的扩展名（.css）来推断出正确的 MIME 类型。ref: 指定被链接文档的 URL。在这个例子中，它指向名为mystyle.css的外部样式表文件。
-
内部 CSS(一张 HTML 页面拥有唯一的样式时使用)
内部样式在 HTML 页面的 <head> 部分中的 <style> 元素中进行定义
-
行内 （内联）CSS（用于为单个元素应用唯一的样式）
行内样式在相关元素的 "style" 属性中定义：
<h1 style="color:blue;text-align:center;">This is a heading</h1>
优先级
不同层的优先级：行内 > 外部和内部样式 > 继承父元素 > 默认
- 简单选择器或属性选择器数量多的 > 数量少的
- 顺序靠后的 > 顺序靠前的
05 注释
CSS 注释以 /*开始，以 */ 结束，注释能横跨多行，
且 HTML 注释（<!-- -->）和 CSS 注释可混用。
06 颜色
CSS 中，可以使用颜色名称来指定颜色，包括背景色（background-color）、文本颜色（color）、边框颜色（border）
此外，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色。
07 背景
属性：（所有属性参见CSS 背景简写）
- background-color（任何元素均可设置背景颜色）
- background-image
p { background-image: url("paper.gif"); } - background-repeat
/*图像仅在水平方向重复*/ { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }/*图像仅在垂直方向重复则将x改为y*/
/*图像仅显示一次*/
{ background-image: url("tree.png"); background-repeat: no-repeat; } - background-attachment（指定背景图像是应该滚动还是固定的，固定的即不会随页面的其余部分一起滚动而消失）
固定背景图像：
background-attachment: fixed;
滚动背景图像：
background-attachment: scroll;
- background-position
background-position: right top /*右上方*/
简写属性：
{
background: #ffffff url("tree.png") no-repeat right top;
}
08 边框
（所有边框属性参见CSS 圆角边框）
【注意：除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！】
-
border-style
特别地，
当border-style设置一个值，则应用于四条边；
当border-style设置两个值，则第一个值应用于上下边框，第二个值应用于左右边框；
当border-style设置三个值，则第一个值应用于上边框，第二个值应用于左右边框，第三个值应用于下边框；
当border-style设置四个值，则按上、右、下、左的顺序应用。
【注：border-width 和 border-color 也同样适用】
-
border-width：指定四个边框的宽度
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。并且同样可以设置一到四个值（用于上边框、右边框、下边框和左边框）
-
border-color：指定四个边框的颜色
同样可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
单独的边
可指定每个边框（顶部、右侧、底部和左侧）
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
简写属性：border
只为一个边指定所有单个边框属性：
{
border-left: 6px solid red;
background-color: lightgrey;
}
圆角边框：border-radius
{
border: 2px solid red;
border-radius: 5px;
}
09 外边距（边框与页面边界的距离）
margin-topmargin-rightmargin-bottommargin-left
简写属性：margin
margin有四个值：上外边距、右外边距、下外边距、左外边距
（设置的值的个数不同，显示也不同，参见border）
不同类型的值
（其中auto使元素水平居中）
合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（详情参见CSS 外边距合并）
10 内边距：padding
用于在任何定义的边界内的元素内容周围生成空间，类外边距，其中值的类型除了auto均可使用。
内边距与元素宽度
width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。
若要保持元素的宽度，无论填充量如何，那么可以使用 box-sizing 属性。如果增加内边距，则可用的内容空间会减少。
{
width: 300px;
padding: 25px;
box-sizing: border-box;
}
11 高度和宽度
height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
最大宽度max-width
可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。
当浏览器窗口小于元素的宽度时，会发生图像无法完全显示的问题。然后，浏览器会将水平滚动条添加到页面。
扫一扫
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
