CSS基础样式和排版文本段落

一、CSS基础样式

1.字体属性

font-family是字体属性

font-family：后面可以直接打出来字体的样式，或者直接选择

font-family: Times,"Times New Roman", "楷体";也可以用是为啥？

如果浏览器认识Times，就采用Times的字体，如果不认识Times字体，就采用"Times New Roman"字体，如果也不认识 "Times New Roman"字体，那我就采用"楷体"，

 ★如果楷体也不认识，那么就用浏览器默认的字体

2.字体大小

font-size：px  物理像素

                 em      根据父元素大小来

                 rem          根据（根元素html）大小来

 

什么情况用em?

现在用em比较少，一般是在移动端的适配各种机型（兼容各种手机屏幕大小  页面显示的更好）的时候会用

 

什么时候用rem？

在移动端的适配各种机型（兼容各种手机屏幕大小) 的时候，用rem单位的页面显示效果会比较好

em和rem，用的比较多的是 rem单位

3.字体风格

font-style：italic;   oblique;表示斜体          <i><em>这种也可以变斜

                   normal；表示普通的

 

 

 使用font-style:normal;可以把已经斜体的样式改成正常的字体样式

4.字体粗细

font-weight：normal     默认值，标准的粗细大小

                     bold           粗体字体

                     bolder        更粗的字体

                     lighter         更细的字体

                     数值            数值越小越细， 400为normal，700为bold

bold和bolder设置的字体的粗细都是一样的 为什么呢？

因为bold设置成粗体的以后 页面的显示就已经是最大值了 ，所以就算设置了bolder再大也不会发生明显变化

bolder存在的意义就是 告诉浏览器我是更粗的字体 再语义化上面 比bold更加强烈

 发现框起来三组，数值不一样，为什么显示一样啊？

当字体设置到300 就已经是浏览器显示最细的字体的极限了，所以再往下设置更细的字体 就不会有效果

当设置到600的时候 浏览器粗体的显示就已经是极限了，所以再加大字体 浏览器也不会有更粗的字体效果了

当你设置成 400 和 500的时候 都是标准字体 不会加粗也不会变细 

总结上述

 发现这样写也是可以的

最好按照这种顺序    字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

🔺 字体类型要放在最后 字体风格和字体粗细和颠倒位置 其他的不行

二.文本样式

1.文本颜色

color：red / green /... 可以直接找到的

           RGB （1）十六进制方法表示颜色：

                              前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

                               例如：color:#A983D8; #2B2B29

                    （2）还可以使用 这种方式：rgb(r,g,b) : 正整数的取值为0～255

           RGBA:    在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

                           alpha透明度值为0 表示全透明

                                               值为1 表示不透明     

                                               值为0.5或者.5 为半透明

                             例如：background:rgba(45,48,51,0.5)

查看色号

利用qq截图工具 快捷键ctrl+alt+a 用鼠标移到需要取色的位置

ctrl+c 可以取到十六进制的颜色

按c键 可以取到rgb的色值

选好后 可以按左上角的Esc退出即可

2.排版文本段落

                                    ----水平对齐方式（中英文皆可）

text-align:     right      把文本排列到右边

                     left           把文本排列到左边。默认值：由浏览器决定

                     center      把文本排列到中间

                     justify       实现两端对齐文本效果

          ★text-align left center right 对img依然有用     图片排列中justify实现不了

3.首行缩进

text-indent:        px

                          em 根据父元素     body默认16px

给p设置一个字体大小为14px，在此2em就是28px

4.行高

line-height:      px;

使用line-height属性设置行高 值越大 一行的间距也就越大

            line-height一般要设置的比字体的大小要大一点，不然就会挤在一起 

            就如这里的默认字体大小是16px 如果你设置10px 就会挤在一起

行高的妙用：

想让 字体水平方向居中 并 字体垂直方向居中

 想设置文字的垂直居中就需要把line-height设置的和高度height的值一样