css權值和優先順序+命名規範_ZenDei技術網路在線

css權值和優先順序+命名規範

-Advertisement-

選擇器權值：標簽選擇器：1 類選擇器和偽類選擇器：10 ID選擇器：100 通配符選擇器：0 行內樣式：1000 !important 在一定條件下，優先順序最高常用的css樣式命名頁面結構頁頭：header頁面主體：main頁尾：footer內容：content/container容器: co ...

選擇器權值：

標簽選擇器：1

類選擇器和偽類選擇器：10

ID選擇器：100

通配符選擇器：0

行內樣式：1000

!important 在一定條件下，優先順序最高

常用的css樣式命名

頁面結構
頁頭：header
頁面主體：main
頁尾：footer
內容：content/container
容器: container

導航：nav
側欄：sidebar
欄目：column
頁面外圍控制：wrapper
左右中：left right center

導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar

左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary

功能
標誌：logo
廣告：banner
登陸：login
登錄條：loginbar

註冊：register
搜索：search
功能區：shop
標題：title

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

2019年度前端知識點總結

本文旨在整理和記錄 2019年度從事前端工作的過程中遇到的問題以及解決問題的思路。內容偏新手且敘述不深，整理的目的是為了方便以後快速查閱之前遇到過的問題。 ...
float浮動以及案例演示

浮動元素會影響後邊的元素，但不會影響前邊的元素清除浮動：方法一：在浮動元素後面添加一個空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ ...
jQuery---offset方法和position方法

offset方法和position方法獲取元素的相對於document的位置 //獲取元素的相對於document的位置 $(".son").offset(); console.log($(".son").offset()); 獲取元素相對於有定位的父元素的位置 //獲取元素相對於有定位的父元素的 ...
jQuery---小火箭返回頂部案例

小火箭返回頂部案例 1. 滾動頁面，當頁面距離頂部超出1000px，顯示小火箭。封裝在scroll函數里，當前頁面距離頂部為$(window).scrollTop >=1000 小火箭顯示和隱藏用fadeIn和fadeOut //當頁面超出1000px的時候，讓小火箭顯示，如果小於1000px，則 ...
css背景顏色、背景圖片，以及列表的多種樣式

背景樣式 • background-color 設置元素的背景顏色。• background-image 把圖像設置為背景。• background-position 設置背景圖像的起始位置。• background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動。• backgr ...
css的盒子模型

width和height是指content內容的寬高當width的值小於min-width時，則寬度為min-width 當width的值大於max-width時，則寬度為max-width min-width和max-width存在相容性問題，在IE6以下不支持哪些元素可以設置寬高屬性塊級元 ...
vue(五)--雙向綁定（v-model）

1.簡單使用：當input裡面的值發生變化的時候，就會自動把變化後的值，綁定到Vue對象上去了 <body> <div id="app"> <input v-model="name" />{{name}}<br /> <textarea v-model="t"></textarea>{{t}}<b ...
css字體樣式+文本樣式

font-family屬性值：具體字體名或者字體集如果是中文或者有單詞之間有空格，需要加雙引號字體集： Serif （有裝飾線） Sans-serif （無裝飾線） Monospace Cursive Fantasy <!DOCTYPE html> <html lang="en"> <head> ...