Home > Developer > Web Develop
CSS Study Notes II. css Study Notes
When we browse the website, we will click some links. These links have different effects before and after the point. These effects are implemented using the pseudo element selector.
Pseudo element selector:
Some selectors are pre-defined in httml to become pseudo elements.
Format: Label name: pseudo element: ClassNameTag name. Class Name: pseudo element
Hyperlink status:
A: link: the hyperlink is not clicked.
A: status after visited is accessed
A: hover: move the cursor over the hyperlink (not clicked)-> hover the cursor over
A: Status of active click hyperlink
Sequence of use: L-V-H-A. It is A status before and after clicking
It is best to use IE browser to test, Some browsers may not be able to see the effect
<Style type = "text/css">/* unaccessed */a: link {background-color: # 06F; color: # FFF; text-decoration: none; font-size: 15px;}/* hover over the mouse */a: hover {background-color: # FFF; color: # F00; font-size: 20px ;} /* click effect */a: active {background-color: #000; color: # FFF; font-size: 25px;}/* click to effect */: visited {background-color: # FF9; color: #000; text-decoration: line-through ;}</style>
Paragraph labels have the same effect as above.
P: first-line: the first line of text of a paragraph
P: first-letter: the first letter in the paragraph
: Focus: With focus Element(Ps: IE6 not supported, FIrefox, google can see the effect)
<Style type = "text/css"> div: hover {/* can be added to a div like a hover effect */background-color: # F00; color: # FFF ;} input: focus {background-color: # F0F ;} </style>
CSS style combination application:
Css can be used with a large number of tags in html.
<Head lang = "en"> <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 line */border-right: # FC0 dashed 3px;/* dashed virtual */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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
