選擇器:.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 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定,否則所有框都在普通流中定位。也就是說,...