CSS总结 最后的选择符和字体、元素常见样式

在伪类选择符中，还有很多，其中比较有意思的是E:target

当我们想做出点击超链接后链接变色且其他链接变回原来的颜色时，就可以用到这个选择符

        <a href="#a1" id="a1">链接1</a>
	<a href="#a2" id="a2">链接2</a>
	<a href="#a3" id="a3">链接3</a>
	<a href="#a4" id="a4">链接4</a>

a:target{color: red;}

以上是html和css代码，当我们进入页面时没有任何不同，但是点击其中一个链接会发现链接变成红色，再点击其他链接时之前的链接会变回原色，转而被点击的链接变色。

可以用于导航的链接。

接下来是属性选择符，这个选择符在我看来非常方便，类似于id和class选择符，但是更加灵活。

属性选择符的几种类型：E[att]/E[att="val"]/E[att~="val"]/E[att^="val"]/E[att$="val"]/E[att*="val"]/E[att|="val"]

*注意，为了方便书写，上面E表示选中的元素，att表示该元素的属性，val表示该属性值的某段内容

以上内容我的记忆方法是:
E[att]  选择含有att属性的E元素

E[att="val"]  选择att属性为val的E元素

下面的几个主要是对属性值的不同描述：

~=    含有val且用空格隔开的

^=    val开头的

$=    val结尾的

*=    只要出现val的

|=    含有val且用-隔开的

例如,下面给出一组a标签，要设置为对应字体所写的颜色:

<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>

若要仅用3条css代码改变颜色且不对html代码作任何修改,用以上选择符可以轻松做到：

p{
    text-shadow: 3px 3px 1px #bebebe;
    color: #000;
}

a[class^=column]{color: red}  /*或者a[class*=column]{color: red}*/
a[href$=doc]{color: green}    /*或者a[href*=doc]{color: green}*/
a[title*=box]{color: blue}

然后是伪对象选择符，用得比较多的是E:first-letter
例如，想让下列段落的第一个字变大：
<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是
一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
则实现的CSS如下：

p:first-letter{font-size: 30px;}

　　

若要改变的是第一行的样式，则可以用E:first-line，相信看到这里大家都知道怎么用了，下面是将第一行变成红色字体的CSS代码
：

p:first-line{color: red;}

　　

**首行样式会根据浏览器窗口大小自动调整，永远只让第一行的样式改变
**在CSS3中，中间的：号是两个，即E::first-letter/E::first-line

接下来是属性，首先总结一下字体的样式
总体而言，字体的属性有：
font-family 使用的字体库(如黑体，楷体等）
font-size 字体大小（建议使用px单位）
line-height 行高
font-weight 字体粗细（bold，或者以100位间隔从100到900）
font-style 斜体（normal,italic,oblique.其中italic和oblique效果一样）
color 字体颜色(可以是颜色单词，可以是rbg/rgba，可以是16进制数)
text-decoration 装饰线条(underline，line-through，overline.分别是下划线、上划线、删除线）
text-shadow 文字阴影(必须要有两个px单位设置水平和垂直的偏移距离，另外可以选择模糊程度和颜色)

其中font-family、font-weight、font-style、font-size、line-height可以合在一起写，例如，要设置20px大小，30px行高，加
粗倾斜的黑体字体可以这样设置：
p{font:bold italic 20px/30px "微软雅黑";}
设置颜色为蓝色，带下划线，且带有水平偏移10px，垂直偏移15px，模糊4px，颜色为红色的阴影的字体：

p{
color:blue;
text-decoration: underline;
text-shadow:10px 15px 4px red;
}

 

　　

元素样式：
元素一般都有其大小和内容，那么自然少不了内边距、外边距和边框（如p，div，h1等）
width 宽度（单位px或者百分比或者auto，百分比表示与浏览器宽度的比例，auto表示根据内容大小自动调整）
height 高度（同上）
margin 外边距（元素与外部其他元素之间的距离，分上下左右）
padding 内边距（元素与元素内容之间的距离）
opacity 透明度（0.0-1.0之间，小数点前的0可以省略）
border 边框(包括边框宽度border-width、边框颜色border-color、边框形式border-style，可以合在一起写）
background 背景色

**border-style有5种形式，solid实线、dashed虚线、dotted点线、doble双线，默认为none（不显示）

例如，若要将div设置为100px宽度，150px高度，内边距为10px，外边距为15px，透明度为0.4，边框为虚线，边框宽度为2px，边框
颜色为红色,背景色为黄色：

div{
 100px;height: 150px;
padding: 10px;margin: 15px;
opacity: .5;
border: 2px dashed red;
background: yellow;
}

　　

背景图片我单独拿出来：
background-image:url() 设置背景图片，默认是从左到右平铺
background-repeat 默认是repeat即平铺，一般设置为no-repeat不平铺
background-position 设置图片位置，可以取百分比，数值，位置，百分比是相对于元素的比例，数值相当于坐标位置，
位置可以理解为图片的对齐方式left/right/center和top/bottom
background-size CSS3的新属性，设置图片长、宽大小

例如，设置背景图片为当前目录下的bai.jpg，取消平铺且位置靠右上角，宽度为160px,高度为200px：

background-image: url(bai.jpg);
background-position:right top;
background-repeat: no-repeat;
background-size: 160px 200px；