CSS中常见样式声明

常见样式声明

本文所用到的UA都是基于Chrome浏览器

1.color

元素内部的文字颜色
预设值:定义好的单词
三元色,色值:光学三元色(红、绿、蓝),每个颜色可以使用0-255之间的数字表达,数字组合就成为了色值
例如:
马尔斯绿的色值是:#008c8c

rgb表示法

p{
    color: rgb(0,255,0);
}

hex(16进制)表示法

p{
    color: #008c8c;
}

常见的色值

淘宝红:#ff4400,#f40
黑色:#000000,#000
白色:#ffffff,#fff
红:#ff0000,#f00
绿:#00ff00,0f0
蓝:#0000ff,#00f
紫:#f0f
青:#0ff
黄:#ff0
灰:#ccc

2.background-color

元素的背景颜色 色值同color写法一致

3.font-size

元素内部文字的尺寸大小

1)px:像素 --绝对单位

简单的理解是文字的高度占多少个像素

2)em:相对单位

相对单位【em】最终会被换算成绝对单位【像素(px)值】,em是相对于父元素的字体大小
em其实我们是见过的

在Chrome浏览器中h1的CSS规则是这样的

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

或者按照浏览器给的叫法是user agent stylesheet(用户代理样式表),user agent,UA,用户代理,其实在浏览器给了我们巨大的帮助,在服务器端代码是非常凌乱的,我们写的代码都是经过代码格式化的,在服务器端空格、换行都要去掉,浏览器相当于是我们的代理人,帮助我们从复杂的服务器端代码抽离出某一个元素的全部样式供我们参考
这也间接的说明,一个没有样式的元素是不可能显示的,选择元素要看它自身的含义,而不是样式,选择元素要看语义
body、html没有字体大小的话,要看浏览器默认给的字体大小,Chrome浏览器一般为16px。这也就引出了经典的解释:每个元素必须有字体大小,如果没有声明则使用父元素的字体大小,如果没有父元素(html)则使用基准字号
基准字号:Chrome 16px

4.font-weight

文字粗细程度,可以取值数字,可以取值为预设值
默认值:normal
预设值其实和数字是有对应关系的
normal === 400
bold(加粗) === 700
不是每一个字体都能适应各种粗细程度,比如有些字体仅有粗细两个程序,这和做字体的小姐姐有关系哦
strong的默认样式中是加粗的样式

5.font-family

必须用户计算机上存在才可以显示
这个时候就产生了font-family的多种写法,以适应不同的浏览器环境
font-family一般写在body元素中,这个涉及到CSS继承的知识
知乎font-family:

font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;

百度font-family:

font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;

淘宝font-family:

font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;

sans-serif,Microsoft YaHei:非衬线字体,非衬线字体的意思是字体的边缘没有经过修饰(用于网页好看)
宋体:衬线字体,字体的边缘经过修饰,衬线字体往往用于印刷,打印出来很好看(简历。。。你懂)
sans-serif指的是随便一个非衬线字体,这个涉及到兼容性问题,一般设置font-family的时候最后都会加上sans-serif

6.font-style

字体样式,通常用于设置字体倾斜
前提:字体必须支持倾斜
设置斜体:

font-style: italic;

i、em元素是默认样式就是切斜字体,不能因为要字体倾斜就选择i元素
i元素在实际使用中通常用于存放图标(icon),现在常说人工智能,在读一段文本的时候,i元素通常用于特殊的语调来阅读,以凸显重点或专业名词

7.text-decoration

文本修饰,给文本加线
文本中间加线:

text-decoration: line-through;

文本上面加线:

text-decoration: overline;

文本下面加线:

text-decoration: underline;text-decoration: underline;

a元素的UA就用到了text-decoration的下划线:

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

在一个项目中a元素一般都要去下划线、给文字颜色设置成黑色

a{
    color: #000;
    text-decoration: none;
}

del元素:表示错误、废弃的内容
s元素:过期的内容

<del>博罗</del>菠萝吹雪
活动价格:99.8 原价:<s>109.9</s>

8.text-indent

首行文本缩进
缩进2个中文,英文再自行调整:

text-indent: 2em;

9.line-height

每行文本的高度,该值越大,每行文本的距离越大
慎用绝对单位(px),要用相对单位(数字)
行高可以设置为纯数字,表示相对于当前元素的字体大小
单行文本垂直居中,只需要让line-height等于容器的height即可

10.width

宽度

11.height

高度

12.letter-space

文字间隙
px em

13.text-align

文字的水平排列方式
left、center、right

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×