css(层叠样式表)

css就可以分别网页的各个层次设置样式

css的样式表有一个一个的样构成,一个样式又由选择器和声明块构成.

基本语法:

-选择器{样式名:样式值;}

行内样式

这种样式不用填写选择器，直接编写声明即可,但是样式不能够重复

基本语法:

<p  style="color:red;font-size:30px"></p>

内部样式表

可以为较多的元素设置样式,但是这种方式只能在一个页面中使用,不能在多个页面中重复使用

基本语法:

<style>

    P{colo:red;font-size:30px;}

</style>

外部样式:

可以将所有的样式保存到一个外部的css,然后通过<link>标签将样式表引入到文件中,这种方法可引入多个页面,同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。

<link rel="stylesheet" type="type/css "  herf= 'style.css'>

块元素: 会独占一行.div li p h1-h6 ul(p不能包含其他的块元素)

内联元素:span a img iframe input(a  可以包含任意元素但是不能包含本身)

div  和span没有含义只是用来做布局的

选择器:

元素选择器:

语法:p {   }     选择页面中所有p标签

类选择器:

语法:   .class  hello{  }     .hello选中页面所有class属性为hello的元素

ID选择器:  

语法:#id{}      比如#box会选中页面中id属性值为box的 元素，和class属性不同，id属性是不能重复的。

复合选择器(交集选择器)

语法:  -选择器1选择器2{    }   同时满足条件的元素   

群组选择器（并集选择器)

语法:   选择器1,选择器2,选择器3{    }   •比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素

通用选择器

语法:*{}    选择页面中所有的元素

后代选择器

标签之间的关系

•祖先元素:–直接或间接包含后代元素的元素。

•后代元素:–直接或间接被祖先元素包含的元素。

•父元素:–直接包含子元素的元素。

•子元素:–直接被父元素包含的元素。

•兄弟元素:拥有相同父元素的元素-

语法:    祖先元素 后代元素{   }

属性选择器：

可以选择带有特殊属性的标签

语法：[属性名]

[属性名="属性值"]

[属性名~="属性值"]

[属性名|="属性值"]

[属性名^="属性值"]开头

[属性名$="属性值"]结尾

[属性名*="属性值"]包含

子元素选择器：

语法：父元素 >  子元素{  }    比如body  >   h1      将选择body子元素中的所有h1元素

其他子元素选择器

•:first-child全部元素中去查找           –选择第一个子标签    （谷歌和火狐不适用） 

•:last-child             –选择最后一个子标签

–选择指定位置的子元素•:nth-child

•:first-of-type指定元素去查找

•:last-of-type

•:nth-of-type

–选择指定类型的子元素

链接定义样式

正常连接:         a:link

访问过的链接:    a:visited(只能定义颜色)

鼠标滑过的链接 :   a：hover(只能定义字体颜色)

正在点击的链接： a：active

获取焦点：      :focus

指定元素：     :before

指定元素后：     :after

•选中的元素 ：     ::selection        ::-moz-selection兼容火狐

首字母：          :first-letter

首行：     ：first-line