CSS的一些常见样式(一) 字体，文本，边框，颜色，display，以及继承和一些单位

一，边框border：

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

一般能够书写为以下：

• 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要转换为/

• 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两边对齐适用于多行文字，他会使该段文字的左右两边自动对齐，字间距有可能发生变化，以下图；

• 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.背景相关，好比颜色图片等