CSS知识点2

伪类

　　在所有浏览器中，超链接的样式在鼠标点击不同时期的样式是不一样的。

　　(1)默认情况:字体为蓝色，带有下划线。

　　(2)鼠标点击时:字体为红色，带有下划线。

　　(3)鼠标点击后:字体为紫色，带有下划线。

　　我们可以使用text-decoration: none; 来去除超链接下划线。

　　<a href="#">默认超链接样式</a>

　　<a href="#" style="text-decoration: none;">去下划线超链接样式</a>

       链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

       特别的链接，可以有不同的样式，这取决于他们是什么状态。

       这四个链接状态是：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

  当设置为若干链路状态的样式，也有一些顺序规则：

         a:hover 必须跟在 a:link 和 a:visited后面

•        a:active 必须跟在 a:hover后面

 

隐藏元素

　　可分为两种隐藏方式：Display(显示) 与 Visibility（可见性）

 

        display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

 

　　

　　图一  display ：none   隐藏（不占位置）

               两行之间没有空间

　　图二  visibility：hidden      隐藏（占位置）

      两行之间有空间

            由图可知两者之间的差距

 

Display - 块和内联元素   

　　三种标签模式：display

　　　　块标签（block）：  默认占一行   默认宽高为0 可以设置宽高

　　　　行内块标签（inline-block）  不占一行   可以设置宽高

　　　　行内标签（inline）不占一行   不可以设置宽高 宽高根据内容来和 span一样

 

       层级：z-index    数字越大越在上层（前面）层级高

 

转载于:https://www.cnblogs.com/zhai113/p/11275039.html