html background id,css id/class/文本/与颜色背景的一些基础使用

上文已经对css的格式与使用做了介绍，今天跟大家说一些常用的文本与背景基础属性以及id与class使用。

id与class

id与class并不是css中需要设置的属性，而是用在html中的，用以确定网页控件所在的东西，即上文有提到到的id/类选择器。注：id与class在html中可谓是任何元素标签可用的属性。

上代码：

在代码中，结构为一个div块中包含着2个p段落。div中设置了class为circle和text这2个值。提醒大家一下，class可以设置多个值只要值与值中间用空格分隔就行。而p中设置了id属性，这个就是唯一的了，一个标签只能设置一个id属性。因为上文中已经介绍了标签选择器，所以接下来我们使用id/class选择器以做熟悉。

先说明一下id/class的使用方法，css中id选择器以 "#" 来定义。格式为：id="idname"如在上述代码中可以用以下代码表示两个p:

#circleContent1 {

}

#circleContent2{

}

而class选择器以一个点"."号显示，格式为：.classname。代码如下：

.circle {

}

.text {

}

注：class顾名思义即可知是对一类事物的描述。即如果有2或2个以上标签同时设置了class="circle";那么上述代码中.circle {}的设置对相应的标签都会起作用。再一说，上述.circle {}.与text {}的设置也都会对div块起作用。如果你奇怪为什么一个div块要设置circle和text两个类？还都有作用，有一个不就够了？呵～，用多了你就懂了，更多的都有。

注：class的用法还不止这些，不过知道这些基本够用了，其他的以后慢慢讲。

背景文本设置

1.背景

1.background-color 颜色

2.background-image 图片

3.background-position 位置

4.background-repeat 重复

记住这4个背景常用属性，如果你要写web的话以后会常接触这些东西的。因为常用也简单所以对于这些属性进行简单解释与代码演示一下。

.circle {

background-color:red;

background-color:#ff0000;

background-color:rgb(255,0,0);

background-color:rgba(255,0,0,1);

}

上述代码中4个属性都是指将div的背景色设置为红色，只要有一种印留着就够了其他的可以注掉。

第一种使用的颜色名称，系统中对这些常用简单的颜色设置了相应名称，需要的时候直接用就可以了。

第二种使用的16进制设置颜色。基本上可以组合出你想要的所有色值。

第三/四种其实都是用r/g/b三元素组合设置颜色，只不过第四种多加了个透明度值而已。

.circle {

background-image:url('bgImgName.jpg');

}

上述代码设置的是图片背景，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。在url('')中填写的是图片名称(本地图片)，或者是图片链接(网络图片)。

.circle {

background-image:url('bgImgName.jpg');

background-repeat:no-repeat;

}

background-repeat指的是图片的重复与否，如果你没有设置图片的话，这个属性也就没意义。它有四个值：repeat/no-repeat/repeat-x/repeat-y。其中repeat为默认，no-repeat为不重复，repeat-x为横向重复显示，repeat-y为纵向重复显示。

.circle {

background-image:url('bgImgName.jpg');

background-repeat:no-repeat;

background-position:right top;

}

background-position指的是图片的位置，如果background-repeat的值不是no-repeat的话，同样没什么意义。默认是左上。

注：其实关于背景你也可以直接设置background：简写各属性，不解释，想知道怎么做，自己查去吧？不过初期建议你一个一个属性的写。

1.文本

#circleContent1 {

color:red;

text-align:center;

text-decoration:none;

text-transform:uppercase;

text-indent:30px;

}

其中color为字体颜色，设置与背景色类似不解释。

text-align为字体偏向：有center/right/left/justify，分别为居中/右对齐/左对齐/两端对齐。

text-decoration为字体修饰：有none/overline/line-through/underline四值，其中none为无修饰，overline为在文本上加一条线，line-through为在文本中加一条线(删除线)，underline为在文本下加一条线，着重线。

text-transform为文本中字母的转换，有none/uppercase/lowercase/capitalize四值，none为不转换，uppercase为转换为全大写，lowercase为转换为全小写，capitalize为首字母大写。

text-indent就简单多了，为首行缩进，缩进多少自己设置。

结尾

关于文本设置的真心太多了，本文只介绍些简单常用属性，其他的有需要自己查吧。