整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS樣式大全

          CSS樣式大全

          體屬性:(font)

          大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD

          樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

          行高 {line-height: normal;}(正常) 單位:PX、PD、EM

          粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)

          變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

          大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

          修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

          常用字體: (font-family)

          "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

          背景屬性: (background)

          色彩 {background-color: #FFFFFF;}

          圖片 {background-image: url();}

          重復 {background-repeat: no-repeat;}

          滾動 {background-attachment: fixed;}(固定) scroll;(滾動)

          位置 {background-position: left;}(水平) top(垂直);

          簡寫方法 {background:#000 url(..) repeat fixed left top;} /*簡寫*/

          字間距 {letter-spacing: normal;} 數值 /*設置字和字母的間距*/

          對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

          縮進 {text-indent: 數值px;} /*一般給段落設置2em,縮進兩個字符*/

          垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

          詞間距word-spacing: normal;/*設置文本的詞間距,本質是控制空格間距*/

          空格white-space: pre;(保留) nowrap;(不換行)

          顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /*display 屬性的值有很多,可以多研究*/

          邊框屬性: (Border)

          border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;

          border-width:; 邊框寬度

          border-color:#;

          簡寫方法border:width style color; /*簡寫*/

          列表屬性: (List-style)

          類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

          位置list-style-position: outside;(外) inside;

          圖像list-style-image: url(..);

          定位屬性: (Position)

          Position: absolute; relative; static(元素默認的定位);

          visibility: inherit; visible; hidden;(設置元素的可見性,分別是默認 可見 隱藏)

          overflow: visible; hidden; scroll; auto;(設置溢出部分,分別是可見 隱藏 滾動 和自適應)

          clip: rect(12px,auto,12px,auto) (裁切屬性)

          css屬性代碼大全

          一 CSS文字屬性:

          color : #999999; /*文字顏色*/

          font-family : 宋體,sans-serif; /*文字字體*/

          font-size : 9pt; /*文字大小*/

          font-style:itelic; /*文字斜體*/

          font-variant:small-caps; /*小字體*/

          letter-spacing : 1pt; /*字間距離*/

          line-height : 200%; /*設置行高*/

          font-weight:bold; /*文字粗體*/

          vertical-align:sub; /*下標字*/

          vertical-align:super; /*上標字*/

          text-decoration:line-through; /*加刪除線*/

          text-decoration: overline; /*加頂線*/

          text-decoration:underline; /*加下劃線*/

          text-decoration:none; /*刪除鏈接下劃線*/

          text-transform : capitalize; /*首字大寫*/

          text-transform : uppercase; /*英文大寫*/

          text-transform : lowercase; /*英文小寫*/

          text-align:right; /*文字右對齊*/

          text-align:left; /*文字左對齊*/

          text-align:center; /*文字居中對齊*/

          text-align:justify; /*文字分散對齊*/

          vertical-align屬性

          vertical-align:top; /*垂直向上對齊*/

          vertical-align:bottom; /*垂直向下對齊*/

          vertical-align:middle; /*垂直居中對齊*/

          vertical-align:text-top; /*文字垂直向上對齊*/

          vertical-align:text-bottom; /*文字垂直向下對齊*/

          二、CSS邊框空白

          padding-top:10px; /*上邊框留空白*/

          padding-right:10px; /*右邊框留空白*/

          padding-bottom:10px; /*下邊框留空白*/

          padding-left:10px; /*左邊框留空白

          三、CSS符號屬性:

          list-style-type:none; /*不編號*/

          list-style-type:decimal; /*阿拉伯數字*/

          list-style-type:lower-roman; /*小寫羅馬數字*/

          list-style-type:upper-roman; /*大寫羅馬數字*/

          list-style-type:lower-alpha; /*小寫英文字母*/

          list-style-type:upper-alpha; /*大寫英文字母*/

          list-style-type:disc; /*實心圓形符號*/

          list-style-type:circle; /*空心圓形符號*/

          list-style-type:square; /*實心方形符號*/

          list-style-image:url(/dot.gif); /*圖片式符號*/

          list-style-position: outside; /*凸排*/

          list-style-position:inside; /*縮進*/

          四、CSS背景樣式:

          background-color:#F5E2EC; /*背景顏色*/

          background:transparent; /*透視背景*/

          background-image : url(/image/bg.gif); /*背景圖片*/

          background-attachment : fixed; /*浮水印固定背景*/

          background-repeat : repeat; /*重復排列-網頁默認*/

          background-repeat : no-repeat; /*不重復排列*/

          background-repeat : repeat-x; /*在x軸重復排列*/

          background-repeat : repeat-y; /*在y軸重復排列*/

          指定背景位置

          background-position : 90% 90%; /*背景圖片x與y軸的位置*/

          background-position : top; /*向上對齊*/

          background-position : buttom; /*向下對齊*/

          background-position : left; /*向左對齊*/

          background-position : right; /*向右對齊*/

          background-position : center; /*居中對齊*/

          五、CSS連接屬性:

          a /*所有超鏈接*/

          a:link /*超鏈接文字格式*/

          a:visited /*瀏覽過的鏈接文字格式*/

          a:active /*按下鏈接的格式*/

          a:hover /*鼠標轉到鏈接*/

          鼠標光標樣式:

          鏈接手指 CURSOR: hand

          十字體 cursor:crosshair

          箭頭朝下 cursor:s-resize

          十字箭頭 cursor:move

          箭頭朝右 cursor:move

          加一問號 cursor:help

          箭頭朝左 cursor:w-resize

          箭頭朝上 cursor:n-resize

          箭頭朝右上 cursor:ne-resize

          箭頭朝左上 cursor:nw-resize

          文字I型 cursor:text

          箭頭斜右下 cursor:se-resize

          箭頭斜左下 cursor:sw-resize

          漏斗 cursor:wait

          光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}

          六、CSS框線一覽表:

          border-top : 1px solid #6699cc; /*上框線*/

          border-bottom : 1px solid #6699cc; /*下框線*/

          border-left : 1px solid #6699cc; /*左框線*/

          border-right : 1px solid #6699cc; /*右框線*/

          以上是建議書寫方式,但也可以使用常規的方式 如下:

          border-top-color : #369 /*設置上框線top顏色*/

          border-top-width :1px /*設置上框線top寬度*/

          border-top-style : solid/*設置上框線top樣式*/

          其他框線樣式

          solid /*實線框*/

          dotted /*虛線框*/

          double /*雙線框*/

          groove /*立體內凸框*/

          ridge /*立體浮雕框*/

          inset /*凹框*/

          outset /*凸框*/

          七、CSS邊界樣式:

          margin-top:10px; /*上邊界*/

          margin-right:10px; /*右邊界值*/

          margin-bottom:10px; /*下邊界值*/

          margin-left:10px; /*左邊界值*/

          CSS 屬性: 字體樣式(Font Style)

          序號 中文說明 標記語法

          1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

          2 字體類型 {font-family:"字體1","字體2","字體3",...}

          3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

          4 字體風格 {font-style:inherit|italic|normal|oblique}

          5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

          6 字體顏色 {color:數值;}

          7 陰影顏色 {text-shadow:16位色值}

          8 字體行高 {line-height:數值|inherit|normal;}

          9 字 間 距 {letter-spacing:數值|inherit|normal}

          10 單詞間距 {word-spacing:數值|inherit|normal}

          11 字體變形 {font-variant:inherit|normal|small-cps }

          12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

          13 字體變形 {font-size-adjust:inherit|none}

          14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

          文本樣式(Text Style)

          序號 中文說明 標記語法

          1 行 間 距 {line-height:數值|inherit|normal;}

          2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

          3 段首空格 {text-indent:數值|inherit}

          4 水平對齊 {text-align:left|right|center|justify}

          5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

          6 書寫方式 {writing-mode:lr-tb|tb-rl}

          背景樣式

          序號 中文說明 標記語法

          1 背景顏色 {background-color:數值}

          2 背景圖片 {background-image: url(URL)|none}

          3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

          4 背景固定 {background-attachment:fixed|scroll}

          5 背景定位 {background-position:數值|top|bottom|left|right|center}

          6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

          框架樣式(Box Style)

          序號 中文說明 標記語法

          1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

          2 補  白 {padding:padding-top padding-right padding-bottom padding-left}

          3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

          寬度值: thin|medium|thick|數值

          4 邊框顏色 {border-color:數值 數值 數值 數值}  數值:分別代表top、right、bottom、left顏色值

          5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

          6 邊  框 {border:border-width border-style color}

          上 邊 框 {border-top:border-top-width border-style color}

          右 邊 框 {border-right:border-right-width border-style color}

          下 邊 框 {border-bottom:border-bottom-width border-style color}

          左 邊 框 {border-left:border-left-width border-style color}

          7 寬  度 {width:長度|百分比| auto}

          8 高  度 {height:數值|auto}

          9 漂  浮 {float:left|right|none}

          10 清  除 {clear:none|left|right|both}

          分類列表

          序號 中文說明 標記語法

          1 控制顯示 {display:none|block|inline|list-item}

          2 控制空白 {white-space:normal|pre|nowarp}

          3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

          4 圖形列表 {list-style-image:URL}

          5 位置列表 {list-style-position:inside|outside}

          6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

          7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

          更多交流,請登錄bbs.520it.com

          SS樣式被稱為“層疊樣式表”,是一種網頁制作不可或缺的技術,是用于修飾網頁樣式,達到設計效果的一種樣式語言。

          而由于樣式效果非常多,在工作中并非所有的樣式都會用到,因此經常可能遇到某些特定樣式會突然想不起來的情況,更何況對于初學者來說遇到這種情況。

          接下來就跟著小凡一起整理一下這些常用而易忘的css樣式

          css樣式的效果

          01、文字超出部分顯示省略號

          單行文本的超出部分顯示省略號。(一定要給元素本身設置寬度)

          .title {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
          }

          CSS樣式效果圖

          多行文本的超出部分顯示省略號

          .title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }

          CSS樣式效果圖

          PS:建議加上word-break:break-all 否則遇到長單詞會出現很神奇的布局情況。

          圖一

          圖二

          圖一未添加,圖二添加后的不同效果


          02、中英文(長單詞)自動換行

          word-break:break-all; 只對英文起作用,以字母作為換行依據

          word-wrap:break-word; 只對英文起作用,以單詞作為換行依據

          white-space:pre-wrap; 只對中文起作用,強制換行

          white-space:nowrap;都起作用,強制不換行

          PS:網頁中英文單詞通過“_”(下劃線)和 “-”(中劃線)連接的英文單詞在編譯處理是方式是截然不同的。

          下劃線是程序命名方法下劃線命名法的規范,其他命名規范還有駝峰式命名。屬于程序專用的命名規范。可以連接想連的部分為一個變量名,不是單詞

          下劃線連接單詞效果

          中劃線是英語復合詞有連接2個單詞的意思,但前后是2個獨立單詞

          中劃線連接單詞效果

          03、設置表單輸入框placeholder的樣式

          input::-webkit-input-placeholder {
            color:skyblue;
            text-align: center;
          }
          input::-ms-input-placeholder {
            color:skyblue;
            text-align: center;
          }
          input::-moz-placeholder {
            color:skyblue;
            text-align: center;
          }

          CSS樣式效果圖

          04、不固定高度的元素文字垂直居中

          兼容IE8:偽元素和inline-block/vertical-align

          .box::before {
            content:"";
            display: inline-block;
            height: 100vh;
            vertical-align: middle;
            text-align: center;
          }

          CSS樣式效果圖

          不兼容IE8以下: flex布局

          .box {
            background: skyblue;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          CSS樣式效果圖

          05、文字兩端對齊

          .wrap {
            margin: 0 auto;
            width: 800px;
            text-align: justify;
            text-justify: distribute-all-lines;
            /* 兼容IE6-8 */
            text-align-last: justify;
            -moz-text-align-last: justify;
          }

          CSS樣式效果圖

          06、iOS頁面中滑動卡頓

          body,html {
            -webkit-overflow-scrolling:touch
          }

          07、設置滾動條樣式

           .wrap {
            margin: 0 auto;
            width: 300px;
            height: 200px;
            overflow: auto;
          }
          
          
          .wrap::-webkit-scrollbar {
            /* 整體大小樣式 */
            width: 10px;
            height: 10px;
            }
          
          
          .wrap::-webkit-scrollbar-thumb {
            /* 滾動條里的滑塊 */
            border-radius: 10px;
            background-color: skyblue;
            background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,0.2) 55%,
            rgba(255,255,255,0.2) 75%,
            transparent 75%,
            transparent);
          }
          
          
          .test::-webkit-scrollbar-track {
          /* 滾動條的軌道 */
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #ededed;
            border-radius: 10px;
          }

          CSS樣式效果圖

          08、隱藏滾動條但又可以滾動

          .wrap {
            margin: 0 auto;
            width: 300px;
            height: 200px;
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
          }
          
          
          .wrap::-webkit-scrollbar {
          /* 整體大小樣式 */
            display: none;
          }

          CSS樣式效果圖

          09、css繪制三角

          無邊框三角

          div {
            width:0;
            height:0;
            border-width: 0 40px 40px;
            border-style: solid;
            border-color: transparent transparent rgba(0,0,0,0.3);
          }

          CSS樣式效果圖


          帶邊框三角

          div {
            position: relative;
            width:0;
            height:0;
            border-width: 40px 0 40px  40px ;
            border-style: solid;
            border-color:  transparent  black ;
          }
          
          
          div::after {
            content: "";
            position: absolute;
            top:-36px;
            left:-38px;
            border-width: 36px 0 36px  36px ;
            border-style: solid;
            border-color:  transparent red ;
          }

          CSS樣式效果圖

          10、文字間的間距

          text-indent 文章段落首行縮進

          letter-spacing 字與字之間的間距

          .wrap {
            margin: 0 auto;
            width: 600px;
            text-indent: 2em;
            letter-spacing: 10px;
          }

          CSS樣式效果圖

          11、禁止用戶選中元素

          有些時候不想讓用戶選中內容,復制網站上文字內容。

          .wrap { 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }

          12、元素占滿整個屏幕

          以往需要在做全屏遮罩功能的時候會設置height:100%。但是這種做法需要該遮罩層的所有父級元素都逐級設置高度才能使遮罩繼承高度屬性。所以可以使用100vh單位來實現。

          .mask {
            width:100%;
            height: 100vh;
            background: rgba(0,0,0,0.6);
            position: fixed;
            top: 0;
          }

          CSS樣式效果圖

          以上就是為學員們整理的針對工作中對商品/新聞等標題的樣式處理,彈窗做法的一些經常遇到的css樣式實現方法。

          如果覺得有用可以收藏關注,同時還可以留言說出你想知道或者是遇到的不會的樣式處理,我們還將繼續推出后續內容,繼續為大家解讀別的常用css實用技巧以及其他的前端開發新技能,讓我們期待下一期吧。

          文末領資料

          Web前端設計秘籍——30個工作中常用的CSS樣式

          eb前端入門到精通必會的CSS樣式和屬性,昨天更新了Web前端入門到精通必學的標簽及屬性大全,得到了很多同學的認可,有同學想要看接下來CSS以及JS的相關基礎內容,今天他來了!

          抽時間為大家總結了實際開發中必會的CSS、CSS3樣式和屬性(常用和不常用的內容都有標注),做成了網頁版,以便于查詢使用,對于初學者來說可以少走彎路,明確重點,時間誠可貴呀?!

          盒模型

          盒模型:width,height,padding,margin,box-sizing,display,visibility

          單詞

          描述

          width

          設置元素的寬度

          height

          設置元素的高度

          padding-top

          設置元素上內邊距

          padding-right

          設置元素右內邊距

          padding-bottom

          設置元素內邊距

          padding-left

          設置元素左內邊距

          padding

          設置元素四個方向的內邊距

          margin-top

          設置盒子與上方盒子的距離

          margin-right

          設置盒子與右方盒子的距離

          margin-bottom

          設置盒子與下方盒子的距離

          margin-left

          設置盒子與左方盒子的距離

          margin

          設置在上、右、下和左四個方向的外邊距

          box-sizing

          規定計算一個元素實際寬高的方式

          display

          設置元素表現的類型,例如: display:block;設置元素表現為塊元素

          visibility

          設置元素是否是可見的

          常用文本樣式屬性

          常用文本樣式屬性:color,font-size,font-weight,font-style,text-decoration

          單詞

          描述

          color

          規定字體的顏色,也稱為前景色

          font-size

          設置字體大小

          font-weight

          設置字體粗細

          font-style

          設置字體樣式

          text-decoration

          設置添加到文本的裝飾線

          字體屬性

          字體屬性:font-family,@font-face

          單詞

          描述

          ont-family

          設置元素的字體

          @font-face

          定義字體,例如:阿里巴巴普惠體

          段落和行相關屬性

          段落和行相關屬性:text-indent,line-height,text-align,font

          單詞

          描述

          text-indent

          設置首行文本的縮進

          line-height

          設置文本行間的距離(行高)

          text-align

          設置文本對齊方式

          font

          設置所有字體屬性

          CSS的書寫位置

          css的書寫位置:style,link,@import

          單詞

          描述

          style

          1、內嵌式,書寫在head標簽對中,使用<style></style>標簽對,里面書寫css樣式。例如:

          <head>

          <style type="text/css">

          h1 {color:red;}

          p {color:blue;}

          </style>

          </head>

          2、行內式,直接在標簽上書寫style屬性設置css樣式。這種方式不常用,了解即可

          示例:<h1 style="color:blue;text-align:center">這是一個標題</h1>

          link

          鏈接外部樣式文件,例如:

          <head>

          <link rel="stylesheet" href="css文件">

          </head>

          @import

          導入樣式規則 (不常用,了解即可)

          例如:@import url('css文件')

          層疊性和選擇權重

          層疊性和選擇權重:!important

          單詞

          描述

          !important

          提升權重(不常用,了解即可)

          偽元素

          偽元素:::before,::after,::selection,::first-letter,::first-line

          單詞

          描述

          ::before

          作為匹配選中元素的第一個子元素,必須設置content屬性

          ::after

          作為匹配選中元素的最后一個子元素,必須設置content屬性

          ::selection

          設置文檔中被用戶高亮的部分,即使用鼠標圈選的部分(不常用,了解即可)

          ::first-letter

          選擇塊元素中的第一個字母設置樣式(不常用,了解即可)

          ::first-line

          選擇塊元素中的第一行全部文字設置樣式(不常用,了解即可)

          偽類

          偽類::link,:visited,:active,:hover

          單詞

          描述

          :link

          選擇所有未被訪問的超級鏈接

          :visited

          選擇所有訪問過的超級鏈接

          :active

          選擇被用戶激活的元素

          :hover

          選擇鼠標懸停的元素

          css3新增偽類

          css3新增偽類::empty,:focus,:enabled,:disabled,:checked,:root (不常用,了解即可)

          單詞

          描述

          :empty

          選擇沒有任何子級的元素

          :focus

          選擇當前獲得焦點的元素

          :enabled

          選擇已啟用的元素

          :disabled

          選擇禁用的元素

          :checked

          選擇選中的輸入元素(僅適用于單選按鈕或復選框)

          :root

          選擇根元素,即標簽

          標簽選擇器和id選擇器

          標簽選擇器和id選擇器 :element、#id

          單詞

          描述

          element

          標簽選擇器,直接使用元素的標簽名,表示選擇指定元素名稱的所有元素

          示例:p{color:red;}選擇所有的p標簽

          #id

          id選擇器,使用井號#作為前綴,表示選擇指定id的元素

          示例:#firstname{color:yellow;} 選擇id=firstname" 的元素

          class 選擇器

          class 選擇器:.class

          單詞

          描述

          .class

          class選擇器,使用點.作為前綴, 表示選擇指定類名的元素

          p示例:.intro{color:red;} 選擇class="intro" 的元素

          復合選擇器

          復合選擇器:后代,交集,并集

          單詞

          描述

          element1 element2

          后代選擇器,使用空格分隔兩個元素

          示例:.box p{} 表示選擇類名為box的標簽的后代元素p標簽

          element1.class

          交集選擇器

          示例:h3.spec{} 表示選擇有.spec類的<h3>標簽

          element1,element2

          并集選擇器,也叫分組選擇器,使用逗號隔開

          示例:ul, ol{} 表示同時選擇<ul>標簽和<ol>標簽

          元素關系選擇器

          元素關系選擇器:子選擇器,相鄰兄弟,通用兄弟選擇器

          單詞

          描述

          element>element

          子選擇器,使用 > 符號分隔兩個元素

          示例: div > p {} 選擇<div>下的所有子級<p>元素

          element+element

          相鄰兄弟選擇器,使用 + 分隔兩個元素

          示例:div + p {}選擇所有緊接著 <div> 元素之后的第一個<p>元素

          element1~element2

          通用兄弟選擇器,使用 ~ 分隔兩個元素

          示例:p~ul {}選擇同一父元素下的 p 元素之后的每一個 ul 元素

          序號選擇器

          序號選擇器::first-child,:last-child,:nth相關

          單詞

          描述

          :first-child

          匹配其父元素中的第一個子元素

          示例:p:first-child{}匹配<p>的父元素的第一個<p>元素

          :last-child

          匹配父元素中最后一個子元素

          示例:p:last-child{}匹配<p>的父元素下最后一個<p>元素

          :nth-child(n)

          匹配父元素中的第 n 個子元素

          示例:p:nth-child(2)匹配<p>的父元素中第2個子元素<p>標簽

          :nth-of-type(n)

          匹配同類型中的第n個同級兄弟元素 (不常用,了解即可)

          示例:p:nth-of-type(2){}指定每個<p>元素匹配同類型中的第2個同級兄弟元素

          :nth-last-child(n)

          匹配屬于其父元素的第n個子元素的所有元素,從最后一個子元素開始計數 (不常用,了解即可)

          示例:p:nth-last-child(2){}指定每個<p>元素匹配同類型中的倒數第2個同級兄弟元素

          :nth-last-of-type(n)

          匹配同類型中的倒數第n個同級兄弟元素,從最后一個子元素開始計數(不常用,了解即可)

          示例:p:nth-last-of-type(2){}指定每個<p>元素匹配同類型中的倒數第2個同級兄弟元素

          屬性選擇器

          屬性選擇器:[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 、[attribute~=value] 、[attribute|=value] (不常用,了解即可)

          單詞

          描述

          [attribute]

          選擇指定屬性的元素

          [attribute=value]

          選擇指定了屬性和值的元素

          [attribute^=value]

          選擇屬性值帶指定的值開始的元素

          [attribute$=value]

          選擇屬性值帶指定的值結尾的元素

          [attribute*=value]

          選擇元素屬性值包含指定值的元素

          [attribute~=value]

          選擇屬性值包含一個指定單詞的元素

          [attribute|=value]

          選擇屬性值以指定值開頭的元素


          浮動

          浮動:float,BFC,overflow,clear

          單詞

          描述

          float

          設置元素浮動

          BFC

          塊級格式化上下文,它是頁面上一個獨立的容器

          overflow

          溢出隱藏:溢出盒子邊框的內容會被隱藏,也可以讓盒子形成BFC(塊級格式上下文)

          clear

          清除元素的浮動

          定位

          定位:position,relative,top,bottom,left,right,absolute,z-index,fixed

          單詞

          描述

          position

          規定元素的定位類型

          relative

          定義相對定位

          top

          設置定位元素距離頂部的距離

          bottom

          設置定位元素距離底部的距離

          left

          設置定位元素距離左側的距離

          right

          設置定位元素距離右側的距離

          absolute

          定義絕對定位

          z-index

          設置定位元素的堆疊順序,數值大的會蓋住數值小的

          fixed

          定義絕對定位

          鼠標樣式

          鼠標樣式:cursor

          單詞

          描述

          cursor

          設置光標的形狀

          邊框

          邊框:border相關,屬性(solid,dashed,dotted)

          單詞

          描述

          border-width

          設置邊框的寬度

          border-style

          設置邊框線的形狀

          border-color

          設置邊框的顏色

          border-top-width

          設置上邊框寬度

          border-right-width

          設置右邊框寬度

          border-bottom-width

          設置下邊框寬度

          border-left-width

          設置左邊框寬度

          border-top-style

          設置上邊框樣式

          border-right-style

          設置右邊框樣式

          border-bottom-style

          設置下邊框樣式

          border-left-style

          設置左邊框樣式

          border-top-color

          設置上邊框顏色

          border-right-color

          設置右邊框顏色

          border-bottom-color

          設置下邊框顏色

          border-left-color

          設置左邊框顏色

          border-top

          上方向邊框樣式的復合寫法

          border-bottom

          下方向邊框樣式的復合寫法

          border-right

          右方向邊框樣式的復合寫法

          border-left

          左方向邊框樣式的復合寫法

          border

          邊框的復合寫法,設置所有的邊框屬性

          solid

          定義實線邊框

          dashed

          定義虛線邊框

          dotted

          定義點狀線邊框

          圓角

          圓角:border-radius

          單詞

          描述

          border-top-left-radius

          設置左上方的圓角

          border-top-right-radius

          設置右上方的圓角

          border-bottom-left-radius

          設置左下方的圓角

          border-bottom-right-radius

          設置右下方的圓角

          border-radius

          設置圓角的復合寫法

          盒子陰影

          盒子陰影:box-shadow

          單詞

          描述

          box-shadow

          給元素添加陰影效果

          背景:background相關

          單詞

          描述

          background-color

          設置背景顏色

          background-image

          設置盒子的背景圖片

          設置線性漸變背景

          設置徑向漸變背景

          background-repeat

          設置背景圖像是否重復

          background-size

          設置背景圖片大小

          background-clip

          設置背景的繪制區域(不常用,了解即可)

          background-origin

          設置背景圖片顯示區域的位置(不常用,了解即可)

          background-attachment

          設置背景圖像是否固定或者隨著頁面的其余部分滾動(不常用,了解即可)

          background-position

          設置背景圖像的位置

          background

          設置背景樣式的復合寫法

          瀏覽器前綴

          瀏覽器前綴:-webkit-,-moz-,-ms-,-o-

          單詞

          描述

          -webkit-

          谷歌瀏覽器的私有前綴

          -moz-

          火狐瀏覽器的私有前綴

          -ms-

          IE、Edge瀏覽器的私有前綴

          -o-

          歐朋瀏覽器的私有前綴

          2D/3D轉換

          2D/3D轉換:transform,transform

          單詞

          描述

          transform

          對元素進行旋轉、縮放、移動或傾斜

          transform-origin

          設置元素變換的原點 (不常用,了解即可)

          scale

          設置縮放變形(不常用,了解即可)

          skew

          設置斜切變形(不常用,了解即可)

          translate

          設置位移變形

          perspective

          設置透視強度,即“人眼到舞臺的距離”

          還需要總結什么 ?需要的同學留言,做我的粉絲我會寵你 接下來我會抽時間把這15年的Web全棧相關的經驗和知識從入門到精通逐一總結出來


          主站蜘蛛池模板: 无码av免费毛片一区二区| 91福利视频一区| 亚洲一区二区三区无码国产| 国产精品高清一区二区人妖| 国产免费一区二区三区免费视频| 一区二区三区四区精品视频| 色综合一区二区三区| 日韩免费无码一区二区三区 | 精品国产亚洲一区二区在线观看 | 无码人妻精品一区二区蜜桃网站| 国产伦精品一区二区三区视频猫咪| 国产精品日韩欧美一区二区三区| 一区二区三区人妻无码| 国产成人片视频一区二区| 国产精品盗摄一区二区在线| 亚洲乱码av中文一区二区| 亚洲国产韩国一区二区| 亚洲国产精品一区| 国产一区二区三区不卡AV| 国产精品亚洲产品一区二区三区 | 日韩在线一区高清在线| 日韩人妻无码一区二区三区99| 国产午夜精品一区二区三区漫画| 日韩一区二区三区在线观看| 国产综合精品一区二区| 夜精品a一区二区三区| 精品不卡一区二区| 国产福利一区二区三区在线视频 | 国产AV午夜精品一区二区三| 一区视频免费观看| 亚洲国产精品一区二区第一页免| 日本在线电影一区二区三区| 狠狠综合久久av一区二区 | 97久久精品一区二区三区| 国产激情з∠视频一区二区 | 一区二区三区日本视频| 亚洲AV日韩精品一区二区三区| 一区二区三区在线观看视频| 综合久久一区二区三区 | 欧美av色香蕉一区二区蜜桃小说| 亚洲AV成人一区二区三区在线看 |