CSS study notes 2_html/css_WEB-ITnose

When we browse the website, we will click some links. These links have different effects before and after clicking. These effects are done using pseudo-element selectors

Pseudo element selector:

It is to pre-define some selectors in HTML and become pseudo-elements

format: tag name: pseudo-element: class name tag name.class name: Pseudo element

Hyperlink status:

a :link : Hyperlink unclicked status

a :visited Status after being visited

a :hover Status when the cursor moves to the hyperlink (not clicked) ->Mouseover Stop

a :active Status when clicking a hyperlink

Usage sequence: L - V - H - A, before and after clicking It is a status

It is best to use IE browser to test, some browsers may not see the effect

 <style type="text/css">        /*未访问*/       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;        }    </style>

The paragraph tag also has the above effect

p:first-line: the first line of text in the paragraph

p:first-letter: the first letter in the paragraph

:focus: element with focus (ps: not supported by IE6, FIrefox, You can see the effect on google)

    <style type="text/css">              div:hover{   /*类似于悬停效果 一样可以加在div上*/            background-color: #F00;            color: #FFF;        }        input :focus{            background-color: #F0F;        }    </style><hr><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><input type="text"><input type="text"><hr>

Combined application of CSS styles:

css can be used in conjunction with many tags in html

    <meta charset="UTF-8">    <style type="text/css">    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;        }    </style>    <title>asd</title>        姓名:<input type="text">        年龄:<input type="text">        <hr>        <div> div区域 </div>        <hr>        

	单元格二
单元格三	单元格四

---

• 你好
• 你好
• 你好
• 你好