Please enable JavaScript.
Coggle requires JavaScript to display documents.
css, 一些快速鍵, html - Coggle Diagram
css
屬性
text_decoration 底線
underline; 下底線
none 取消底線
line-through 中線
border(-bottom/right)
1px solid black;
solid / dotted / dashed
font-size
20px;
font-family
verdana;
text-align
center;
line-height 行距幾倍
1.5;
text-indent 首行縮排
字大小x字數(px;)
writing-mode
vertical-lr;
color
border_bottom
background 背景色
排版用元素
display:
:block; 區塊元素
將會撐滿整個區塊
inline; 行內元素
並排在一起
使用css修改html標籤預設的display屬性
position:
absolute; 絕對定位
relative; 相對定位
fixed; 固定位置
float: 浮動效果(讓區塊元素可以併排)
left;
clear: (清除前面設定的浮動效果)
both;
盒模型
box-sizing:border-box; => css3新語法
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} =>因為是css3語法，所以要讓瀏覽器都可以使用此標籤
margin/padding/border
margin 向外推擠
margin:auto 水平置中
margin:2 3 4 5; =>上右下左
margin:2 3; =>上下&左右
padding 向內推擠
這樣div大小就不用再去扣那些padding值，但margin往外推的值一樣要扣掉
box-sizing:content-box; => css2預設值
類別選擇器
Class(.)
.style1{ }
擬態選擇器
針對觸發後的樣式
a:hover{ }
a:active{ }
a:focus{ }
針對某類別全部標籤
h1{ }
後代選擇器
針對某個範圍(div)裡面的小屬性設定(一直找下去)
.style1 h2{color:red;}
一些快速鍵
command+/ => 註解掉程式碼(說明文字)
！+tab => 環境設定
p*3 +tab => 快速生成3組p標籤
ul>li +tab => 快速生成ul&li標籤
lorem +tab =>快速生成假字
html
body
網頁排版用
<div> =>區塊元素
<span> =>行內元素
<div class="clearfix"></div> 還要搭配css語法清除浮動
<ul> / <ol> 項目標籤
<li>
class
class="style1"
h1~h6 (注意網頁上文字權重問題)
<p> 段落文字
<a> 連結標籤
<img> 圖片標籤
head
meta
SEO優化相關
字型編碼標準
charset=“utf-8"
title
link rel="stylesheet" herf="#"
屬性
target=" "
_blank 另開分頁