CSS学习笔记二_html/css_WEB-ITnose

我们浏览网站的时候,会点击一些链接,这些链接在点之前,点之后有不同的效果,这些效果就是用伪元素选择器做的

伪元素选择器:

就是在httml中预先定义好一些选择器,成为伪元素

格式:标签名:伪元素:类名标签名.类名:伪元素

超链接的状态:

a :link : 超链接未点击状态

a :visited 被访问后状态

a :hover 光标移到超链接上的状态(未点击)->鼠标悬停

a :active 点击超链接时的状态

使用顺序:L - V - H - A,点击前和点击后是一个状态

最好用IE浏览器测验,有的浏览器可能看不到效果

          /*未访问*/       a:link{            background-color: #06F;  color: #FFF;            text-decoration: none; font-size: 15px;       }        /*鼠标悬停*/        a:hover{             background-color: #FFF; color: #F00;            font-size: 20px;        }        /*点击效果*/        a:active{            background-color: #000; color: #FFF;            font-size: 25px;        }        /*点击后效果*/        a:visited{            background-color: #FF9; color: #000;            text-decoration: line-through;        }

段落标签也有如上的效果

p:first-line : 段落的第一行文本

p:first-letter :段落中的第一个字母

:focus :具有焦点元素 (ps:IE6不支持,FIrefox,google可以看到效果)

                   div:hover{   /*类似于悬停效果 一样可以加在div上*/            background-color: #F00;            color: #FFF;        }        input :focus{            background-color: #F0F;        }        伪元素选择器演示

CSS样式的结合应用:

css可以和html中众多的标签结合使用

               ul{        list-style-type:none;        list-style-image: url(imgs/1.png);    }        table{            border-bottom: #0C0 double 3px;            border-left:#F00 solid 3px;/*solid 实线*/            border-right:#FC0 dashed 3px;/*dashed 虚*/            border-top:#000 groove 3px;            width: 600px;        }        table td{            border: #0CF dotted 2px;            padding: 20px;        }        div{            border: #0F0 dashed 2px;            height: 50px; width: 300px;        }        input{            border: none;            border-bottom: #0CF 1px solid;        }        .Per{            border: none;        }          asd           姓名:         年龄:                   div区域

      
查看更多关于CSS学习笔记二_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did106344

更新时间：2022-11-17 阅读：48次