【前端学习之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样式声明,我们将在一次次的学习中,不断完善我们的武器库,最终完成网页设计。