介绍
在 Web 开发中，HTML 为页面的内容提供结构和语义，CSS 控制页面的布局和外观。在日常生活中，我们每天接触着大量的 Web 内容。这些内容的视觉设计会影响页面的呈现和保证用户体验。
视觉设计在 Web 开发中是一个非常广泛的话题。它结合了排版、色彩理论、图形、动画和页面布局等。 本章我们将深入学习开发人员如何通过CSS基础来创建自己的视觉设计。
盒子模型
介绍
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
每个盒子由四个部分：边距（margin），边框（border），填充（padding），和实际内容（content）
我们可以通过浏览器的开发者工具观察页面的元素，会发现每个元素都是一个盒子：
内容 content
概念：由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。
如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。
内边距 padding
概念：由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。
边框 border
概念：由边框边界限制，内边距外部区域，是容纳边框的区域。
边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。
假如盒子上设有背景（background-color 或 background-image），背景颜色将会一直延伸至边框的外沿，背景图片在边框的内沿。此默认表现可通过 CSS 属性 background-clip 来改变。
边框相关属性
- border-width：指定边框的宽度(粗细)
- border-style: 指定边框的样式，常用可选值： none （无边框），hidden （与 "none" 相同。不过应用于表时除外，用于解决边框冲突），solid （单实线），double（双实线）
- border-color: 指定边框的颜色
.box {
border-width: 1px;
border-style: solid;
border-color: black;
}
- border 上面三个属性的合并简写形式
.box {
border: 1px solid black;
}
注意：边框允许单独设置四条边，属性为 border-top，border-button，border-left，border-right
案例：实现小三角形
外边距 margin
由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
display
概念：display 属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型可以控制其子元素的布局（例如：grid 或 flex）。
- 外部显式类型：
- block 元素生成一个块元素作用域，在正常流中生成元素前后的换行符（独占一行）。可以设置 width、 height、 margin 和 padding 属性。
- inline 该元素是个内联元素，这些元素不会在其前后生成换行符（不会独占一行）。在正常流中，如果有空间，下一个元素将位于同一行上。设置width,height属性无效。内联元素的margin属性只在水平方向会生效而padding都会生效。
- 遗留显式类型：
- inline-block 元素生成一个行内块元素。它将与周围的内容一起流动，元素不再独占一行但元素具有block的属性，可设置width、 height、 margin 和 padding 属性。
- 内部显式类型：
- table 该属性元素类似于HTML
元素。是一个块级元素。
- flex 弹性盒子，元素的行为类似于块元素，我们会在之后进行专门的讲解。
- grid 网格，元素的行为类似于块元素，我们会在之后进行专门的讲解。
请注意，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 line-height 属性决定，即使边框和内边距仍会显示在内容周围。
overflow
概念：CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。
.box { overflow: visible | hidden | scroll | auto | inherit; }- visible (默认)：内容不会被修剪，会呈现在元素框之外
.box { overflow: visible; }[图片上传失败...(image-3c9e5d-1623939781003)]
- hidden：内容会被修剪，并且其余内容不可见
.box { overflow: hidden; }[图片上传失败...(image-109411-1623939781003)]
- scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容
.box { overflow: scroll; }[图片上传失败...(image-5f392-1623939781003)]
- auto：由浏览器定夺，如果内容被修剪，就会显示滚动条
.box { overflow: auto ; }- inherit： 规定从父元素继承overflow属性的值
.box { overflow: inherit; }float 浮动
介绍
引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。
但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。
浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。
概念
float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。
.box { float: left | right | none | inherit }- left：元素向左浮动。
- right：元素向右浮动。
- none： 默认值。元素不浮动，并会显示在其在文本中出现的位置。
- inherit： 规定应该从父元素继承 float 属性的值。
注意：
- 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
- 浮动元素会脱离正常的文档布局流，并吸附到其父容器的float属性指定位置。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其剩余的空间。
- 注意浮动内容仍然遵循盒子模型诸如外边距和边框。通过设置外边距就能阻止其他元素紧贴浮动元素。
案例一：文字环绕
Simple float example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
案例二：首字下沉
This is my very important paragraph. I am a distinguished gentleman of such renown that my paragraph needs to be styled in a manner befitting my majesty. Bow before my splendour, dear students, and go forth and learn CSS!
案例三：多列浮动布局
介绍：浮动通常用于创建多个列布局，并且由于其广泛的浏览器支持已经有相当一段时间。尽管事实上，他们不是真的打算这个工作，并有一些奇怪的副作用必须处理。
2 column layout example
First column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
Second column
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Third column
Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.
注意: 我们所有列使用宽度百分比——这是一个很好的策略，因为它创建一个流式布局（liquid layout），一种调整为不同的屏幕尺寸，并在较小的屏幕尺寸下保持相同的列宽度比例。
清除浮动
-
为什么要清除浮动？
由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。
浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置, 阻止非浮动元素环绕。
非浮动元素margin不能正常显式。
-
清除浮动的方法：
- 在想让非浮动停止的元素上设置 clear 属性，（不能解决父元素塌陷问题和margin不能正常显式问题）
footer { clear: left | right | both; }- left：停止任何活动的左浮动
- right：停止任何活动的右浮动
- both：停止任何活动的左右浮动
给父元素添加overflow: hidden （不推荐）
给父元素内部底下添加一个新标签，给这个新标签设置clear:both;
利用伪元素:after 给父元素添加以下属性
父元素:after { content:""; display:block; /*将文本转为块级元素*/ clear:both; /*清除浮动*/ } 父元素 { zoom:1; /*这是针对于IE6/7的，因为IE6/7不支持:after伪类，这个神奇的zoom:1让IE6/7的元素可以清除浮动来包裹内部元素。*/ }- 利用双伪元素:before :after 清除浮动
父元素:after, 父元素:after { content:""; display:block; /*将文本转为块级元素*/ clear:both; /*清除浮动*/ } 父元素 { zoom:1; }
外边距重叠问题（补充）
块的上外边距(margin-top)和下外边距(margin-bottom)会合并为单个边距（左右边距不存在此问题），其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
有三种情况会形成外边距重叠：
- 同一层相邻元素之间,相邻的两个元素之间的外边距重叠。
下边界范围会...
...会跟这个元素的上边界范围重叠。
这个例子如果以为边界会合并的话，理所当然会猜测上下2个元素会合并一个100px的边界范围，但其实会发生边界折叠，只会挑选最大边界范围留下，所以这个例子的边界范围其实是87px。
- 没有内容将父元素和后代元素分开
如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
上边界重叠 87 - 空的块级元素
当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height 、内容设定为inline或是加上clear-fix的时候。
上边界范围是 87 ...
... 上边界范围是 87
注意：
- 上述情况的组合会产生更复杂的外边距折叠。
- 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的技术就是 100px -13px 的和 87px。
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
- 以上这些内容都是发生在Block-Level的元素，设定floating和absolutely positioned的元素完全不用担心边界重叠的问题。
css背景样式属性
background-color ( 背景颜色 )
属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的
div { background-color: red; } div { background-color: rgb(0, 160, 220); } div { background-color: rgba(0, 160, 220, 0.6); } div { background-color: #FFCC00; } div { background-color: #FC0; } div { background-color: hsl() } div { background-color: hsla(); }background-image (背景图片)
通过 background-image 属性允许在元素的背景中显示图像。
默认情况下，大图不会缩小以适应元素，因此我们只能看到它的一部分，而小图则是平铺以填充方框。
背景颜色和背景图片可以同时设置，背景图片会在背景颜色上方.box { background-image: url(balloons.jpg); }background-repeat (控制背景平铺)
使用 background-repeat 属性可以控制图像的平铺行为
.box { background-image: url(balloons.jpg); background-repeat: no-repeat | repeat-x | repeat-y | repeat; }- no-repeat：不重复平铺图片。
- repeat-x：水平重复平铺图片。
- repeat-y：垂直重复平铺图片。
- repeat (默认)：在两个方向重复平铺图片。
background-size (控制背景图片大小)
通过 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
.box { background-image: url(balloons.jpg); background-size:| cover | contain; } -
- cover: 保证宽高比的情况下放大图片占满盒子区域。在这种情况下，有些图像可能会跳出盒子外。
- contain: 保证宽高比的情况下适应盒子区域。在这种情况下，有些可能在图像的任何一边或顶部和底部出现间隙。
background-position (背景图像定位)
background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
.box { background-image: url(star.png); background-repeat: no-repeat; background-position:; } -
- x轴支持的关键字：left center right
- y轴支持的关键字：top center bottom
例：
/* 上面允许的值可以混合使用 */ .box { background-position: 10px 50%; } .box { background-position: 10% bottom; } .box { background-position: top right; }background-attachment （背景附加）
通过 background-attachment 可以指定当容器内容需要滚动时，背景如何滚动。
.box { background-attachment : scroll | fixed | local; }- scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动
- fixed: 此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
- local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)， 使元素的背景在页面滚动时或滚动了元素内容时背景都会滚动。
background-origin (背景定位)
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。.box { background-origin: padding-box | border-box | content-box; }- padding-box (默认)： 背景图像相对于内边距框左上角来定位。
- border-box： 背景图像相对于边框盒左上角来定位。
- content-box：背景图像相对于内容框左上角来定位。
background-clip (背景的绘制区域)
background-clip 属性规定背景的绘制区域。
.box { background-clip:: padding-box | border-box | content-box; }- padding-box (默认)： 背景绘制区域包含padding content。
- border-box： 背景绘制区域包含border padding content。
- content-box：背景绘制区域包含content。
background
background属性是以下属性的合并简写形式：
- background-color
- background-image
- background-attachment
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
注意：background一些规则，需要在简写背景属性时遵循，例如:
- background-color 只能开头指定。
- background-size 值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。
- 不需要设置的属性可以省略
例：
.box { background: yellow url(big-star.png) fixed center center / 400px 200px no-repeat; }背景多重值
在一个元素中可以设置多个背景，在单个属性值中指定多个background-image值，用逗号分隔每个值。
例：
.box { background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; }注意：background简写属性同样允许您一次设置所有不同的属性。
例：
.box { background: url(image3.png) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, pink url(small-star.png) center bottom / contain no-repeat, }注意：background简写多重值时背景颜色一定要放在最后一个多重值中。
文本相关属性
介绍：在 CSS 中可以通过设置文本属性定义文本的外观。如：改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
text-indent ( 缩进文本 )
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
p { text-indent: 5em; }注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
text-align ( 文本对齐方式 )
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
p { text-align: center; }- left(默认)：把文本排列到左边。
- right： 把文本排列到右边。
- center： 把文本排列到中间。
- justify： 实现两端对齐文本效果。（常用于打印输出）
- inherit： 规定应该从父元素继承 text-align 属性的值。
letter-spacing ( 字母或者字符的间距 )
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
h1 { letter-spacing:2px; } h2 { letter-spacing:-3px; }- normal(默认)：规定字符间没有额外的空间。
- length：定义字符间的固定空间（允许使用负值）。
- inherit：规定应该从父元素继承 letter-spacing 属性的值。
word-spacing ( 单词的间距 )
该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
p { word-spacing:25px; }- normal(默认)：定义单词间的标准空间。
- length：定义单词间的固定空间（允许使用负值）。
- inherit：规定应该从父元素继承 word-spacing 属性的值。
text-transform ( 文本转换 )
CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。
h1 { text-transform:uppercase; } h2 { text-transform:capitalize; } p { text-transform:lowercase; }- none (默认)：不改变文字。
- lowercase：定义无大写字母，仅有小写字母。
- uppercase： 定义仅有大写字母。
- capitalize： 文本中的每个单词以大写字母开头。
- initial： 使用默认值
- inherit： 使用父元素的text-transform值。
text-decoration ( 文本装饰 )
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
h1 { text-decoration:overline; } h2 { text-decoration:line-through; }- none (默认)： 定义标准的文本。
- underline：定义文本下的一条线。
- overline：定义文本上的一条线。
- line-through：定义穿过文本下的一条线。
- inherit：规定应该从父元素继承 text-decoration 属性的值。
white-space ( 文本空白 )
white-space 属性设置如何处理元素内的空白。
p { white-space: nowrap }- normal(默认):空白会被浏览器忽略。
- pre: 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
- nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。 - pre-wrap: 保留空白符序列，但是正常地进行换行。
- pre-line: 合并空白符序列，但是保留换行符。
- inherit: 规定应该从父元素继承 white-space 属性的值。
text-overflow
CSS 属性确定如何向用户发出未显示的溢出内容。它可以被剪切，显示一个省略号或显示一个自定义字符串。
[图片上传失败...(image-26bc42-1623939781003)]p { /* 要实现文本超出需要给容器一个固定大小后设置以下属性 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }- clip：此为默认值。这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为 text-overflow 属性的值。
- ellipsis：这个关键字的意思是“用一个省略号
…来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。
该属性还有其他属性值不常用我们就不在这里讲解了
color ( 文本颜色 )
这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）
p { color: #fc0 }- color_name： 规定颜色值为颜色名称的颜色（比如 red）。
- hex_number： 规定颜色值为十六进制值的颜色（比如 #ff0000）。
- rgb_number： 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
- hsl_number： 规定颜色值为 rgb 代码的颜色（比如 hsl(180,100%,50%)）。
- inherit： 规定应该从父元素继承颜色。
line-height (行高)
该属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。不允许使用负值。
[图片上传失败...(image-f2f7e9-1623939781003)].small { line-height:90% }- normal(默认)：设置合理的行间距。
- number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
- length：设置固定的行间距。
- %：基于当前字体尺寸的百分比行间距。
- inherit： 规定应该从父元素继承 line-height 属性的值。
字体相关
font-family ( 字体系列 )
font-family 规定元素的字体系列。
p { font-family:"Times New Roman",Georgia,Serif; }有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"字体优雅降级:
使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。
当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：
p { font-family: Helvetica, sans-serif; }通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。
font-style ( 字体风格 )
font-style 属性定义字体的风格,设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体
p.normal { font-style:normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; }- normal (默认):浏览器显示一个标准的字体样式。
- italic： 浏览器会显示一个斜体的字体样式。
- oblique： 浏览器会显示一个倾斜的字体样式。
- inherit： 规定应该从父元素继承字体样式。
注意：Italic是使用了文字本身的斜体字体，oblique是让没有斜体字体的文字做倾斜处理。所以有少量的不常用字体没有斜体属性，如果我们使用Italic则会没有效果。
font-variant ( 字体变形 )
属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
p.small { font-variant:small-caps; }- normal (默认值)：浏览器会显示一个标准的字体。
- small-caps：浏览器会显示小型大写字母的字体。
- inherit：规定应该从父元素继承 font-variant 属性的值。
font-weight ( 字体加粗 )
font-weight 属性设置文本的粗细。该属性用于设置显示元素的文本中所用的字体加粗。
p.normal { font-weight: normal; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; }- normal(默认值)：定义标准的字符。
- bold： 定义粗体字符。
- bolder： 定义更粗的字符。
- lighter： 定义更细的字符。
- 100~900： 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。(该属性值只有整百)
- inherit： 规定应该从父元素继承字体的粗细。
字体粗细属性是根据用户电脑上安装的字体相应匹配改变的。在很多情况下，由于系统作了最相近的匹配，因此看不出不同的 font-weight 值有什么区别。
font-size ( 字体大小 )
该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。
h1 { font-size: 250%; } h2 { font-size: 2rem; } p { font-size: 18px; }- length：把 font-size 设置为一个固定的值。
- %： 把 font-size 设置为基于父元素的一个百分比值。
font ( 字体简写方式 )
font 简写属性在一个声明中设置所有字体属性。此属性可以设置："line-height"指定行间距。
可以按顺序设置如下属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px arial,sans-serif; } p.ex3 { font:italic bold 12px/20px arial,sans-serif; }可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
你可能感兴趣的:(盒子模型、浮动、文本相关样式)
- table 该属性元素类似于HTML