【CSS基础篇】——常用属性

文字的设置

颜色

  div{
   color: #FF0000;
   color: red;
   color: rgb(255,0,0);
   color: rgba(255,0,0,0.5);
   }

设置颜色有以上的一些方法。
第一个是在输入color后，编译软件会自己跳出颜色，我们可以直接按动上下键进行选择，选择到自己喜欢的颜色按下回车即可（即十六进制值）。
第二个就是懒得选颜色，自己手动打的咯（即颜色名称）。
重点讲一下第三个和第四个

rgb颜色

首先所有浏览器都支持rgb颜色
规定：rgb(red,green,blue)
每个参数定义颜色的强度，可以是介于2-255之间的整数也可以是百分比。

rgba颜色

rgba颜色得到以下浏览器的支持：IE9+，Firefox3+，chrome，safari，opera10+
rbga颜色是rgb颜色的一个扩展，增加了一个alpha通道，它可以用来设置不透明度。
规定：rgba（red，green，blue，alpha）
alpha参数是介于0.0（完全透明）到1.0（完全不透明）

字体

/* 字体大小，谷歌默认16像素，最小显示12像素 */
   font-size: 20px;
   font-size: 1em;(倍数)
   /* 字体 */
   font-family: '微软雅黑，宋体';
   /* 字体样式，斜体 */
   font-style: italic;
   /* 字体粗细 */
   font-weight: 900;

在font-family设置字体样式的时候，如果前一种样式不存在，才会执行后面的字体样式。

文本的设置

h2{
   /* 文本水平对齐 */
   text-align: center;
   /* 下划线 */
   text-decoration: underline;
   /* 删除线 */
   text-decoration: line-through;
   /* 顶线 */
   text-decoration: overline;
  }

顶线

删除线

下划线

取消删除线

s{
   /* 取消s标签的删除线 */
   text-decoration: none;
  }

就是将s标签带有的删除线去掉。（其实不用s标签就好咯，用了s标签，又取消删除线，哈哈哈，不吐槽，做个没有感情的写博机器）

缩进

p{
   /* 文本首行缩进 */
   text-indent: 32px;
   text-indent: 2em;
  }

说明一下，在文本中敲空格是无法让他在页面中显示出缩进的样子。

大小写转换

h3{
   /* 文本转换 */
   /*全部大写*/
   text-transform: uppercase;
   /*全部都小写*/
   text-transform: lowercase;
   /* 只有首字母大写 */
   text-transform: capitalize;   
  }

全部大写

全部小写

首字母大写

边框

.box{
   width: 200px;
   height: 200px;
   border-width: 1px;
   border-style: solid;
   border-color: red;
   border: 1px solid;
   border-left: 5px dashed;  
  }

solid ：实线
dashed：虚线

博主的彩蛋

.create{
   width: 0px;
   height: 0px;
   border-left: 10px solid rgba(0,0,0,0);
   border-top: 10px solid #2AC845;
   border-right: 10px solid transparent;   
  }

运行图片如下

（这篇博客中提到了一些标签，博主在第一篇博客中做了详细的介绍，可以参照。）