CSS基础

1.行内样式：将样式直接写在标签里面，需要用style属性

2.内联样式：

将样式写在head里，使用style 属性

3.外部样式：

将样式写在CSS文件里,使用link标签或@import导入外部样式表。

(一)使用< link>标记链接外部样式表

用以下语句来实现外部样式表的链接：< link rel=stylesheet href="example.css">

href 中应包含路径信息，这里所指是该样式表文件与 html 文档在同一目录下。

(二)使用@import导入样式表信息

使用@import命令用以把外部样式表信息导入页面中，它是存在于在< style>和< /style>标记中的。例如：< style type="text/css">

4.三种样式的优先级

就近原则： 行内样式 > 内联样式 > 外联样式 

5.如何选择三种样式

行内样式：如果样式是固定的，并且很少修改的情况下

内联样式：样式针对当前html页面做的样式，并且量比较大的情况下

外联样式：样式是通用的，并且CSS代码很多的情况下

6.基本的三种选择器

标签选择器：标签名{ }

id选择器：#id名{ }

类选择器：.类名{ }

7.属性选择器

语法：[属性名=“”]{ }

具有title属性的元素：[title]{ }

以…开始：[href^=“http”]{ }

以…结束：[href$=“cn”]{ }

Href中包含有i：[href*=“i”]{ }

8.组合选择器：

组合名{}

组合选择器是根据元素在页面中的同级关系进行选择

9.层级选择器：

层级选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素

祖宗后代：div  span{ }

父子选择器：div>span{ }

兄弟选择器：div~span{ }

相邻兄弟选择器：div+span{ }

10.伪类选择器：

伪类选择器是css3中提供的用于快速查找元素的便捷选择器，常用的:nth-of-type选择器

/* span:nth-of-type(2n+1){

    color: #483D8B;

    font-size: 18px;

}

span:nth-of-type(2){

    color: #FF0000;

} */

伪类选择器在超链接上的应用，超链接的字体颜色只有将样式直接作用在超链接上时才会生效

/* 默认为被点击的状态 */

a:link{

  color: red;

}



/* 访问之后的状态 */

a:visited{

  color: darkgoldenrod;

}



/* 处在活动状态 */

a:active{

  color: brown;

}



/* 鼠标悬浮时的状态 */

a:hover{

  color: aqua;

}

11.通配符

*通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能

12.选择器的优先级

行内样式（1000）>id选择器（100）>类选择器（10）>标签选择器（1）