颜色单位

RGB用法

.box{
    width:200px;
    height:200px;
    background-color:rgb(255,0,255)
}

255是最大，0最小

.box{
    width:200px;
    height:200px;
    background-color:rgb(100%,0%,100%)
}

100%百分百最大，跟255方式一样

.box{
    width:200px;
    height:200px;
    /*background-color:#ff0000;*/
    background-color:#f00;
}

十六进制写法,数字越小颜色越深,如果两位都是一样的可以简写,不一样的必须写完整

字体样式

.p1{
    color:red;
    font-size:30px;
}
如果设置字体像素为30，那就是30px，如果没有设置就默认16px。

.p1{
    color:red;
    font-size:30px;
    font-family:arial;
}
英文字体是不包含中文字体的，浏览器就会默认一个字体

.p1{
    color:red;
    font-size:30px;
    font-family:华文彩云,arial,微软雅黑;
}
设置多个样式要用逗号分隔
先使用华文彩云字体，如果没用到，就用arial，如果没用到，就用微软雅黑，如果还没用到，浏览器会默认一个字体

.p1{
    color:red;
    font-size:30px;
    font-family:"Segoe Script";
}
因为字体名称中间有空格，必须要用引号引起来

字体其它样式

style

.p1{
    color:red;
    font-size:30px;
    font-family:微软雅黑;
    font-style:italic;
}
italic 斜体的字体样式
oblique 跟italic字体样式差不多，只不过这个是倾斜的字体样式
默认normal浏览器的一个标准样式
inherit 规定从父元素继承字体样式

weight

.p1{
    color:red;
    font-size:30px;
    font-family:微软雅黑;
    font-style:italic;
    font-weight:bold;
    /*font-weight:400;*/
}
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
默认normal浏览器标准的字符
也可以用数值定义 （100-900）

variant

.p1{
    color:red;
    font-size:30px;
    font-family:arial;
    font-style:italic;
    font-variant:small-caps;
}
小型大写字母

字体样式简写

.p1{
    font:italic bold small-caps 30px '微软雅黑';
}
不同的样式要用空格隔开 

行间距

line-height

.p1{
    width:200px;
    height:200px;
    line-height:200px;
}
要想设置垂直居中，height多高，行高就设置多高

text-transform

默认文本样式

p{
  text-transform:none;
}

capitalize 文本中的每个单词以大写字母开头。

p{
  text-transform:capitalize;
}

uppercase 定义仅有大写字母。

p{
  text-transform:uppercase;
}

lowercase 定义无大写字母，仅有小写字母。

p{
  text-transform:lowercase;
}

text-decoration

默认文本样式

p{
  text-decoration:none;
}

underline 定义文本下的一条线。

p{
  text-decoration:underline
}

overline 定义文本上的一条线

p{
  text-decoration:overline;
}

line-through 定义穿过文本下的一条线。

p{
  text-decoration:line-through;
}

去除超链接的下划线

a{
  text-decoration:none;
}

letter-spacing用来设置字符之间的间距

p{
  letter-spacing:10px  
}

work-spacing用来设置单词之间的间距

p{
  work-spacing:10px
}

对齐文本

text-align

可选值
1.left : 左对齐
2.right: 右对齐
3.justify: 两边对齐
4.center: 居中对齐

p{
  text-align:left;
}
在left处更换可选值right justify center

首航缩进

text-indent

p{
  text-indent:32px;
}
没有设置字号，浏览器默认16px;

如果我就想制作无论字号多大就缩进两个字的就要em单位

注：1em = 1font-size;

 p{
  text-indent:2em;
  font-size:30px;
}