CSS 基础4（超链接状态、隐藏、css文件、优先级）

CSS调整超链状态

1.伪类，所谓的伪类即被选中的元素处于某种状态的时候 

超链状态有4种 

link - 初始状态，从未被访问过 

visited - 已访问过 

hover - 鼠标悬停于超链的上方 

active - 鼠标左键点击下去，但是尚未弹起的时候

<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

<a href="http://www.12306.com">超链的不同状态</a>

2.去除超链的下划线

默认状态下，超链是有下划线的，但是现在网站上的超链普遍采用无下划线风格。

使用 text-decoration: none 文本修饰的样式来解决

<style>
a.no_underline {text-decoration: none}
</style>

<a href="http://www.12306.com">默认的超链</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>

CSS 隐藏元素的两种方式DISPLAY:NONE; 和 VISIBILITY:HIDDEN;

隐藏元素有两种方式 

display:none; 

visibility:hidden;

使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了

使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

<style>
div.d{
display:none;
}

div.v{
visibility:hidden;
}
</style>

<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
<div class="v">隐藏的div4,使用visibility:hidden隐藏</div>
<div>可见的div5</div>

CSS 把样式写在一个外部文件中

如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护 

这个时候就会选择把所有的css内容，放在一个独立文件里 

然后在html中引用该文件 

通常这个文件会被命名为style.css

1.直接在html里面写样式

样式代码写在style标签里

<style>
.p1{
color:red;
}

.span1{
color:blue;
}
</style>

<p class="p1">红色</p>

<span class="span1">蓝色</span>

2.把样式代码写在style.css，并在html中包含它

创建一个文件叫style.css

其内容为

.p1{
color:red;
}
.span1{
color:blue;
}

然后在html中包含该文件

注：style.css文件里，就不要再使用style标签了

<link rel="stylesheet" type="text/css" href="/study/style.css" />

<link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" />

<p class="p1">红色</p>

<span class="span1">蓝色</span>

3.css是本地文件 如何包含

 在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css 

这时就应该写成 

href="file://d:/style.css"



CSS 样式的优先级

如果style.css中，<style>标签中，style属性上有冲突的样式，那么谁的优先级更高？

1.style标签与外部文件style.css样式重复

外部文件style.css的内容是

.p1{
color:red;
}
.span1{
color:blue;
}

同时style标签中也有一个.p1

那么优先使用： 最后出现的一个

<link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" />

<style>
.p1{
color:green;
}
</style>

<p class="p1">p1 颜色是绿色，优先使用靠的最后出现的</p>

2.style标签上的与style属性冲突

style标签上的与style属性冲突 

优先使用style属性

<style>
.p1{
color:green;
}
</style>

<p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>

3.!important

如果样式上增加了!important，则优先级最高，甚至高于style属性

<style>
.p1{
color:green !important;
}

</style>

<p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>