css三大知识点

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

本文档是用XML和css样式表关联，所以css的设置都以一下的XML文档作为例子

<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="product.css"?>
<productdata>
  	<product prodid="p001" ctegory="Toy">
      <productname>Toy cat</productname>
      <description>This is a toy for childern aged 4 and above</description>
      <price>65</price>
      <quanity>54</quanity>
  	</product>
  	<product prodid="p002" ctegory="Toy">
      <productname>Remote-Controlled Car</productname>
      <description>This is a toy for childern in the age group of 5-10</description>
      <price>150</price>
      <quanity>200</quanity>
  	</product>
</productdata>

一、选择器

说到选择器，这是css中最基础的知识点，不知道选择器就没有办法使用外联演示表位xml或者html文档设置样式。

什么叫做选择器？首先我们css的目的是为文档中的标签设置样式，一个展示给别人看的xml文档或者html文档当中肯定不止一个标签，并且也不可能所有标签都设置为一个样式，所以引入了选择器，选择器就是用来选择不同的标签，来为选择的标签单独设置一些样式，这就是选择器。

那么都有哪些常用的选择器呢？接下来从最常用到不经常常用的顺序一一列举。

1.元素选择器

这个选择器是以元素名作为选择依据的，例如：

productname{
  font-family: Arial;
  font-size: 20pt;
  font-weight: bold;
}
//这样设置了过后，在浏览器中预览xml的时候，xml中productname包裹起来的内容
//字体就会变成Arial，字体大小变成20pt，字体样式变成加粗
//最最重要的是，productname{...}productname表示花括号中的修饰内容作用在productname这个元素上

2.类选择器

这个选择器是以元素的class属性作为选择依据的，这个选择器的作用是将某一类的元素设置为同一个样式，比如在一个文档中有一大片的图片，这些图片都是长宽高固定的50个像素，那我可以将这些图片设置同一个类名，比如叫img_list，那么我可以这样设置这些元素的样式。

<image src="./1.png" class="img_list"></image>
<image src="./2.png" class="img_list"></image>
<image src="./3.png" class="img_list"></image>
<image src="./4.png" class="img_list"></image>
<image src="./5.png" class="img_list"></image>
<image src="./6.png" class="img_list"></image>
<image src="./7.png" class="img_list"></image>

.img_list{
	width: 50px;
  height: 50px;
}
//这样设置了过后，所有image元素的宽和高都会变成50px，就不用单独的设置7遍了//
//当然肯定有人会问，我也可以用元素选择器啊，但是文档中难道就只有这些图片了吗？万一还有一些logo呢？
//logo肯定不能和这些图片一样宽高设置为50个px，所以类选择器可以更加精细的选择一些元素

2.ID选择器

这个选择器是以元素的ID属性作为选择依据的，在XML中如果要让一个元素拥有ID属性需要再DTD或者Scheme中进行说明。

举例子：

#IDName{
	...
}

3.多元素选择器

productname,description{
	...
}
//作用是同时选中productname和description两个元素，为他们设置样式

二、属性

说完了css的选择器，那么我们会选择元素了，选择了元素之后要为其设置样式，这些样式被称作为元素的样式属性，在css中简称为属性，常用的属性有哪些？下面进行一一列举。

1.字体属性：

font-family: "xxx xxx";
//设置使用哪种字体
font-style:italic;
//设置字体样式，bold是加粗，italic是倾斜
font-variant:small-caps;
//设置英文字母为小型的大写字母
font-weight: bold;
//设置文本为加粗，也可以设置为具体的数值，100-900
font-size: 10pt;
//设置文本大小，pt表示多少磅，还可以用px表示多少像素

2.文本属性

text-align:center;
//设置文本内部的对齐方式，center表示水平居中，文本默认有垂直居中
text-indent:16pt;
//设置文本的首行缩进
text-transform:uppercase;
//设置文本中的字母全部大写，全部小些或者首字母大写，对应的属性值为，uppercase、lowercase、capitalize
text-decoration:underline;
//这是是否给文本添加文本装饰，none（不添加任何装饰线）、underline（下划线）、overline（上划线）、line-through（删除线）
vertical-aligin:baseline;
//设置文本垂直对齐方式，baseline（以底部基准线对齐）、sub（下对齐）、super（不知道）、top（上对齐）、text-top（不知道）、middle（不知道）、bottom（底部对齐）、
line-height:1.5;
//设置文本的行高，主要用来设置垂直居中用的。

3.颜色背景属性

color:red;
//设置文本颜色，可以使用英文，也可以使用rgb函数
backgroud-color:blue;
//设置背景颜色，一样的

backgroud-image: URL("animal.jpg");
//设置背景图片
backgroud-repeat:repeat-y;
//设置图片以何种方式显示在背景上