css学习小记

3年的大学生活已经结束，趁着暑假给自己充电，把HTMl的东西再看下“只有提升自己的能力，才可以让自己变的更加的强大”。加油骚年。

一、CSS和HTML的结合方式

CSS和HTML的结合方式有3种：

行级样式表：采用style属性，范围只针对此标签适用

<div style = "border:1px solid red;">行级样式表</div>

内嵌样式表：采用 style标签完成，范围是此页面

外部样式表：采用建立样式表文件，多个页面都可以使用的，采用标签

<link rel = "stylesheet" type ＝＂text/css＂ href = "a.css"</link>

二、CSS选择器

选择器分为2类

1、 基本选择器

标签选择器：指的就是选择器的名字代表html页面上的标签

p{
color:red;
border:1px dashed green;
}

类选择器：规定用圆点.来定义，用class来对它进行引用

.one{
background-color:#ff0099;
}

ID选择器：规定用#来定义

#one{
cursor:hand;
}

通用选择器：用*定义，代表页面上的所有的标签

*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}

2、 扩展选择器

组合选择器：采用逗号隔开

p,h1,h1,.one{
color:red;
}

关联选择器：采用空格隔开

h4 span i{
color:red;
}

伪选择器：

1)：静态伪类：规定是用：来定义，只有2个，只能用于超链接：link表示超链接点击之前的颜色，visited表示连接点击之后的颜色。

a:link{color:red}
a:visited{color:yellow}

注意：

a:link{}定义的样式针对所有的写了href属性的超链接（不包括锚）

a{}定义的样式针对所有的超链接（包括锚）

2):动态伪类：针对所有的标签都适用：

hover：移动到某个标签上的时候

focus：某个标签获得焦点的时候

active：点击某个标签没有放松鼠标的时候

label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}

三、CSS各种选择器的冲突

ID选择器 > 类选择器 > 标签选择器

行级样式表 > 内嵌样式表 > 外部样式表外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则： 就近原则