上文已经对css的格式与使用做了介绍，今天跟大家说一些常用的文本与背景基础属性以及id与class使用。
id与class
id与class并不是css中需要设置的属性，而是用在html中的，用以确定网页控件所在的东西，即上文有提到到的id/类选择器。注：id与class在html中可谓是任何元素标签可用的属性。
上代码：
<div class="circle text">
<p id="circleContent1">
</p>
<p id="circleContent2">
</p>
</div>
在代码中，结构为一个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就简单多了，为首行缩进，缩进多少自己设置。
结尾
关于文本设置的真心太多了，本文只介绍些简单常用属性，其他的有需要自己查吧。
网友评论