關於HTML、CSS基礎總結

時間  2019-11-15
標籤 關於 html css 基礎 總結 欄目 HTML 简体版
原文   原文鏈接

本博客用於本人在學習前端的積累和感悟，僅供學習參考和翻閱css

1、HTML前端

 
<head>
頭部
<meta charset="UTF-8">
定義這是一個HTML文件，聲明使用的字符格式
<title>
標籤名，顯示在標籤頁
<link rel="stylesheet" href="*.css"/>
聲明文檔與外部資源的關係（引入.css樣式文件）
css重置技術
*
<link rel="stylesheet" href="reset.css/Normalize.css"/>
<link rel="stylesheet" href="global.css"/>
先將樣式重置歸零，再引用相應的樣式
reset.css（移動端）/Normalize.css（跨平臺，修復bug） 清除標記自身帶來的樣式，保證跨瀏覽器的一致性
<input type="reset">     重置按鈕
<mark>
帶標記的文本，默認爲黃色背景色
<blockquote>
大塊引用文本（無引號，有縮進）
<q>
小塊引用（帶引號，無縮進）
<aside>
？？？文本，用於連接、側邊欄等不影響文檔的總體性
<address>
做者信息，斜體，通常放在頁面最下方
 
<input type="text" placeholder="框中內容">
輸入內容
 
<select name="" id="">
<option value="">選項1</option>
<option value="">選項2</option>
</select>
下拉菜單
 
form action=""
form methed=""     get/post
 
<sup>          文字上標
<sub>          文字下標
 
&reg;
已註冊符號
&copy;
版權符號

 

2、CSS
文本樣式
text-align: justify;                    文本格式：兩端對齊
text-indent: 40px / 10%;         文本首行縮進
font-family: "楷體"；               字體樣式：楷體
font-style: italic;                      字體樣式：斜體
line-height: 100px;                 總高度100，文本居中顯示，使文本中線對齊
vertical-align:           baseline,      sub,     super,      top,                          text-top
文本對齊方式：默認，對齊下標，對齊上標，對齊行中最高元素，頂端與父元素字體頂端對齊，
text-transform: capitalize;     首字母大寫
text-transform: uppercase;     選中字母大寫
text-transform: lowercase;     選中字母小寫
letter-spacing: 10px;     字間距10px
margin
外邊距（值能夠爲負），垂直方向的外邊距會重疊（取大值）
border
邊框
border: 1px solid red;     設置寬度爲1像素的紅色實體邊框線
border: 1px dashed red;     虛線邊框線
border: 1px dotted red;     點狀邊框線
border: 1px double red;     雙線邊框線
border-radius: 50%;     四邊全圓倒角（長寬相同呈正圓）
border-top-left-radius: 2px;     左上角呈半徑爲2像素的倒角
padding: 10px 20px;      值不可爲負
內邊距：上下10px，左右20px
padding: 10px 20px 30px;
內邊距：上10px，左右20px，下30px
padding: 10px 20px 30px 40px;
內邊距：上10px，右20px，下30px，左40px
outline: 10px solid black;
border要佔用像素，outline不佔用
display: line-block;
將塊級元素轉換爲行內塊級元素
cursor: pointer, waite; w-resize;
鼠標移上以後該元素添加手型：點擊，沙漏，左右位移標識；
transform: skew(20deg);
背景向右傾斜；
transform: rotate(90deg);
順時針旋轉90度
box-sizing: border-box;
將盒模型的邊框包含在content內，讓padding的寬度和border的寬度包含在元素的width內
 
 
觸發bfc
bfc塊級格式化上下文，給父級設置瞭如下屬性，能夠保持父級屬性不被子級影響，反之亦然
  1. 根元素
  2. float
  3. overflow: auto、scroll、hidden;           子級超出父級範圍：自動、出現滾動條、隱藏；    overflow-x: scroll;    overflow-y: scroll;
  4. display: table-cell、table-caption、inline-block、flex、inline-flex;           轉化爲其餘元素
  5. position: absolut、fixed;            
overflow: hidden;
子級超出父級範圍：不顯示；
overflow: scroll
子級超出父級範圍：出現滾動條；          父級的範圍和屬性不變，拉動滾動條能夠查看子級
overflow-x: scroll
 

列表樣式web

li{
list-style: none;          去掉小圓點
list-style: upper-roman;          大寫羅馬數字
list-style: lower-roman;          小寫羅馬數字
list-style: upper-alpha;          大寫英文
list-style: lower-alpha;          小寫英文
}
 
選擇
#id{     }               id選擇器
.class{     }               class選擇器
元素 [ 屬性=屬性值 ] {     }          屬性選擇器
li: first-child; last-child;
選擇第一個元素（當li的父級第一個元素是li時） ，選擇最後一個元素（當li的父級最後一個 元素是li時）
li: first-of-type; last-of-type;
選擇父級裏特定類型的第一個元素 ，選擇父級裏特定類型的最後一個元素
nth-child()     nth-of-type()     用法同上
a: link{     }          未被訪問（初始狀態）
a: hover{     }          鼠標移入/懸停
a: active{     }          點擊時
a: visited{     }          訪問之後
 
僞元素
*: first-letter     第一個字（字母）
*: first-line          第一行
*: before          在...以前
*: after               在...以後
 
僞類
*: nth-child(3n+1)          選擇父級中某個類型爲*的項【每3項選擇一次，第一項從（3*0+1）開始】
*: nth-of-type(3n+1)      選擇父級中特定類型的某項 【每3項選擇一次，第一項從（3*0+1）開始】
 
浮動
  1. 浮動會脫離文檔流
  2. 浮動會致使其父級高度塌陷（高度變爲0）
  3. 行內元素浮動後（脫離文檔流）被視爲塊級元素
  4. 浮動對文字有包裹性（若是文字過少，須要手動設置文本的寬度）
  5. 若是 A 浮動影響了 B ，則在 B 上增長 clear: both 便可消除影響
float: right;               右浮動（列表項從右邊依次排列）
clear: both;               清除浮動
 
定位
相對定位（相對自身原來的位置）
position: relative;
left: -100px;               向左移動100px
絕對定位（脫離文檔流）
position: absolute
top: 0px;                    置頂
非靜態定位（絕對定位會以包含它的非靜態定位元素定位）
父級 position: relative;     定位父集
子級 position: absolute;     定位到父集裏的絕對位置
固定定位（脫離文檔流，以頁面視口爲準）
position: fixed;
 
 
邊框/陰影
線型
boder: 1px solid #58a;          直線
border: 10px dashed red;          虛線
border: 10px dotted black;          點線
border: 10px double blue;          double點線
框
boder-top: 1px solid #58a;          頂部
border-right: 10px dashed red;          右邊
border-left: 10px dotted black;          左邊
border-bottom: 10px double blue;          底部
倒角
border-radius: 10px/50%;          圓倒角
陰影
box-shadow: 5px 5px 20px 10px #000;          元素陰影：X Y 模糊 外延 顏色
 
圖片格式
background-repeat: repeat; no-repeat; repeat-x; reapt-y;          背景圖設置平鋪方式：平鋪 ；不平鋪；水平平鋪；豎直平鋪；
 
背景色漸變
rgb(255,255,255) 白色
rgba(255,255,255,0.5) 白色50%透明度
線性漸變
background: linear-gradient(red, yellow);               縱向背景色漸變：紅色，黃色
background: linear-gradient(to right, red, yellow)          向右漸變色：紅色，黃色
background: linear-gradient(-90deg, red, yellow)          順時針90度漸變色：紅色，黃色
徑向漸變
background: radial-gradient(red, yellow)          徑向漸變（呈圓形擴散）

 

狀態漸變
transition: all/width linear/ease-in 1s;
動做漸變：全部/寬度     勻速     時長
-webkit-transition: all linear .5s     瀏覽器兼容：谷歌
-moz-transition: all linear .5s;     瀏覽器兼容：
-ms-transition: all linear .5s;     瀏覽器兼容：Microsoft
-o-transition: all linear .5s;     瀏覽器兼容：歐朋
transition: all linear .5s;
注：transition屬性需漸變，必須設置原始狀態（如需top: 100px;則先設置top: 0;），不然無漸變效果
 
動畫
animation: name 2s 3/infinite;          動畫屬性，首先聲明（寫在元素屬性裏）
動畫：     名稱     時長     3次/循環
@keyframes name{
from{
}                    從一個狀態變化到另外一個狀態
to     {
}
}
@keyframes name{
0%{
 
}
30%{
              分部制定變化流程
}
100%{
 
}
}
 
圖片替換技術（點擊logo跳轉主頁）
.h1 a{
display: block;                              先將行內標記轉換爲塊集標記
line-height: 200px;                         再修改高度，將文字移除顯示範圍
}
.h1{
          //定義塊大小
overflow: hiddeng;                         將父塊範圍以外的內容隱藏
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程