css基础样式和css3选择器

一、背景

1.background-color 背景颜色
默认值是transparent(透明的)
当同时定义了背景图像和颜色时，背景图像将覆盖在背景颜色之上
.divclass{ background-color:#808080;}

颜色的取值：
1.关键字：red、blue等
2.16进制：#000000、#cccccc、#ff0000等
3.rgb(0,0,0)
4.rgba(0,0,0,.5)

2.background-image 背景图片
默认值是none(没有图片)
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
通过url使用绝对或相对地址指定图片
background-image: url(“images/img.jpg”);
1.绝对路径：文件在网络或本地的绝对地址，从盘符开始 C:\Users\Administrator\Desktop\a.jpg
2.相对路径：相对于你当前目录，同一等级直接写图片名称即可，在下一级，用\查找，在上一级，用…/查找。一般不使用绝对地址。

3.background-repeat 背景图片是否重复

body
  {
  background-image: url(stars.gif);
  background-repeat: no-repeat;
  }

4.background-size 背景图片大小

5.background-position 背景图片位置（相对于外层容器）

6.background-attachment： 背景图片是否随内容滚动

body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}

7.background
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color
background-position
background-size
background-repeat
background-attachment
background-image
如果不设置其中的某个值，也不会出问题，取默认值，比如 background:url(‘smiley.gif’) no-repeat; 也是允许的。

二、字体属性
1.color 规定文本的颜色
如：
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

2.font-style 指定文本的字体样式（正常、斜体）
默认值 normal
属性值
normal 正常字体
italic 斜体字
p{ font-style:italic; }

3.font-size 指定文本字体大小
通过像素来指定字体大小 1px = 1像素
p{ font-size:12px; }

4.font-family 定义文本使用某个字体
默认值 由浏览器确定
示例
font-family:microsoft YaHei;
font-family:“Microsoft YaHei”,“Simsun”,“SimHei”;

5.font-weight 指定文字的粗细

6.
6.letter-spacing:;设置字的间距
如：div{letter-spacing:2px;}
7.overflow: hidden|auto|scroll;当内容溢出元素框时隐藏|自动|显示滚动条
8.让溢出的文字以省略号显示
p{ height: 20px; width:100px; background:#ddd;
white-space: nowrap; //让文字在同一行显示，不换行
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //文字溢出部分省略号显示，另外一个值为clip
}

这段文字多余的部分会显示为省略号

三、文本属性
1.text-align 内容对齐方式，它是针对于元素的内容
属性值 left |center |right
p{text-align: center;}
p是块元素，left、right和center会作用于整个行
2.text-decoration 指定文字有无装饰，默认值为none
属性值：
underline 指定文字的装饰是下划线
overline 指定文字的装饰是上划线
line-through 指定文字的装饰是贯穿线，类似于删除标签的效果

3.text-transform 设置对象中的文本的大小写
默认值none 无转换

属性值
capitalize 将每个单词的第一个字母转换成大写
p{ text-transform: capitalize; }

this is paragraph

uppercase 全部转换成大写
p{ text-transform: uppercase; }

lowercase 转换成小写
p{ text-transform: lowercase; }
< p >THIS IS PARAGRAPH< /p >

4.text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
如：p {text-indent:2em;}
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。

4.text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
如：p {text-indent:2em;}
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。

5.word-wrap 设置当前行超过指定容器的边界时是否换行
首先我们要知道一种情况：如果你容器中的单词过长，超出了容器本身的宽度，会造成“长单词溢出”

word-wrap: break-word;可设置过长的文本自动换行
5.vertical-align 设置对象内容的垂直对其方式。
是容器中元素相对于内容的显示

示例
div{ background:orange; height: 100px;}
a {display:inline-block; height:100px; width:80px; background:red; vertical-align: middle;}

< div>这里有内容< a href="#"></ a></ div>
*div中定义a，vertical定义的是a相对于div内容的对齐方式，它和容器的高度无关，与文字内容有关

示例2
p{ background:orange; }
img{ width:100px; vertical-align: middle; }
< p >this is paragraph!!!< img src=“images/boy.jpg” alt=""/>< /p>

6.line-height 设置对象的行高（不允许使用负值）

我们一般用行高来使一行文字垂直居中，当行高等于高时，一行文字垂直居中

8.opacity 设置颜色的透明度，整个元素都会透明
默认值1，取值为0-1

1为不透明，0为完全透明

示例
p{ opacity: 0;} 隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。
p{ opacity: 1;} 显示一个元素

它和rgba中的”a”作用一样

四、列表属性
1.list-style-image 设置列表项标记的图像(项目符号)
只有一个属性url，引导一个图片
ul{ list-style-image: url(“images/icon.png”);}
示例
用list-style-image重置项目符号示例
.test{list-style-image:url(skin/ico.png);}
//整体重置作用于ul，单个设置用于li上
< ul class=“test”>
< li>列表项一< /li>
< li>列表项一< /li>
< li>列表项一< /li>
< li>列表项一</ li>
</ ul>

2.list-style-position 设置列表项标记如何根据文本排列
这个属性有两个值outside和inside
outside项目符号放在文本以外（默认）
ul li{ list-style-position:outside; width:100px; border:1px solid red;}

inside项目符号放在文本以内
ul li{ list-style-position:inside; width:100px; border:1px solid red;}

3.list-style-type 设置列表项所使用的预设标记
可选值
none不使用项目符号
disc实心圆（相当于html属性type=”disc”）
circle空心圆
square实心方块

示例
ul{ list-style-type:circle;}

---

4.list-style
复合属性

写法
list-style：list-style-image list-style-position list-style-type
把之前几个属性值 写在一个list-style中

示例
ul{ list-style: url(“images/icon.png”) outside disc;}
前面设置了图片，最后再设置项目符号的目的是，如果图片未能正常显示，可以有符号来代替

css3选择器

一、关系选择器
1.后代选择器 (E F)

选择所有被E元素包含的F元素，中间用空格隔开
 
ul li{ color:red; }
<ul>
    <li>苹果</li>
    <li>橙子</li>
    <li>西瓜</li>
    </ul>

2.子代选择器 (E > F)
选择所有作为E元素的直接子元素F，对孙子元素不起作用，用大于号表示

div>a{ color:red;}   //div下的一级子元素a

<div>
 	 <a href="#">这是子元素</a>
  	 <p><a href="#">这是孙子元素</a></p>
</div>

3.相邻兄弟选择器 (E+F)
选择紧贴在E元素之后F元素，用加号表示，选择相邻的第一个兄弟元素。

p+span{ color:red;}   //只会选中第一个span

 <p>这是p元素</p>
 <span>这是紧挨着p元素的第一个span</span>
 <span>这是第二个span</span>

4.通用兄弟选择器 (E~F)

选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开。
 
p~span{ color:red;}	  
   //和p之后平级的span元素都被选中了，有几个选中几个

<span>这span在p元素之前不会被选中</span>    
<p>这是p元素</p>
<span>这是紧挨着p元素的第一个span</span>
<span>这是第二个span</span>
<span>这是第三个span，它和p是兄弟关系</span>

二、CSS属性选择器：
通过html的属性来选择元素，

class即是属性，p1是class的属性值。
写法：元素[ 属性名= “属性值”] ，等号不固定，可换其它符号
1.E[att]
2.E[att=“val”]
3.E[att~=“val”]
4.E[att^=“val"] 以val开头
5.E[att$=“val"] 以val结尾
6.E[att*=“val"] 包含val
7.E[att|=“val”]

1.E[att] 选择具有attr属性的E元素

p[class]{ color:red;}    //选择带有class属性的p标签

<p class="p1">这是p1标签</p>
<p class="p2">这是p2标签</p>
<p class="p3">这是p3标签</p>
<p class="p4">这是p4标签</p>

*不管class名为什么，只要有class属性，即符合

2.E[att=“val”] 选择具有att属性且属性值等于val的E元素。

它不仅要有符合的属性，值也要符合才会被选中。


p[class="p4"]{ color:red;}    //选择p元素里class等于p4的元素，属性值要用引号引起来

<p class="p1">这是p1标签</p>
<p class="p2">这是p2标签</p>
<p class="p3">这是p3标签</p>
<p class="p4">这是p4标签</p>

3.E[att~=“val”] 选择有att属性的元素，且属性值列表中有一个符合val的元素

比如我们的class属性，它的值通常是多个样式，中间以空格隔开，只要有一个值符合就被选中

p[ class~="p1"]{ color:red;}    //选中p元素下class值包含p1的元素

 < p class="p1 paragraph p11">这是个段落</p>
< p class="p1paragraph p11">这是个段落</p>   //不会被选中，p1paragraph被看作一个整体
< p class="p1">这是个段落</p>
< p class="paragraph p1 p11">这是个段落</p>   //与位置无关，这行也会被选中
< p class="p11">这是个段落</p>

3.E[att~=“val”] 选择有att属性的元素，且属性值列表中有一个符合val的元素

比如我们的class属性，它的值通常是多个样式，中间以空格隔开，只要有一个值符合就被选中

p[class~="p1"]{ color:red;}    //选中p元素下class值包含p1的元素

 <p class="p1 paragraph p11">这是个段落</p>
<p class="p1paragraph p11">这是个段落</p>   //不会被选中，p1paragraph被看作一个整体
<p class="p1">这是个段落</p>
<p class="paragraph p1 p11">这是个段落</p>   //与位置无关，这行也会被选中
<p class="p11">这是个段落</p>