Home > Article > Web Front-end > CSS style selector
css is the abbreviation of English Cascading Style Sheets, which is called cascading style sheets and is used to beautify the page. There are three ways of existence:
element inline, page embedding and external introduction. Compare the advantages and disadvantages of the three methods.
Syntax: style='key1:value;key2:value2;'
Use style='xx:xxx;'
In the tag, embed in the page: < ;style type='text/css'> 531ac245ce3e4fe3d50054a55f265927block
Introducing external css files
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/css"; charset="UTF-8"> <title>页面一</title> <link rel="stylesheet" href="commom.css" /> </head> <body> <div style="background-color:red;">123</div> </body> </html>2. Embed c3aab84afb7bed6c51e6bd21ae7bcca2 531ac245ce3e4fe3d50054a55f265927Block
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/css"; charset="UTF-8"> <title>页面一</title> <link rel="stylesheet" href="commom.css" /> <style> .logo{ background-color:red; } </style> </head> <body> <div class='logo'>123456</div> <div class='logo'>aaa</div> </body> </html>in the page, that is, add a < in the code ;style>531ac245ce3e4fe3d50054a55f265927Code block, customize a style, and then call it repeatedly in the subsequent code
##3. Introduce external css files
If there are multiple html files that need to reference custom css styles, then according to the second method, you need to define a style in each html file. In order to solve this problem, you can define a file and write custom style, and then call this style from the file. How to write
style:
<style> .logo{ background-color:red; } #logo{ background-color:red; } a,div{ color:red; } a div{ color:red } input[type='text']{ color:blue } .logo a,.logo p{ font-size:56px; } </style>
1. When the class selector
.logo indicates class='logo', quote the style
2. ID selector
#When logo indicates id='logo', reference this style
3. Combination selector The selector
a, div means that all a tags and div tags refer to this style
4. The associated selector
a div Represents a hierarchical relationship, that is, all div tags below the a tag apply this style.
5. Attribute selector
input[type='text'], attribute label, indicating that all labels of type 'text' refer to this Style
6, .logo a, .logo p means when class='logo', all the following a tags and when class='logo', all the following p tag, refer to the style
For more CSS style selector related articles, please pay attention to the PHP Chinese website!