css常用样式（文字样式、边框样式、背景样式）

CSS常用样式

CSS常用文字样式

color: brown; /*文字颜色*/
/*color: #333333;这样的也可以，这种颜色的表示方法是RGB的方式，没两位数表示一种颜色的度数，
一般情况下这种颜色是从ps中获取的*/

font-size: 20px; /*文字尺寸，一般情况下文字的长宽占多大的像素就是多少px*/
font-family: '微软雅黑'; /*字体，一般情况下使用微软雅黑，因为这个字体绝大多数电脑都会识别*/
font-weight: bold; /*文字加粗，值normal为正常*/

text-decoration: underline; /*文字添加下划线，none，文字去掉下划线，
一般a标签都会设置去掉下划线*/
text-align: center; /*文字居中，left文字左对齐，right文字右对齐*/

text-indent: 2em; /*p标签的首行缩进，单位是字符。*/

当然文字样式还有很多很多，但是比较常用的就这些。

补充的讲一个居中，如果一个容器有80px*120px大小，这个时候往其中添加文字，文字就会默认的从左上方开始排列，而一般情况下我们是希望文字在容器的正中间显示，这个时候就需要用到居中了，上面我们看到有text-align：center；这个是水平居中，而垂直居中就是line-height，要把这个属性的值设置的与容器的高一样。
例如

    
    
    
    
    


    文字样式演示

这里面line-height为行高设置，就是段落中的行高，将行高设置的与容器的的高度一致，这样文字就会垂直显示了，再搭配上水平居中，就可以实现整体居中显示了。

边框样式

我们还可以给标签添加边框样式，一般情况下我们会在自己做页面的时候给div容器做一个边框，方便看我们的布局是否可行，这个之后再讲。

border: 1px solid #333;

第一个表示边框线的宽度；第二个表示边框线的种类，solid实线，dashed虚线，dotted点线；第三个表示线的颜色，这里的颜色也有很多种种类，可以是RGB形式的，也可以是英文形式的等等。默认边框是长方形的样子。

其中如果你只是想要容器的某一个边框，如左边，只想要左边一边有边框，这样的话就可以使用如下几个属性：

border-top: brown;
border-bottom: blueviolet;
border-left: blue;
border-right: #333; 

分别对应着上下左右。
有一种特殊的边框样式，这种边框是椭圆形的，属性是border-radius，表示着边框弧度，一般使用50%，感兴趣的同学可以自己实验一下。

在这里补充一下颜色的表示方式，在HTML中有许些的颜色表示方式，其中color：red；是一种比较简单的方式，直接使用英文来表示，具体数值可以百度或者使用VSCode中的提示。而color：#FFFFFF这种就是RGB形式的颜色表示法，当然#FFF也可以，如果是六位数，那么每一位数都应该是0-F，每两位数表示一种颜色的度数，00表示无，FF表示满。#000000表示黑色，#FFFFFF表示白色，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色。而三位数就是简化的六位数表示法。除却这些以外还有没讲的颜色表示法，但是一般情况下这两种就足够了。
注：如果在六位数的RGB表示法的后边再加上两位数，那么这两位数就表示颜色的透明度，取值范围也是00-FF。

背景样式

背景样式主要就是背景颜色和背景图片，演示代码如下：

background-color: blue; /*设置背景颜色*/
background: blue;  
background: url("图片路径"); /*设置背景图片*/
background-repeat: no-repeat; /*背景图片不平铺，平铺就是如果图片的长宽小于容器的长宽，就会把图片拉伸*/
background-position: left center; /*背景图片位置，第一个表示水平，第二个表示垂直。也可以使用像素或者百分比的数值*/

一般我们在设置背景图片的时候，都会设置容器的高，不然图片可能会显示的不全，或者走样。

或者我们使用一句话来同时设置背景图片及其相关属性

background: url("图片路径") no-repent left center;