CSS基础

一。【border 边框】 通过此属性可以指定元素边框的样式，宽度和颜色

1.1 border-style属性可以指定要显示的边框类型 允许以下值：

dotted 定义点线边框
dashed 定义虚线边框
solid 定义实线边框
double 定义双边框
groove 定义3d坡口边框，效果取决于border-color值
ridge 定义3d脊线边框， 效果取决于border-color值
inset 定义3dinset边框， 效果取决于border-color值
outset 定义outset边框， 效果取决于border-color值
none 定义无边框
hidden 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

1.2 border-width 属性指定四个边框的宽度:
可以将宽度设置为特点的大小（以px pt cm em 计）也可以使用以下三个预定义值之一：thin medium 或 thick
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

1.3 border-color 属性用于设置四个边框的颜色
name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"

1.4 为了缩减代码，也可以在一个属性中指定所有单独的边框属性。
border-width
border-style（必需）
border-color

1.5 圆角边框
border-radius 属性用于向元素添加圆角边框
border-radius: 5px; 值越大圆角越园

二。【margin 外边距】 可以简写为margin：25px 50px 75px 100px 分别为上右下左
还有单独属性设置，margin-top right bottom left

* 外边框合并 指得是当两个垂直外边距相遇时，他们将形成一个外边距，外边距的大小等于两者较大的值

三。【padding 内边距】 内边距属性用于在任何定义的边界内的元素周围生成空间 设置方式和margin一样，单位分别为length/px pt cm等单位 % 百分比的内边距 ；inherit 从父元素继承内边距。

* 【height和width 高度和宽度】 用于设置元素的高度和宽度，height和width属性不包括内边距，边框和外边距，它设置的是元素内边距，变宽以及外边距内的区域的高度和宽度 ;max-width 属性用于设置元素的最大宽度，当浏览器宽度小于此值时，浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

* 【框模型 所有 HTML 元素都可以视为方框】 

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

 

 对不同部分的说明：

• 内容 - 框的内容，其中显示文本和图像。
• 内边距 - 清除内容周围的区域。内边距是透明的。
• 边框 - 围绕内边距和内容的边框。
• 外边距 - 清除边界外的区域。外边距是透明的。

框模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

 

四。轮廓

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

注意：除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！

outline-style 属性指定轮廓的样式，并可设置如下值：

• dotted - 定义点状的轮廓。
• dashed - 定义虚线的轮廓。
• solid - 定义实线的轮廓。
• double - 定义双线的轮廓。
• groove - 定义 3D 凹槽轮廓。
• ridge - 定义 3D 凸槽轮廓。
• inset - 定义 3D 凹边轮廓。
• outset - 定义 3D 凸边轮廓。
• none - 定义无轮廓。
• hidden - 定义隐藏的轮廓。

CSS 轮廓宽度 

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

• thin（通常为 1px）
• medium（通常为 3px）
• thick （通常为 5px）
• 特定尺寸（以 px、pt、cm、em 计）

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：

• name - 指定颜色名，比如 "red"
• HEX - 指定十六进制值，比如 "#ff0000"
• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
• invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

CSS Outline - 简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：

• outline-width
• outline-style（必需）
• outline-color

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

• 颜色名 - 比如 "red"
• 十六进制值 - 比如 "#ff0000"
• RGB 值 - 比如 "rgb(255,0,0)"

文本颜色和背景色

在本例中，我们定义了 background-color 属性和 color 属性

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

text-align: center left right

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向： 类似文本翻转

 

文本垂直对齐

vertical-align 属性设置元素的垂直对齐方式。居中对齐还是居上或居下

 

文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：这样可以显示没有下划线的连接

text-decoration: overline; 文本上面出现下划线

text-decoration: line-through;文本贯穿一个线

text-decoration: underline;下面的出现下划线

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

text-transform: uppercase;

lowercase;

capitalize;

文字缩进

text-indent 属性用于指定文本第一行的缩进

  text-indent: 50px;

字母间距

letter-spacing 属性用于指定文本中字符之间的间距 可以为负值

行高

line-height 属性用于指定行之间的间距：1~*小数

字间距

word-spacing 属性用于指定文本中单词之间的间距。 单位px  可以为负值

空白

white-space 属性指定元素内部空白的处理方式。禁用元素内的文本换行

文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：接下来，向阴影添加颜色（红色）：然后，向阴影添加模糊效果（5px）：

text-shadow: 2px 2px 5px red;

通用字体族

在 CSS 中，有五个通用字体族：

• 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
• 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
• 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
• 草书字体（Cursive）- 模仿了人类的笔迹。
• 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

 

CSS font-family 属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

• normal - 文字正常显示
• italic - 文本以斜体显示
• oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

• normal - 文字正常显示
• italic - 文本以斜体显示
• oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

字体粗细

font-weight 属性指定字体的粗细：

font-weight: normal; lighter bold 900

字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

字体大小

font-size 属性设置文本的大小。

字体属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

 

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

• 无序列表（<ul>）- 列表项用的是项目符号标记
• 有序列表（<ol>）- 列表项用的是数字或字母标记

list-style-type 属性指定列表项标记的类型。

list-style-type: circle;

 list-style-type: square;

 list-style-type: upper-roman;

  list-style-type: lower-alpha;

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

在使用简写属性时，属性值的顺序为：

• list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
• list-style-position（指定列表项标记应显示在内容流的内部还是外部）
• list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

 

background属性可以设置一个元素的背景样式，当然前提是这个元素有具体的宽高值

语法格式：

　　background: color position size repeat origin clip attachment image;

所以backgroud这个属性不是单纯设置颜色，而是集成了几个属性

color：背景颜色值。这个属性会把整个元素添加颜色，而且处于最底层（在有背景图片的情况下就可以看出）。

 background-color: blue;可选值：默认是透明

2.position：背景图片的定位。如果没有图片设置，那么这个属性不起效果。

　　可选值：两个参数，水平位置和垂直位置。如果只有一个值，第二个值为“center”。

　　默认值是元素的左上顶角。可以使用位置关键字（top，right，bottom，left，center）。百分比（以元素大小为基值）。像素值。

size：图片尺寸。应用于图片。

　　可选值：两个数值，如果只有一个值，第二个值为auto。

　　默认是图片自身大小。可以使用像素值，百分百（以元素大小为基值）。

　　cover：等比例缩放图片，覆盖这个元素。类似与windows中桌面背景的“填充”。

　　contain：等比例缩放图片，适应元素的宽或者高。类似于windows中桌面背景的“适应”。

4.repeat：平铺方式。

　　　　repeat：完全平铺，复制图片把整个元素填满。（默认）

　　　　repeat-x：水平平铺，在水平方向复制并平铺。

　　　　repeat-y：垂直平铺，在垂直方向复制并平铺。

　　　　no-repeat：不平铺，只使用一张图片。

　　　5.origin：背景的参考区域。

　　　可选值：border-box，padding-box，content-box。

　　　6.clip：背景的可视区域。

　　　可选值：border-box，padding-box，content-box。

 

表格

某些情况下，表格看起来很小，可以设置width：100% 来达到填充表格铺满水平界面的目的

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

设置表格边框属性

对table直接设置border属性实际上设置的只是外边框，即只是让表格的四周有边框，而内部是没有的，这是因为表格的行和列都有自己的边框，要单独给td th设置border属性

 

width和hight 是table td 和th都有的属性，如果要创建仅占页面一半的表格，设置table的width：50%

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

 

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。

表格内边距

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：设置padding可以加大或者减少 表格内容和内边框之间的距离

 

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

border-bottom: 1px solid #ddd; 其实就是在添加了此属性的行或者列，在没有设置border的情况下，单独给下边框设置border。

可悬停表格

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

tr:hover {background-color: #f5f5f5;}

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

tr:nth-child(even) {background-color: #f2f2f2;}


下面可以设置行的背景颜色和字体颜色

th {
  background-color: #4CAF50;
  color: white;
}

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>