CSS样式选择器
css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表,用于對頁面進行美化。存在方式有三種:
元素內聯、頁面嵌入和外部引入。比較三種方式的優缺點。
語法:style='key1:value;key2:value2;'
在標簽中使用style='xx:xxx;'
在頁面中嵌入:<style type='text/css'> </style>塊
引入外部css文件
必要性:美工會對頁面的色彩搭配和圖片的美化負責,開發人員必須知道是如何實現的。
分別看下上面三種方式怎么使用:
1、在標簽中使用<style type='text/css'> </style>塊
<!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、在頁面中嵌入?<style type='text/css'> </style>塊
<!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>即在代碼中添加一個<style></style>代碼塊,自定義一個樣式,然后在后面的代碼中可以反復調用
3、引入外部css文件
如果有多個html文件需要引用自定義的css樣式,那么按照第二種方式的做法就需要在每一個html文件中定義一個樣式,為了解決這個問題,可以定義一個文件,寫入自定義的樣式,然后從文件中調用這個樣式即可。
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、class選擇器
.logo表示class='logo'時,引用該樣式
2、id選擇器
#logo表示id='logo'時,引用該樣式
3、組合選擇器選擇器
a,div表示所有的a標簽和div標簽引用該樣式
4、關聯選擇器
a div表示層級關系,即所有a標簽下面的div標簽應用該樣式。
5、屬性選擇器
input[type='text'],屬性標簽,表示所有的type為'text'的標簽引用該樣式
6、.logo a,.logo p表示class='logo'時,下面的所有a標簽和class='logo'時下面所有的p標簽,引用該樣式
轉載于:https://blog.51cto.com/zengestudy/1892346
總結