css基礎

ThreeWords 發布于2019-08-29 13:19 / 1225人閱讀

摘要：引入瀏覽器私有屬性規則語法標識符標識符常用選擇器簡單選擇器標簽選擇器類選擇器選擇器通配符選擇器屬性選擇器選中屬性屬性包含屬性選中屬性值等于或開頭的選中屬性值以開頭的選中屬性值以結尾的選中屬性值包含的偽類選擇器以上兩個只用

引入

瀏覽器私有屬性

chrome, safari

-webkit-

firefox

-moz-

-ms-

opera

-o-

@規則語法

@標識符 xxx;

@標識符 xxx {}

常用

@media

@keyframes

@font-face

選擇器

簡單選擇器

標簽選擇器

p{color: red;}

類選擇器

.className{color: red;}

id選擇器

.idName{color: red;}

通配符選擇器

*{color: red;}

屬性選擇器

/*選中屬性*/
[att]{color: red;}
[disabled]{color: red;}
/*屬性att=val*/
[att=val]{color: red;}
[type=button]{color: red;}
/*包含屬性att=val*/
[att~=val]{color: red;}
/*選中屬性值等于val或val-開頭的*/
[att|=val]{color: red;}
/*選中屬性值以val開頭的*/
[att^=val]{color: red;}
/*選中屬性值以val結尾的*/
[att$=val]{color: red;}
/*選中屬性值包含val的*/
[att*=val]{color: red;}

偽類選擇器

a:link{color: gray;}
a:visited{color: red;}
/*以上兩個只用于鏈接*/
a:hover{color: green;}
a:active{color: orange;}

:enabled

:disabled

:checked 單選框復選框

:first-child

:last-child

:nth-child(even) 選中偶數項

:nth-child(3n+1) 選中第1，4，7...項

:nth-last-child(3n+1) 選中第1，4，7...項

：only-child 選中只有一個子元素的項

:first-of-type

:last-of-type 其余同上

dd:first-of-type{color: red;}
dt:first-of-type{color: red;}

:only-of-type

span:only-of-type{color: red;}

不常用的偽類

:empty

:root

:not()

:target

:lang()

偽元素選擇器

::first-letter 選中第一個字母

::firt-line 選中第一行

::before{content: "before"} 在某個元素之前插入content的內容

::after{content: "after"}

::selection 選中被選中的元素

組合選擇器

后代選擇器

.className p{color: red;}

子選擇器

.className>p{color: red;}

兄弟選擇器

/*選擇h2之后的緊跟著p標簽*/
.h2+p{color: red;}
/*選擇h2之后的p標簽*/
.h2~p{color: red;}

選擇器分組

h1,h2,h3{color: red;}

css優先級

行內樣式

ID選擇器

類偽類和屬性選擇器

標簽選擇器和偽元素選擇器

css優先級改變

改變先后順序

優先級相同，后面的會覆蓋前面的

提升優先級選擇器

在選擇器前面加上標簽選擇器

!important

字體

font-size

em 基于父元素的倍數

百分比

font-family

font-weight

normal | bold | bolder | lighter

大多數字體只支持normal bold

font-style

normal

italic 斜體

oblique 傾斜（強制傾斜）

line-height

normal

px em

對齊方式

text-alogn

left

right

center

justify 兩端對齊

vertical-align

baseline

sub 下標

super

top

text-top

middle

bottom

text-bottom

百分比

text-indent 縮進

px em 百分比

2em縮進2個字

格式處理

white-space 是否保留換行，是否合并空格

normal 合并會自動換行

nowrap 不換行

pre 保留換行空格 tab

pre-wrap 在pre的基礎上自動換行（常用）

pre-line 只保留還行

word-wrap

normal

break-word 長單詞自動換行

word-break

normal

keep-all

break-all

文本修飾

text-shadow

    /*x偏移，y偏移，模糊半徑*/
    text-shadow: x, y, radio, #f00;

text-decoration

underline 下

overline 上

line-through 中

高級設置

text-overflow

clip

ellipsis

/*一行顯示文本，超出顯示...*/
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

cursor 鼠標形狀

url

auto

default

none

help

pointer 手型

zoom-in 放大鏡

zoom-out

move

強制繼承

inherit

盒模型

邊距邊框填充內容

margin border padding content

width | 百分比 | auto | inherit

height

水平居中

margin: 0 auto;

border

border-width

border-style solid | dashed | dotted

border-color

border-radius 圓角

x 方向半徑4個值 / y方向半徑4個值

/*圓形*/
border-radius: 50%;

overflow

visible 默認

hidden 隱藏

scroll 滾動

auto 超出自動顯示滾動條

box-sizing

content-box | border-box

box-shadow

/*水平偏移 垂直偏移 模糊半徑 陰影大小 顏色*/
box-shadow: 4px 6px 3px 2px red;
/*內陰影 水平偏移 垂直偏移 模糊半徑 顏色*/
box-shadow: inset 4px 6px 3px red;

outline 輪廓，不占空間

outline-width

outline-style solid | dashed | dotted

outline-color invert 和當前顏色相反

背景

background-color

#fff

rgb()

rgba()

transparent 全透明

始終在最底層

background-image

url()

多張圖片，先寫的在上層

background-repeat

background-attachment

scroll

local 背景隨內容移動

fixed

background-position

left right center top bottom

background-position: 10px 20px;
background-position: right 10px top 20px;
background-position: 20% 50%;
/*居中*/
background-position: center center;
background-position: 50% 50%;

應用圖標精靈

linear-gradient() 線性漸變

/*從上到下*/
background-image： linear-gradient(red, blue);
/*從下到上*/
background-image： linear-gradient(to top, red, blue);
background-image： linear-gradient(to right bottom, red, blue);
/*從下往上 0度*/
background-image： linear-gradient(0deg, red, blue);
/*三種顏色*/
background-image： linear-gradient(green, red, blue);

radial-gradient 徑向漸變

background-image： radial-gradient(closest-side, red, blue);
background-image： radial-gradient(farthest-side, red, blue);
background-image： radial-gradient(closest-corner, red, blue);
/*默認大小 最遠距離*/
background-image： radial-gradient(farthest-corner, red, blue);
background-image： radial-gradient(circle 100px, red, blue);

repeating--gradient 重復 為linear radial

background-origin 位置相對點

padding-box

border-box

content-box

background-clip 裁剪

padding-box

border-box 默認

content-box

background-size

px 百分比

auto

cover 撐滿整個容器

contain 撐滿整個容器但寬高不能超出

云服務器 GPU云服務器 css基礎基礎css css基礎教程基礎選擇器css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112526.html

#WEB安全基礎 : HTML/CSS | 文章索引

摘要：黑體本系列講解安全所需要的和黑體安全基礎我的第一個網頁黑體安全基礎初識黑體安全基礎初識標簽黑體安全基礎文件夾管理網站黑體安全基礎模塊化黑體安全基礎嵌套列表黑體安全基礎標簽拓展和屬性的使用黑體安全基礎嵌套本系列講解WEB安全所需要的HTML和CSS #WEB安全基礎 : HTML/CSS | 0x0 我的第一個網頁 #WEB安全基礎 : HTML/CSS | 0x1初識CSS #WEB安全基...

EscapedDog 2019-04-23 11:53 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

mj 2019-08-28 18:13 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

Yu_Huang 2019-08-01 14:48 評論0 收藏0
前端之CSS基礎學習

摘要：上面五個問題就是我總結的基礎概念，學習過程中一定要把它們弄明白別忘了有哦。請帶著以下幾個問題進行學習 CSS是什么 CSS的引用方式 CSS選擇器 CSS優先級 CSS盒模型基礎知識學習和實例演練教程 MDN中css教程CSS基礎學習教程（css快速入門）CSS參考手冊（便于了解更多css屬性）CSS3教程（適用于移動端開發的css新特性）入門學習，一定要快，沒有必要花大量時...

Hwg 2019-08-29 12:32 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0