css所有內容

2022-08-09 09:12:13 字數 2879 閱讀 5384

選擇器:

.class{} 類選擇器

#id{} id選擇器

p{} 標籤選擇器

* {} 通用選擇器

li a{} 後代選擇器

div>p{} 兒子選擇器

div+p{} 毗鄰選擇器

#i1~p{} 弟弟選擇器

p[title]{} 屬性選擇器

p[title="article"]{} 屬性值選擇器

[title^="article"]{} 有title屬性並且title屬性以article開頭

[title$="article"]{} 以article結尾

[title*="article"]{} 包含article

[title~="article"]{} title可以有很多值,其中乙個是article

div,p{} 應用於每個

.c1 p{} 後代選擇器

偽類選擇器:

a:link{} 未訪問過的鏈結

a:visited{} 訪問過的鏈結

a:hover{} 滑鼠移動到鏈結上

a:active{} 選定的鏈結

input:focus{} input輸入框獲取焦點時的樣式

偽元素選擇器:

p:first-letter 首字母特殊格式

p:before 段落前加* 多用於清除浮動

p:after 段落後加? 多用於清除浮動

宣告(屬性:值):

字型:font-family:... 字型家族

font-size:14px 字型大小

font-weight:normal(預設) bold(粗) bolder(更粗) lighter(更細) 100~900(400等同於normal 700等同於bold)

color:#ff0000 rgb(255,0,0) red

文字:text-aligh:left(左對齊) right(右對齊) center(居中) justify(兩端對齊)

text-decoration:none underline overline line-through inherit 常用none去掉a標籤的下劃線

text-indent:32px; 首行縮排32畫素

背景:背景顏色

background-image:url('1.jpg'); 背景

background-repeat:repeat預設平鋪排滿整個網頁 no-repeat(不重複) repeat-x repeat-y;

background-position:right top (20px 20px);背景位置

background-attachment: fixed; 固定位置

邊框:border:2px solid red; 邊框寬2 實線 紅色

border-top-style:solid;

border-right-color:red;

border-bottom-style:none; 下部無邊框

border-radius:50%; 圓形(可以將頭像變為圓形)

display屬性:

display:"none"; 隱藏標籤,一般配合js使用

display:"block"; 變為塊級標籤

display:"inline"; 變為內聯標籤

display:"inline-block"; 變為內聯塊標籤

visibility:hidden; 隱藏標籤,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。

css盒子模型:

margin 外邊距

padding 內邊距

border 邊框

content 內容

順序:top right bottom left

常見居中:margin:0 auto;

(未完待續)

float屬性:

float:left; 向左浮動

float:right; 向右浮動

float:none; 不浮動

clear(解決浮動之後的問題)

clear:left; 在左側不允許浮動元素存在

clear:right; 在右側不允許浮動元素存在

clear:both; 在兩側不允許浮動元素存在

clear:none; 預設值,允許浮動元素出現在兩邊。

一般用以下方式清除浮動:

.c1:after

overflow溢位屬性:

overflow:visible; 預設值,內容不會被修剪

overflow:hidden; 內容會被修剪,修剪掉的隱藏

overflow:scroll; 內容會被修剪,修剪掉的滾動條顯示

overflow:auto; 如果內容被修剪,則出現滾動條

overflow-x:...;

overflow-y:...;

position定位屬性

position:static; 預設值,無定位

position:relative; 相對(原始位置)定位

position:absolute; 絕對定位

position:fixed; 固定 可以用來做返回頂部

z-index自定義模態框屬性:

z-index:999; 數值大的覆蓋在數值小的標籤上

讀檔案所有內容

cfile file file new cfile t strfilename cfile modereadwrite 裝載文字檔案 cfilestatus status if file getstatus t strfilename status 並且關閉檔案 file close file op...

CSS定位內容

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為 一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行 內元素 這是因為它們的內容顯示在行中,即 行內框 css 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定,否則所有框都在普通流中定位。也就是說,...

CSS定位內容

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為 一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行 內元素 這是因為它們的內容顯示在行中,即 行內框 css 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定,否則所有框都在普通流中定位。也就是說,...