css笔记01-css基础样式-font/border
2022-04-17 0 114 web前端社区
css简介
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。
CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS。
CSS 发展史
1990年代初 HTML 语言诞生，这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长，各式各样的样式语言也随之出现，不同的浏览器结合它们各自的样式语言来控制页面的显示效果。
经过不断的发展，HTML 中添加了越来越多的属性来满足页面设计者的需求，随着这些属性的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿，于是 CSS 便诞生了。
1994 年，哈坤·利提出了 CSS 的最初建议，并决定与正在设计 Argo 浏览器的伯特·波斯（Bert Bos）合作，共同开发 CSS。
1994 年底，哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议，之后又在 1995 年的 WWW 网络会议上再次提出了 CSS，在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器，哈坤·利也展示了支持 CSS 的 Arena 浏览器。
同年，W3C 组织（World WideWeb Consortium）成立，该组织对 CSS 的发展很感兴趣，为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织，并负责 CSS 标准的制定，至此 CSS 的发展走上正轨。
W3C，中文名为“万维网联盟”，也称为“W3C理事会”，由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。
发展至今，CSS 总共经历了 4 个版本的迭代：
CSS1.0
1996 年 12 月 W3C 发布了 CSS 的第一个版本——CSS1.0。
CSS2.0
1998 年 5 月，CSS2.0 版本正式发布。
CSS2.1
2004 年 2 月，CSS2.1 正式发布。该版本在 CSS2.0 的基础上略微做了改动，删除了许多不被浏览器支持的属性。
CSS3
早在 2001 年，W3C 就着手开始准备开发 CSS 的第三个版本，到目前为止该版本还没有最终定稿。虽然完整的 CSS3 标准还没有最终发布，但各主流浏览器已经开始支持其中的绝大部分特性。
CSS语法规则
CSS 样式由一系列规则组成，这些规则由 Web 浏览器解析，然后应用于 HTML 文档相应的元素上。CSS 样式规则由三个部分组成，分别是选择器、属性和值：
- 选择器：由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式，例如选择器
h1就表示为页面中的所有<h1>标签定义样式； - 属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、text-aglign（文本对齐方式）等，CSS 中提供了众多属性；
- 值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 blue或 #F1F1F1 等。
CSS注释
在代码中合理的添加注释是个非常好的习惯，通过注释您可以对代码加以解释说明（例如描述某段代码的功能、使用方法等），浏览器会自动忽略注释的内容。注释对开发人员非常重要，它可以帮助开发人员更快的理解代码的用途。
在 CSS 中注释以 / 开头（起始符），以 \/结尾（结束符），/*与*/是成对出现的，所有在/*与*/之间的内容都会被看作注释的内容。CSS 中的注释只有这一种写法，无论是在单行中使用还是跨越多行使用，只要保证注释的内容在/*与之间即可。
/*单行注释* /
/
多行注释
/
html引入css的方式
- 行内(内嵌)样式: style 引入样式,样式过多，冗余(重复的)样式太多
<div style="color:rgba(237, 78, 16, 0.8);font-size: 30px;">css 层叠样式表</div>
内联样式: 当前html文件的head头部的
<style>标签里面写入css样式表，样式和html在一起，文件比较大，冗余的样式较多。<html><head><style>.div1{font-family: aa,今年也要加油鸭,'c c';color:rgba(237, 78, 16, 0.8);font-size: 30px;font-weight: 400;font-style: italic;}</style></head></html>
外部样式: css 和 html文件分开，这样html可以更快的渲染出来。用link标签把html文件和css文件联系。
<link rel="stylesheet" type="text/css" href="./css/css01.css">
rel属性表示外部资源与当前文档之间的关系
type 是外部文件的类型
href 引入外部文件的地址，可以给本地路径或者url地址@import 导入样式表
使用@import来引用外部样式表，这一点与使用标签比较相似。其中 URL 为外部样式表的存放路径。
引用 CSS 时有以下几点需要注意：
- 在 HTML 文档中使用
@import时，@import需要定义在<style>标签中。如果<style>标签中还有其它的 CSS 样式，那么@import就必须定义在所有样式的最前面； @import同样可以在 .css 格式的文件中使用，但同样需要定义在所有样式的前面；@import是在 CSS2.1 中新增的功能，所以一些低版本的浏览器可能会不支持；- 在页面加载时，使用
<link>标签引用的样式文件会随页面同时加载，而使用@import引用的样式文件会等待页面加载完成后再加载。如果@import引用的样式文件过大、加载时间过长的话，在页面加载完成后就会出现没有样式的情况，影响用户体验。
字体font
1. font-family
font-family 属性用来设置元素内文本的字体。由于字体的种类成千上万，而且有些还不是免费的，因此我们的电脑上几乎不可能拥有所有的字体。为了最大程度的保证我们设置的字体能够正常显示，可以通过 font-family 属性定义一个由若干字体名称组成的列表，字体名称之间使用逗号,分隔，浏览器会首先尝试列表中的第一个字体，如果不支持则尝试下一个，以此类推。
| 值 | 描述 |
|---|---|
| family-name、 generic-family | family-name：字体名称，一个字体名称就代表一种字体，比如“微软雅黑”就是一种字体； generic-family：字体族，也就是某种类型的字体组合，一个字体族代表一种类型的字体，其中包含很多相似但又不同的字体，比如“sans-serif”就是一种无衬线字体，其中包含很多种相似的字体。 字体的默认值取决于浏览器设置 |
| inherit | 从父元素继承字体的设置 |
下表中列举了一些常用的字体族（generic-family）：
| 字体族 | 说明 | 字体 |
|---|---|---|
| serif | 有衬线字体，即在文字笔画的结尾添加特殊的装饰线或衬线 | “Lucida Bright”、”Lucida Fax”、Palatino、”Palatino Linotype”、Palladio、”URW Palladio”、serif |
| sans-serif | 无衬线字体，即在文字笔画结尾处是平滑的 | “Open Sans”、”Fira Sans”、”Lucida Sans”、”Lucida Sans Unicode”、”Trebuchet MS”、”Liberation Sans”、”Nimbus Sans L”、sans-serif |
| monospace | 等宽字体，即每个文字的宽度都是相同的 | “Fira Mono”、”DejaVu Sans Mono”、Menlo、Consolas、”Liberation Mono”、Monaco、”Lucida Console”、monospace |
| cursive | 草书字体，该字体有连笔或者特殊的斜体效果，会给人一种手写的感觉 | “Brush Script MT”、”Brush Script Std”、”Lucida Calligraphy”、”Lucida Handwriting”、”Apple Chancery”、cursive |
| fantasy | 具有特殊艺术效果的字体 | Papyrus、Herculanum、”Party LET”、”Curlz MT”、Harrington、fantasy |
body {font-family: "Lucida Calligraphy", cursive, serif, sans-serif;}
如果字体族或字体名称中包含空格或多个单词，则必须将它们使用引号包裹起来，例如”Times New Roman”、”Courier New”、”Segoe UI” 等，如果是在元素的 style 属性中使用则必须使用单引号。
在网页设计中最常用的字体族是 serif 和 sans-serif，因为它们适合阅读。在显示一些程序代码是通常使用等宽字体，这样可以使用程序代码看起来更加工整。
2. font-style
font-style 属性用来设置字体的样式，例如斜体、倾斜等，该属性的可选值如下：
| 值 | 描述 |
|---|---|
| normal | 默认值，文本以正常字体显示 |
| italic | 文本以斜体显示 |
| oblique | 文本倾斜显示 |
| inherit | 从父元素继承字体样式 |
italic 和 oblique 的效果是一样的，其实不一样，italic 显示的字体的斜体版本，而 oblique 则只是一个倾斜的普通字体。
3. font-weight
font-weight 属性能够设置字体的粗细，可选值如下：
| 值 | 描述 |
|---|---|
| normal | 默认值，标准字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100、200、300、400、500、600、700、800、900 | 由细到粗的设置字体粗细，100 为最细的字体，400 等同于 normal，700 等同于 bold |
| inherit | 从父元素继承字体的粗细 |
4. font-size
font-size 属性用来设置字体的大小（字号），可选值如下：
| 值 | 描述 |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | 以关键字的形式把字体设置为不同的大小，从 xx-small 到 xx-large 依次变大，默认值为 medium |
| smaller | 为字体设置一个比父元素更小的尺寸 |
| larger | 为字体设置一个比父元素更大的尺寸 |
| length | 以数值加单位的形式把字体设置为一个固定尺寸，例如 18px、2em |
| % | 以百分比的形式为字体设置一个相对于父元素字体的大小 |
| inherit | 从父元素继承字体的尺寸 |
5. font-variant
font-variant 属性可以将文本中的小写英文字母转换为小型大写字母（转换后的大写字母与转换前小写字母的大小相仿，所以称之为小型大写字母）。font-variant 属性的可选值如下：
| 值 | 描述 |
|---|---|
| normal | 默认值，浏览器会显示一个标准的字体 |
| small-caps | 将文本中的小写英文字母转换为小型大写字母 |
| inherit | 从父元素继承 font-variant 属性的值 |
6. font
font 属性与前面价绍的 background 属性的功能类似，通过 font 属性可以同时设置多个字体属性，不同的是，使用 font 属性需要遵循以下顺序：
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
在使用 font 属性时，有以下几点需要注意：
- 使用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；
- font 属性中的每个参数仅允许设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；
- 若要定义 line-height 属性，则需要使用斜线
/将 font-size 和 line-height 属性分开。
文本text
1. text-align
text-align 属性用来设置元素中文本的水平对齐方式：
| 值 | 描述 |
|---|---|
| left | 默认值，左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
| inherit | 从父元素继承 text-align 属性的值 |
当 text-align 设置为 justify 时，将拉伸每一行文本（增加字符之间的间距），以使每行文本具有相同的宽度（最后一行除外），这种对齐方式通常用于出版物，例如杂志和报纸。如果元素中的文本不足一行时，是无法实现两端对齐的（默认会以左对齐的效果显示）。只有当元素中的文本足够长，并且在元素中发生了自动换行时，才会将除最后一行以外的文本实现两端对齐。
2. text-decoration
text-decoration 属性用于设置或删除文本的装饰，最常用的做法就是使用 text-decoration 属性来删除
标签的默认下划线。
| 值 | 描述 |
|---|---|
| none | 默认值，标准文本，没有额外装饰，可以用来删除已有的文本装饰 |
| underline | 在文本下方添加一条下滑线 |
| overline | 在文本上方添加一条上滑线 |
| line-through | 在文本的中间定义一条横向贯穿文本的线（类似于删除线） |
| blink | 定义闪烁的文本（目前主流浏览器不再支持） |
| inherit | 从父元素继承 text-decoration 属性的值 |
3. text-transform
text-transform 属性用来控制文本中英文字母的大小写，通过该属性您可以在不修改原文的基础上，将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式。
| 值 | 描述 |
|---|---|
| none | 默认值，以原文显示，对文本中的英文不做更改 |
| capitalize | 将文本中的每个单词更改为以大写字母开头的形式 |
| uppercase | 将文本中的英文字母全部更改为大写 |
| lowercase | 将文本中的英文字母全部更改为小写 |
| inherit | 从父元素继承 text-transform 属性的值 |
4. text-indent
text-indent 属性用来为元素中的文本添加首行缩进的效果
| 值 | 描述 |
|---|---|
| length | 以固定的值加单位的形式（例如 2em）定义缩进距离，默认值为 0 |
| % | 以基于父元素宽度的百分比来定义缩进距离 |
| inherit | 从父元素继承 text-indent 属性的值 |
5. line-height
line-height 属性用来设置文本的行高：
| 值 | 描述 |
|---|---|
| normal | 默认值，使用默认的行高，不对行高进行额外设置 |
| number | 以具体的数字设置行高，这个数字会与当前的字体大小相乘，并将得到的值设置为行高 |
| length | 以数字加单位的形式设置固定的行高 |
| % | 以百分比的形式设置基于当前字体尺寸百分比的行高 |
| inherit | 从父元素继承 line-height 属性的值 |
6. letter-spacing
letter-spacing 属性用来设置字符之间的间距，属性的可选值如下：
| 值 | 描述 |
|---|---|
| normal | 默认值，表示字符之间没有额外的间距 |
| length | 以数值加单位的形式设置字符之间的固定间距（允许使用负值） |
| inherit | 从父元素继承 letter-spacing 属性的值 |
7. word-spacing
word-spacing 属性用来设置单词与单词之间的间距，但对中文无效，属性的可选值如下：
| 值 | 描述 |
|---|---|
| normal | 默认值，表示单词与单词之间没有额外的间距 |
| length | 以数值加单位的形式设置单词与单词之间的固定间距（允许使用负值） |
| inherit | 从父元素继承 word-spacing 属性的值 |
9. vertical-align
vertical-align 属性用来定义元素内文本的垂直对齐方式：
| 值 | 描述 |
|---|---|
| baseline | 默认值，将元素的基线与父元素的基线对齐 |
| sub | 下标对齐，将元素的基线相对于父元素的基线降低 |
| super | 上标对齐，将元素的基线相对于父元素的基线升高 |
| top | 顶部对齐，将元素行内框的顶端与行框的顶端对齐 |
| text-top | 文本顶部对齐，把元素的顶端与父元素字体的顶端对齐 |
| middle | 居中对齐，通常使用在图片上，将图片垂直方向的中线与文本的中线（文字元素行内框的中线）对齐 |
| bottom | 底部对齐，将元素行内框的顶端与行框的底端对齐 |
| text-bottom | 文本底部对齐，是将元素行内框的底端与行框的底线对齐 |
| length | 以数字加单位的形式设置元素基线距离父元素基线的距离（可以为负值） |
| % | 使用 “line-height” 属性的百分比值来排列此元素，允许使用负值 |
| inherit | 从父元素继承 vertical-align 属性的值 |
10. white-space
white-space 属性用来设置如何处理元素内的空白：
| 值 | 描述 |
|---|---|
| normal | 默认值，忽略文本中的空白 |
| pre | 保留文本中的空白，类似于<pre>标签的效果 |
| nowrap | 文本会在一行中显示，不会自动换行，直到遇到<br>标签为止 |
| pre-wrap | 保留文本中的空白，但是正常地进行换行 |
| pre-line | 合并文本中的空白，但是保留换行符 |
| inherit | 从父元素继承 white-space 属性的值 |
11. direction
direction 属性用来设置文本的方向：
| 值 | 描述 |
|---|---|
| ltr | 默认值，文本按从左到右的方向输出 |
| rtl | 文本按从右到左的方向输出 |
| inherit | 从父元素继承 direction 属性的值 |
white-space、word-wrap、word-break的区别：
white-space: nowrap让一段文本不换行，在一行内显示。word-wrap: normal 使一个单词或URL不折行，在一行内显示。
word-wrap: break-word在容器边界自动换行，会把整个长单词看成一个整体放到下一行，而不会把单词截断。word-break: break-all在行末宽度不够显示整个单词时，会把单词截断。
word-break：
word-break属性用来规定自动换行的处理方式，它不仅可以让浏览器在半角空格或连字符的后面换行，也可以实现在任意位置换行，可选值有 normal | keep-all | break-all，默认值为 normal。
normal 表示根据语言自身的换行规则，确定换行方式，中文将容器边界处的汉字换到下一行，西方文字则将整个单词换到下一行；keep-all 表示不允许把单词截断，只能在半角空格或连字符处换行；break-all 允许把单词截断，在单词内换行。
边框 border
1. border-style
border-style 属性用来设置元素中所有边框的样式，或者单独为某个边框设置样式，其语法格式如下：
border-style: border-top-style border-right-style border-bottom-style border-left-style;
| 值 | 描述 |
|---|---|
| none | 无边框 |
| hidden | 隐藏边框，与 “none” 类似 |
| dotted | 定义点状虚线边框 |
| dashed | 定义虚线边框 |
| solid | 定义实线边框 |
| double | 定义双实线边框，双实线边框的宽度等于 border-width 的值 |
| groove | 定义 3D 凹槽边框，其效果取决于 border-color 的值 |
| ridge | 定义 3D 垄状边框，其效果取决于 border-color 的值 |
| inset | 定义 3D 嵌入边框，其效果取决于 border-color 的值 |
| outset | 定义 3D 突出边框，其效果取决于 border-color 的值 |
| inherit | 从父元素继承边框样式 |
border-style 属性有多种不同的用法：
- 如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的样式；
- 如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
- 如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
- 如果只提供一个参数，这个参数将同时作用在四个边框上。
除了可以使用 border-style 属性设置元素的边框样式外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的样式：
- border-bottom-style：设置下边框的样式；
- border-top-style：设置上边框的样式；
- border-left-style：设置左边框的样式；
- border-right-style：设置右边框的样式。
2. border-width
border-width 属性用来设置元素中所有边框的宽度，或者单独为某个边框设置宽度，其语法格式如下：
border-width: border-top-width border-right-width border-bottom-width border-left-width;
| 值 | 描述 |
|---|---|
| thin | 定义较细的边框 |
| medium | 默认值，定义中等宽度的边框 |
| thick | 定义较粗的边框 |
| length | 使用数值加单位的形式设置具体的边框宽度，例如 2px |
| inherit | 从父元素继承边框的宽度 |
thin、medium、thick 三个关键字并没有固定的值，它们的值取决于浏览器，例如在 Chrome 浏览器中三个关键字的值分别为 1px、3px、5px。
同 border-style 属性相同，border-width 属性同样支持多种不同的用法：
- 如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的宽度；
- 如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
- 如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
- 如果只提供一个参数，这个参数将同时作用在四个边框上。
除了可以使用 border-width 属性设置元素的边框宽度外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度：
- border-bottom-width：设置下边框的宽度；
- border-top-width：设置上边框的宽度；
- border-left-width：设置左边框的宽度；
- border-right-width：设置右边框的宽度。
3. border-color
border-color 属性用来设置元素中所有边框的颜色，或者单独为某个边框设置颜色，其语法格式如下：
border-color: border-top-color border-right-color border-bottom-color border-left-color;
| 值 | 描述 |
|---|---|
| color_name | 使用颜色名称来设置边框的颜色，例如 red |
| hex_number | 使用颜色的十六进制值来设置边框的颜色，例如 #ff0000 |
| rgb_number | 使用 rgb() 函数设置边框的颜色，例如 rgb(255,0,0) |
| transparent | 默认值，设置边框颜色为透明 |
| inherit | 从父元素继承边框的颜色 |
同 border-style 属性相同，border-color 属性同样支持多种不同的用法：
- 如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的颜色；
- 如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
- 如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
- 如果只提供一个参数，这个参数将同时作用在四个边框上。
除了可以使用 border-color 属性设置元素的边框颜色外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的颜色：
- border-bottom-color：设置下边框的颜色；
- border-top-color：设置上边框的颜色；
- border-left-color：设置左边框的颜色；
- border-right-color：设置右边框的颜色。
4. border
border 属性是上面介绍的 border-width、border-style、border-color 三种属性的简写，使用 border 属性可以同时定义上述三个属性，语法格式如下：
border: border-width border-style border-color;
其中 border-width 用来设置边框的宽度；border-style 用来设置边框的样式；border-color 用来设置边框的颜色。
border 属性的三个参数（border-width、border-style、border-color）并不需要遵守固定的顺序，将它们的顺序打乱也是可以的。另外，也可以省略其中的某个参数，例如
border: soild red;，省略的参数将被设置为该参数的默认值。
除了可以使用 border 属性统一设置边框的宽度、样式、颜色外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度、样式、颜色：
- border-bottom：统一设置下边框的宽度、样式、颜色；
- border-top：统一设置上边框的宽度、样式、颜色；
- border-left：统一设置左边框的宽度、样式、颜色；
- border-right：统一设置右边框的宽度、样式、颜色。