引入外部樣式
@import url(xxx);
// 舉例：@import url("1.css");
選擇器
參考我的另一篇：CSS選擇器
根據不同的屏幕尺寸設置樣式
@media(條件) {
樣式1:xxx;
...
}
例如根據屏幕寬度改變樣式：
input { /* 默認樣式 */
width: 14.893617021276595%;
*width: 14.840425531914894%; /* *表示兼容IE瀏覽器 */
}
@media (min-width: 768px) and (max-width: 979px) { /* 窗口大小在768~979之間 */
input {
width: 14.3646408839779%;
*width: 14.311449394616199%;
}
}
更多參考
https://blog.csdn.net/u010510187/article/details/82790963
固定樣式不被覆蓋
!important /* 在樣式的值後面加這個就能保證不被覆蓋 */
常用樣式
外邊距
margin: 0px 0px 0px 0px; /* 四個分別表示上右下左的外邊距，也有對應的margin-top等 */
內邊距
padding: 0px 0px 0px 0px; /* 四個分別表示上右下左的內邊距 */
邊框
border: 1px solid green; /* 邊框粗細、邊框類型、邊框顏色 */
背景顏色
background-color: rgba(0, 0, 0, 0.3); /* rgba前三個參數是三原色，最後一個是透明度百分比 */
透明度
opacity:0.4; /* 透明度百分比 */
塊狀/不顯示
display: block|none|inline|inline-block;
/* 分別表示塊狀、不顯示、行內、行內塊狀，div和span區別就在於block和inline */
幾種類型對比：
1.block：塊狀，單獨一行，可以設置寬高（width、height）和內外邊距（margin、padding），默認塊狀的標籤有：<div>/<p>/<li>/<h1/2/3...>...
2.inline：內聯，在一行內按順序排放，不能設置寬高，可以設置左右內外邊距，但上下的不能默認的內聯標籤有：<span>/<a>/<img>...
3.inline-block：內聯塊狀，上面兩個的結合，不會獨佔一行，並且可以設置寬高
詳細參考：https://www.cnblogs.com/zhaowy/p/8400215.html
位置
position: static|relative|absolute|fixed; /* 默認定位/相對定位/絕對定位/固定位置 */
四種定位：
1.默認定位就是自然排列的樣子
2.相對定位就是相對於默認定位偏移了多少
3.絕對定位就是相對於左上角的偏移位置
4.固定位置則是在絕對定位的基礎上，即使滑動滾動條，還是在相對於當前左上角的偏移位置
浮動居左/右
float: left|right;
字體顏色
color: red;
字體粗細
font-weight: 100;
字體大小
font-size: 30px;
文本內容橫向定位
text-align: left; /* 文本居左 */
文本內容縱向定位
vertical-align: top /* 文本居上 */
行高（字體縱向居中）
line-height: 30px;
文本內容不換行
white-space: nowrap;
超鏈接
去除下劃線
text-decoration: none;
未點擊樣式
a:link {
...
}
浮動樣式
a:hover {
...
}
點擊時樣式
a:active {
...
}
訪問後樣式
a:visited {
...
}
圖片
浮動樣式
img:hover {
...
}
其他
鼠標顯示類型
cursor: pointer; /* pointer表示手指 */
滾動條
height: 200px; /* 設置滾動條要先設置個寬/高，當超出時出現滾動條 */
overflow:auto|hidden; /* 內容超過長度顯示進度條、隱藏進度條*/
樣式層數
z-index: 100; /* 高的會覆蓋低的 */
li標籤不顯示前面的符號
list-style: none;
文本內容超出標籤長度顯示省略號
button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}