【前端学习之HTML&CSS】-- CSS第二篇 -- 常见样式声明

【前端学习之HTML&CSS】-- CSS第二篇 – 常见样式声明

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章主要介绍了多种多样的常见样式声明，包括color、background、font、text、width、height、letter等文字乃至元素位置的样式声明。

常见样式声明

1. color:

元素内部的文字颜色；

第一种写法：预设值，定义好的单词
第二种写法：三原色，光学三原色（红绿蓝），每一种颜色可以用一个数值（0-255）表示，三个颜色的数值组合 – 色值；
【可以通过在elements style中点击颜色方块，可以在下方切换hex和rgb来获得色值】

淘宝红：#ff4400(三个颜色个位和十位都相同可以简写一位)、马尔斯绿：#008c8c
黑色：#000000、 白色：#ffffff、 红色：#ff0000、 绿色：#00ff00、 蓝色：#0000ff、
紫色：#ff00ff、 青色：#00ffff、 黄色：#ffff00、 灰色：#cccccc

<!-- 两种书写方式 -->
<!-- rgb -->
<p style="color: rgb(0, 255, 0);">color代表文字颜色(三原色rgb)</p>
<!-- hex十六进制：#红绿蓝，数字各两位 -->
<p style="color: #008c8c;">color代表文字颜色(三原色hex)</p>

2. background-color/background:

元素背景颜色

3. font-size：

元素内部文字的尺寸大小

两种单位：
像素px：简单的理解为文字的高度占多少个像素；
分辨率其实指的就是1920*1080个像素点，点越多自然越清晰
em：相对单位，相对于父元素的字体大小，如可能是body字体的几倍，当父元素没有定义字体大小时，会继承该父元素的父元素字体大小，如HTML字体的大小 – 基准字号；
【可以通过element style上方的computed栏查询字体绝对大小】

user agent用户代理UA：浏览器
例如：H1标题所拥有的CSS样式是浏览器默认带有的样式，foot-size：2em

	/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;

/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>，百分比值 */
font-size: 80%;

font-size: inherit;

4. font-weight：

文字粗细程度，取值可以取数字/预设值；
【bold：700（加粗）、normal：400（普通），并且只有一些特别的数值能够被适应，
如400、500就不行，需要字体格式适配才行，常用就是400/700】

strong元素：默认就有加粗的效果;strong表示重要不可忽略；

5. font-family：

文字类型，很多取值；

eg. 微软雅黑、arial，这里的取值用户计算机必须存在才有效；

故这里也存在一种写法：书写多个字体，匹配不同环境,匹配不了就选择下一种字体；

<p style="font-family: consolas,翩翩体-简,微软雅黑,arial,sans-serif;"></p>
<!-- sans-serif,字体边缘没有经过修饰，非呈现字体，通用字体；宋体即为呈现字体，用于印刷 -->

6. font-style：

字体样式，通常用于设置斜体：italic

i元素，默认样式是倾斜字体；
语义是：特殊文本，如术语等；但实际上中通常用于用它表示一个图标；
em元素，默认样式也是斜体；
语义是，强调该内容；

7. text-decoration：

文本修饰，即给文本加线：

line-through：中间加线，穿过文字；
overline：上划线；
underline：下划线；
none：无；

a元素：underline + -webkit-link（color）；
del元素：废弃/错误的内容：line-through；
s元素：过期的内容:line-through;

	<!-- del元素 -->
    <p>成语: <del>章</del>张口就来</p>
    <!-- s元素 -->
    <p>活动价格: 1.8, 原价: <s>998</s></p>

8. text-indent：

首行文本缩进,2em即对应2个文字；

	<!-- 首行文本缩进：text-indent -->
    <p style="text-indent: 2em;">Lorem ipsum dolor sit amet consectetur adipisicing elit. In ducimus fuga perferendis nulla asperiores ipsam facilis dolor sit nesciunt similique?</p>

9. line-height：

每行文本的高度，该值越大，每行文本的距离越大；

常用：设置行高为容器的高度，可以让单行文本垂直居中，即height值 = line-height；

    <!-- line-height垂直居中 -->
    <p style="color: #008c8c; height: 50px; line-height: 50px; background-color: black;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat natus mollitia, velit libero recusandae veniam possimus repudiandae et? Similique, molestias.</p>

【注意：多行文字line-height通常不用绝对单位，防止字体大小导致影响，可以直接写数字–相对单位–相对于当前元素的字体大小，如1.5】

10. width：元素宽度

10、11两部分内容将会在后续关于盒模型的介绍中，重点分析；

11. height：元素高度

	<!-- 元素的宽度、高度 -->
    <p style="height: 120px; width: 500px; background-color: #008c8c;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. In culpa quia accusamus praesentium, non dolor earum tempore minima, consequuntur nesciunt voluptatum obcaecati odit, aspernatur voluptate cum facere veritatis animi fuga!</p>

12. letter-spacing：文字之间间隙（左右）

13. text-align：

元素内部文字的水平排列方式

默认：靠左排列left；
center居中、right靠右；

总结

本篇博文主要介绍了多种常见的样式声明，主要是关于文本和元素位置的样式，在今后的网页设计中，还会用到更多更奇妙的CSS样式声明，我们将在一次次的学习中，不断完善我们的武器库，最终完成网页设计。