CSS的一些常见样式(一)--字体，文本，边框，颜色，displ

一，边框border：

• border有四个属性基本值：分别对应一个盒子的四条边，分别是上右下左，如图：

边框

通常可以书写为如下：

边框四个基本值写法，其中的1px是粗度

• border还有三个其它常用属性，分别是border-width（粗度），border-style（样式），border-color（颜色），下面介绍他们的用法和常用值：
  1.border-width：边框粗度，通常使用Npx的固定单位来直接表明，例如：border-width:1px;

2. border-style：边框样式，设定边框的样子，常用的有三个值：solid（默认实线），dotted（点线），dashed（虚线）

默认实线 点线 虚线
3.border-color：边框颜色，默认是黑色，其它常用的值还有：red，yellow等，此外还可以用十六进制和rgb颜色表示方法来进行表示
4.缩写，它们三个样式与border的四个基本值可以缩写为：
border:1px dotted red;

• 圆角border-radius：边框半径，表示边框的角的半径，可以构造圆角，如下图就是一个圆角边框：

圆角盒子

border-radius有四个值，按照顺序分别对应上图的左上，右上，右下，左下，它们可以写为：
border-radius:30px 30px 30px 30px
也可以简写为：
border-radius:30px

二，字体font

• 字体font有四个常用属性，分别是font-size（大小），font-family（字体），font-weight（粗度），line-height（行高）
• font-size：字体大小，字体大小的单位有几个，它们的写法分别是：

1.px：font-size:12px;
2.em：font-size:1em;
3.rem：font-size:1rem;
4.百分比：font-size:200%;
5.vw：font-size:1vw;

• font-family：字体，字体是指字的形状样式，在CSS中，font-family有三种写法（用微软雅黑字体为例）：
  1.英文写法： font-family: "Microsoft YaHei"
  2.中文写法： font-family: "微软雅黑"
  3.Unicode写法： font-family: /5FAE/8F6F/96C5/9ED1
  要记住下面几点：
  1.英文写法中如果有空格以及采用中文写法的话要加引号；
  2.尽量采用Unicode码字体，因为如果直接写中文字体的情况下编码方式和解码方式有可能不匹配，从而导致乱码；
  3.字体的Unicode码可以在开发者工具的console里用escape('字体中文')获得，如下图：
  但是要注意的是，里面的%u要转换为/

Unicode码字体获得方式

• font-weight：字体粗度，常用值是bold，表示粗体，如下图对比：

粗字体对比

• line-height：行高，指的是行与行之间的空间，常用单位是px，em，rem，百分比。

• 浏览器默认字体和最小字体
  1.通常来说，浏览器默认字体是16px，最小字体是12px，因为当字体小于12px时，人眼的认知功能就难以发挥作用
  2.如果我想设置更小的字体呢？比如设置9px的字体，该怎么办？
  方法：
  可用使用如下样式：

设置更小字体

效果：

我表示已经无法看清楚了

三，文本text

• 文本text是指文本在盒模型中的格式表现形式，常用的有：text-align（对齐方式），text-indent（缩进），text-decoration（a链接显示方式），word-spacing（设置单词间距），letter-spacing（设置字符间距），
  text-overflow（规定当文本溢出包含元素时发生的事情）

• text-align：对齐方式，常用的有四个值：left默认左对齐，right右对齐，center居中，justify两边对齐
  1.前面三个对比如下图：

前三种对齐方式

2.justify两边对齐适用于多行文字，他会使该段文字的左右两边自动对齐，字间距有可能发生变化，如下图；

justify对齐

• text-indent：首行缩进，常用单位是px，em，rem，百分比，用上图文字延时如下：

可见首行缩进了两个字的距离

• word-spacing与letter-spacing：一个是单词或中文字间距，第二个是字符间距，对比如下图：

对比

• text-overflow：规定当文本溢出包含元素时发生的事情，例如当文本过长时，可以设置溢出文本为'...'

• 如何设置溢出文本为'...'
  如下图文本：

设置不折行，且溢出文本为‘...’

设置溢出文本样式

• 如何设置行内元素在块级元素里居中
  用 text-align，代码如下：

行内元素在块级元素里居中显示

四，display样式（改变元素的级），行内元素和块级元素详见我的这篇文章

• display样式有三个常用的值：inline（行内），block（块级），inline-block（行内块级）
• inline：设置元素为行内元素
• block：设置元素为块级元素
• inline-block：设置元素为行内块级元素
• 关于display的其它值有：table，table-cell，table-row，list-item，none，inherit

五，隐藏和透明

• 透明（指的是元素不能被看见，但是位置依然被占据）
  1.opacity:0~1：透明度，作用于整体，用得比较少；
  2.visibility:hidden：元素可见度，表示该元素透明，位置依然占据；
  3.background-color:rgba(0,0,0,0~1)：表示背景色的透明度，a的值为0时完全透明；
• 隐藏（指元素整体消失，并且不占据位置）
  1.display:none：表示设置该元素消失，不占据位置也看不见；

六，颜色color的写法

• 单词：red，blue，yellow等；
• 十六进制：#000，#fff，#060606等；
• rgb形式：rgb(255,255,255)；
• rgba形式：rgba(0,0,0,0.5)，里面的a代表的是透明度，范围是0~1，数值越大越不透明；

七，单位

• px：像素，固定单位；
• em：相对单位，相对于父元素，例如1em就是相等于父元素的px大小；
• rem：相对单位，相对于根元素，例如1rem就是相等于根元素的px大小；
• vw：相对单位，相对于屏幕大小，1vw就是屏幕的1%大小；

八，css样式的继承

• 什么是css样式继承
  继承就是子元素继承了父元素的CSS样式的属性
• 常用的会被继承的样式有哪些？
  1.字体：family，size，weight，line-height
  2.文本：letter-spacing，word-spacing，text-align, text-indent
  3.列表：list-style-type
  4.颜色：color，ps：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉继承自父元素的字体颜色；
• 什么属性不能被继承
  1.display
  2.float
  3.padding和margin
  4.背景相关，比如颜色图片等