CSS选择器的学习（续）和样式基础知识点

1、分组选择器

例：

span,p,h1{color:#ccc}        （用逗号进行分组，同时进行样式标记）

<span></span>

<p></p>

<h1></h1>

2、派生选择器（通过父级找子级）

例：

div ul li div{color="#ccc"}

<div>

    <ul>

        <li><div></div></li>     （文本颜色为灰色）

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

3、属性选择器

例：

[type]{color:red}

<input type="text">     （文本为红色）

一、样式

1、字体样式

颜色  color:

字号  font-size:

字体  font-family:arail

     font-famliy:"黑体"      （带有中文或空格、特殊符号，要加引号）

字体风格：  font-style:normal      （正体）

           font-style:italic       （文字倾斜）

           font-style:oblique      （文本倾斜）

字体粗细：  font-weight:normal      （由粗变细）

           font-weight:bold        （由细变粗）

2、文本样式

首行缩进：  text-indent:2em      （1个em是一个字号的大小，一般1个em为16px大小）

水平对齐：  text-align:center/left/right      （水平居中/居左/居右）

行高：      line-height:30px 

字间距：    word-spacing:10px     （中文状态下有空格或标点符号的情况下，字间距样式才有效；主要针对英文状态） 

字母间距：  letter-spacing:10px    （中文状态下每个字或者英文状态下每个字母都有间距样式的添加效果）

字母大小写的转换（针对英文）：  text-transform:uppercase    （大写）

                              text-transform:lowercase     （小写）

                              text-transform:capitalize    （首字母大写）

文本修饰：  text-decoration:underline      （下划线）

           text-decoration:overline        （上划线）

           text-decoration:line-through         （贯穿线）

3、背景（图片优先级大于背景颜色）

背景色：  background-color:

①英文

②十六进制

③rgb（0，0，0）     （0-255，不带透明度）

④rgba（0，0，0，0）    （带有透明设置的，透明度0-1，1是没有透明度的；背景色透明，字不透明）

⑤opacity:0.4      （背景色透明度设置，背景透明，字也透明） 

背景图片：  background-image:url（图片的路径）；

background-repeat:no-repeat; （不重复）

background-repeat:repeat-x; （水平方向重复）

background-repeat:repeat-y; （垂直方向重复）

图片定位：  background-position:100px 100px;

固定数字  100px 50px; 水平向右移动100px，垂直向下移动50px

百分比  10% 50%;  水平向右移动当前容器水平宽度的10%的距离，垂直向下移动当前容器垂直高度的50%的距离

关键字  left top;
例：background-position:left;      （如果关键字只有一个，那么系统默认第二个值为center）