CSS学习之字体，文本，列表，背景设计基本内容

    关于Css字体设计，文本设计，列表设计，背景设计基本内容。

  下面的标签都是一大堆的文字，只有边学边用才不会烦躁。

    字体：我们在做页面的时候，通常会有很多文字，对这些文字，我们会需要各种各样的样式，这就是字体设计的意义了。

Css字体的基本属性有一下几个：

1.Font-family：设置字体的系列

通用字体两大系列：

（1）p{font-family:’Times New Roman’,Georgia,宋体，serif}--------衬线

（2）p{font-family:Arial,Helvetica,微软雅黑，sans-serif}-------------无衬线

 

2.Font-size：设置字体的尺寸

（1）P{font-size:30px;} 像素类型，

（2）p{font-size:200%}基于父元素的百分比类型。

 

3.Font-weight：设置字体的粗细

（1）p{font-weight:normal}   -----normal是默认值，

（2）p{font-weight:bold}  -----粗体字符

还有简写属性Font：就是把对字体的所有设计都写在一行，属性间空格隔开，分号结尾。

 

Css文本属性：

Color：设置文本颜色，有三种设置方式

（1）p{color:red} ---直接使用颜色名称

（2）p{color:#00ff00} 使用十六进制表示颜色

（3）p{color:rgb(255.0.0);}  rgb代码的颜色

这三种设置，各有各的优点，使用的时候看个人吧。

 

Line-height：设置行高，也是有三种设置方式

（1）纯数字的：字体大小*数字：p{line-height:数字;}

（2）百分比类：字体大小*百分比：p{line-height:150%;}

（3）像素类：p{line-height:30px;}

其实行高还有一个默认值normal，默认一般为20px;

 

Text-decoration：向文本添加修饰

（1）P{text-decoration:none;}标准文本，没有下划线；

（2）P{text-decoration:underline;}文本有下划线。

 

Text-align：对齐元素中的文本

P{text-align:center/left/right} 文本对齐有居中，左，右对齐；

 

Letter-spacing：设置字符间距

Text-indent：缩进元素中文本的首行

 

Css列表属性

List-style-image:将你指定的图像设置为列表项的标签

  添加图片的路径：ul{list-style-image:url(“路径”)}

 

List-style-type：设置类别项标志类型

   ul/ol{list-style-type:类型}其中有：

   Disc: 默认，标记是实心圆，

   Circle: 标记是实心圆

   Decimal：标记是数字

   .................等

 

List-style-position：设置类表中列表项标志的位置

   inside：标记在列表内

   outside：标记在列表外（默认值）

   ul{list-style-position:inside/outside;}

  光看文字可能不太理解，这有图---

          

List-style：简写属性,把所有属性设置放在一起；

 

Css背景属性：

Background-color：设置元素的背景颜色

Background-image：把图片设置为背景

Background-repeat：设置背景图像是否以及如何重复

   P{

      background-image:url(‘路径’);

      background-repeat:no-repeat;

    }

    Repeat:默认值，平铺

    Repeat-x/y:水平/垂直方向平铺；

    No-repeat:图像仅显示一次

    

Background-position：设置背景图像的起始位置

 

     在学习这些标签的时候，刚刚开始的时候，会记不住，自己在编辑器里面把所有的标签都练习过，再在浏览器里面直观的看显示页面，这样对于这些标签的了解才会更加印象深刻。

     在学到了CSS这些的基本标签，我已经可以做一点点小小的界面自己欣赏了，不过还有太多是属性要设置，显示结果也很粗糙，不过自己学的很开心，毕竟是自己做的嘛。