css入门（一）级联样式单和选择器

一、级联样式单

1.引入外部样式文件

<link type = "text/css" rel = "stylesheet" href = "css样式文件的URL">

其中type和rel指定了CSS样式单不可修改，而其中的href属性指向了CSS样式单文件的地址，此处的地址既可以是相对地址，也可以是互联网上的绝对地址

2、使用内部CSS样式

    <style type="text/css">
    </style>

这种方式定义的CSS不便于被其他网页使用，写在html文件中也会导致文件过大加重网络负载，也不便修改。但是如果只是适用于一个界面的CSS我们可以使用这种方式。

3.适用行内样式

直接在标签中加入 style=“”可以直接设置CSS样式。这种会使HTNL代码和CSS代码交错在一起，显得不太美观。但是在设置单独标签中起着重要作用。

其中优先级问题 行内>内部>外部。

二、CSS选择器

selector{
    pro:value;

    pro:value;

    pro:value;
}    
其中selector决定该样式定义对哪些元素起作用, pro:value 表示对这些元素的属性起什么作用。

 

1.元素选择器

E{...} 其中E为任意有效的HTML代码元素名，甚至可以用“*”来匹配HTML的任意元素。我们常用的一个定义方法

*{margin:0,padding:0 }

2.属性选择器

多用于input标签

div   {}   <div>没有任何属性的div</div>
div[id]   {} <div id= "a">带id属性的div</div>
div[id*=xx] {} <div id = "zzxx">id属性值包括xx子字符串的div</div>
div[id^=xx] {} <div id = "xxyy">id属性值以xx子字符串开头的div</div>
div[id=xx] {}  <div id = "xx">id属性值为xx的div</div>

优先级依次升高，后面定义的相同样式会覆盖前面的样式属性。

3.id选择器

直接用#锁定id 定义属性 在不涉及js的情况下可以id重名 定义一组标签的属性

优先级最高

4.class选择器

直接用.+class名字选择一组或者一个标签，因为所有的标签几乎都可以指定class属性，也是class属性的唯一作用在选择器起作用。

5.包含选择器

用空格来隔开 作为有效的选择器

其中用于指定目标选择器必须处于某个选择器对应的元素内部。

ul li 也就是选择了ul下包括的li

6.子选择器

用>来连接元素

子选择器用于指定目标选择器必须是某个选择器的对应的元素的子元素。

三 CSS伪选择器

 1.结构性伪类选择器

Selector: first-child :匹配符合 selector 选择器，而且必须是其父元素的第一个子节点的元素。

Selector: last-child:匹配符合 selector 选择器，而且必须是其父元素的最后一个子节点的元素。

Selector: nth-child（n）:匹配符合 selector 选择器，而且必须是其父元素的第n个子节点的元素。 索引从一开始的

Selector: nth-last-child（n）:匹配符合 selector 选择器，而且必须是其父元素的倒数第n个子节点的元素。

Selector: only-child:匹配符合 selector 选择器，而且必须是其父元素的唯一一个子节点的元素。

解决了一些js查找结点的问题，处理起来更方便

 2.UI元素状态伪类选择器

Selector: link :匹配符合 selector 选择器且未被访问前的元素（通常只能是超链接）。

Selector: visited:匹配符合 selector 选择器且已被访问过的元素（通常只能是超链接）。

Selector: active:匹配符合 selector 选择器且处于被用户激活的状态（在鼠标点击与释放之间的事件）状态的元素。

Selector: hover:匹配符合 selector 选择器且处于鼠标悬停状态的元素。

Selector: fouces:匹配符合 selector 选择器且已得到焦点的元素。

Selector: disabled:匹配符合 selector 选择器且处于不可用状态的元素。

Selector: deflaut:匹配符合 selector 选择器且处于页面打开时处于选中状态（即当前没有被选中状态亦可）的元素。

还有一个 not伪元素 选择器

Selector1：not（Selector2）：匹配符合 selector1 选择器，但不符合 selector2 选择器的元素。即 selector1-selector2