整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
常用內聯樣式：
func-size
color
background-color
內部樣式表：
<style>
選擇器1{
屬性：值；
}
選擇器2{
屬性：值；
}
...
</style>
外鏈方式：
<link rel="stylesheet" type="text/css" href=".css文件名">
樣式優先級：
默認 < 穩文檔內嵌/元素選擇器 < 行內
不發生沖突 同步 發生沖突 后來者居上
選擇器：
標簽選擇器：
p{
color: red;
}
類選著器：
.cls{
樣式
}
<p class="cls">文本</p>
<p class="cls1 cls2"> 文本 </p>
標簽類結合：
p.cls{
樣式
}
表示在指定標簽中匹配class屬性
id選著器：
#nav{
樣式
}
<div id="nav"></div>
群組選擇器：
div, p{
樣式
}
<div></div>
<p></p>
后代選擇器：
#nav #npc/div{
樣式
}
子代選擇器：
選擇器1>選擇器2/標簽{
樣式
}
偽類選擇器：
超鏈接偽類選擇器：
:link 訪問前
:visited 訪問后
:active 鼠標點按
:hover 鼠標滑過
其他元素偽類選擇器：
:hover 鼠標滑過
:active 鼠標點按
偽類選擇器只能和其他選擇器/元素結合使用
p:hover{
鼠標滑過p元素的新樣式
}
選擇器優先級：
標簽選擇器： 1
類/偽類選擇器： 10
id選擇器： 100
行內選擇器： 1000
尺寸單位：
px
%
in 英寸 1in 2.54cm
pt 榜 1pt = 1/72 in
cm
m
deg 角度
顏色單位：
英文單詞（transparent: 透明）
rgb(r,g,b) 0~255
rgba(r,g,b,a)透明度
十六進制：#fff
元素分類：
塊元素
獨占一行 支持寬高
div h1 p ul ol table form
行內元素
可以共行 大小由內容決定
span i b label u sub sup
行內塊元素
可以共行 支持寬高
img input
常用屬性：
img{
width: 300px;
height: 300px;
color: red;
background-color: #fff;
font-size: 24px;
font-weight: normal; 取消字體加粗
text-decoration: none; 取消下劃線
vertical-align: top/middle/bottom;
左右元素與其的對齊方式（只能在行內塊元素中使用）
}
尺寸：
img{
width: 300px/50%;
height: 300px/50%;
溢出處理：
overflow: visible/hidden/scroll/auto;
默認可見/溢出部分不顯示/始終有滾動條溢出可用/自動產生滾動條
}
邊框：
div{
border: width style color;
寬度 樣式 顏色 缺一不可
border: 1px solid/dashed/dotted/double;
實線/虛線/點線/雙線
border: none; 取消邊框
單獨設置：
border-top: 上
border-right： 右
border-bottom: 下
border-left: 左
border-width： 寬度
border-style: 樣式
border-color: 顏色
三角標：
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid green;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
輪廓線：
div{
outline: width style color;
outline: none; 取消輪廓線
}
圓角邊框：
div{
border-radius: 10px/10%;
超過50%就是圓形
border-radius: 10px 20px 30px 40px; 上 右 下 左
一個值：表示是個角相等
兩個值：表示上下、左右相等
三個值：左右相等 其他分別設置
四個值：表示上右下左全不分別設置
}
邊框陰影：
div{
box-shadow: offset-x offset-y blur spread color
水平偏移 垂直偏移 延伸距離(可以省略) 陰影顏色
box-shadow: 10px 10px 10px pink;
}
盒模型：
外邊距：
div{
margin: 10px/10%;
有四個值 最少一個 最多4個
效果同上（圓角邊框）
margin: 0px; 清除外邊距
margin: 0px auto; 在父元素內水平居中
margin: -10px; 位置微調
單獨設置：
margin-top: 上
margin-right: 右
margin-bottom: 下
margin-left: 左
可以是像素也可以是百分比
默認具有外邊距的元素：
body p h1~h6 ul ol
}
內邊距：
div{
padding: 10px/10%;
有四個值 最少一個 最多4個
效果同上（圓角邊框）
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
具有默認內邊距的元素：
ol ul 文本框 密碼框 按鈕 td
}
聲明盒模型計算方式：
div{
box-sizing: border-box/content-box;
內邊距+邊框+內容的共同尺寸/默認值
}
改變元素類型：
div{
display: block/inline/inline-block/none;
轉換為塊元素（顯示元素）/轉換為行內元素/行內塊元素/隱藏元素
}
背景相關屬性：
背景顏色：
background-color:red;
背景圖片：
div{
background-image：url("./1.jpg")
圖片平鋪：
background-repeat: repeat/no-repeat/repeat-x/repeat-y;
水平和垂直平鋪/不重復平鋪/水平平鋪/垂直平鋪
圖片尺寸：
background-size: 10px 10px/10%/cover/contain;
當前元素寬 高/元素比例/將圖片拉伸全部覆蓋元素超出部
分裁剪掉/將圖片拉至剛好被容納 超出部分不管
拉伸：圖片比例不變
圖片的位置：
background-position: x/x% y/y%; 水平偏移/垂直偏移
百分比參照尺寸獲取
background-position: 0% 0%; 圖片左上角顯示
background-position: 100% 100%; 圖片右下角顯示
background-position: 50% 50%; 圖片居中顯示
background-position: left/center/right top/center/bottom;
方位值表示：左/中/右 上/中/下
}
簡寫：
div{
background: color/url()/repeat/position;
}
文本相關屬性：
字體：
div{
字體大小：
font-size: 24px; 設置字體大小
font-family: "微軟雅黑", "黑體", "KaiTi"; 設置字體類型
字體類型：
font-weight: normal/bold/lighter;
正常顯示/加粗顯示/極細文本
字體加粗：
font-weight: 400/700/100;
數字越大越粗 400=normal/700=bold
字體樣式：
font-style: normal/italic/oblique;
正常顯示/使用傾斜顯示/使文本傾斜達到斜體效果
簡寫：
font: style weight size family;
family 必須寫 不寫沒效果
}
文本：
div{
color: green; 文本顏色
文本對齊：
text-align: left/center/right/justify;
默認水平左對齊/居中/右對齊/兩端對齊
文本行高：
line-height: 32px/2;
設置行高位32像素/設置行高為字體大小的2倍
文本居中方式：
將行高設置為和元素一樣的高度
一行文本一定的垂直居中的 上下空隙由瀏覽器默認分配
文本裝飾線：
text-decoration: underline/overline/line-through/none;
下劃線/上劃線/刪除線/取消下劃線
}
表格屬性：
div{
width:;
height:;
background:;
color:;
margin:;
padding:;
邊框合并：
border-collapse: separate/collapse;
默認邊框分離/合并邊框
td不支持外邊距 只能寫在table里
邊框邊距：
border-spacing: h-Value v-Value;
border-spacing: 10px 10px;
只能在表格分離的狀態下使用
}
過渡效果：
div{
過渡屬性：
transition-property: width/height;
指定某個屬性添加過渡效果 寬度過渡/高度過渡
transition-property: all; 將所有能過渡的屬性都進行過渡
能夠添加過渡的屬性：所有顏色相關的、取值為數值的
過渡時長：
transition-duration: 1s/100ms; 1秒完成過渡/100毫秒
時間曲率：
transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out;
默認開始結束滿中間塊/勻速/開始慢結束塊/開始塊結束慢/慢開始結束中間加速后減速
過渡延遲：
transition-delay: 1s/100ms;
1秒后開始過渡/100毫秒
過渡時長必須設置其他可以省略 必須寫在默認樣式中
簡寫：
transition:property duration timing-function delay;
duration必須寫
}
布局：
普通流布局：
默認方式 瀏覽器默認布局方式
浮動布局：
div{
float: left/right/none;
元素向左浮動停靠在其他元素便于/向右浮動/默認
特點：
元素飄浮會脫流 后面的元素會補位
所有的元素只要設置浮動都可設置寬高
行內元素或行內塊元素浮動后 水平方向之間沒有空隙
浮動元素特殊效果：
文字環繞效果 浮動元素會遮擋正常元素 但是不會遮擋內容
解決不占位影響：
1.指定父元素的高度
2.父元素中設置 ：overflow: hidden;
3.清除浮動：
clear: none/left/right/both;
默認不處理/清除左浮影響/正常元素左邊不允許出現浮動元素/兩邊都不允許
4.父元素末尾添加空塊元素 設置：clear: both;
}
定位布局：
div{
position: relative/absolute/fixed/static;
相對定位/絕對定位/固定定位/默認文檔流布局
只有設置了非默認屬性 才算是已經定位的元素
偏移屬性：
用來配合已定位的屬性 進行位置移動
top: 10px; 以元素的上邊界向下為正方向
right: 10px; 以元素的右邊界向左為正方向
bottom: 100px; 以元素的下邊界向上為正方向
left: 10px; 以元素的左邊界向右為正方向
}
定位方式：
div{
相對定位：
position: relative;
按照當前位置偏移
絕對定位：
position: absolute;
定位后會脫流 脫流的所有元素都可以設置寬高
按照離他最近的祖先元素偏移 如果沒有按照body位置偏移
一般采用父元素相對定位 子元素絕對行為方式
浮動 + 外邊距調整元素位置 = 絕對定位 + 偏移屬性
固定定位：
position: fixed;
按照瀏覽器窗口進行定位 配合偏移屬性使用 定位后元素都會變成塊元素
層疊次序調整：
z-index: 0~n； 默認0 數字越大越靠上
數值相同 后來者居上
只能用在已經定位的元素上 子元素永遠在父元素之上 不受層次影響
}
顯示方式：
div{
display: none/block/inline/inline-block;
隱藏元素并且不占位/轉換為塊元素/轉換為行內元素/轉換為行內塊元素
}
顯示效果：
div{
visibility: visible/hidden;
默認顯示/隱藏元素并占位
opacity: 0~1;
設置元素的透明度
繼承效果：
子元素最終效果 = 父元素opacity * 自身opacity
vertical-align: top/middle/bottom;
調整垂直對齊方式 常見于行內塊元素
cursor: default/pointer/text/crosshair;
默認值/設置為小手形狀/輸入I形狀/ +形狀
}
轉換屬性：
div{
transform: 轉換函數1 轉換函數2...;
轉換原點設置：
transform-origin: x y;
transform-origin: 像素/百分比/方位值; 默認以元素中心為原點
轉換函數：
平移轉換：
transform: transform(x,y);
x：水平方向平移距離 y：垂直方向 一個值等于translateX(value)
transform: translateX(value) 水平方向位移
transform: translateY(value) 垂直方向位移
縮放變換：
transform: scale(value)/scaleX()/scaleY();
正常縮放/橫向縮放/垂直縮放
value：默認1 大于1會等比放大 0~1會縮小 小于0會翻轉
旋轉變換：
transform: rotate(90deg/-90deg);
順時針旋轉90度/逆時針旋轉90度
transform: rotate3d(45deg/-45deg);
transform: rotateX(ndeg); 沿x軸翻轉
transform: rotateY(ndeg); 沿y軸翻轉
transform: rotateZ(ndeg); 沿z軸旋轉
旋轉原點會影響旋轉效果
如果涉及旋轉操作 會連帶坐標軸一起旋轉，影響后面的位移
}
HTML 會跳動的小心心
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
width: 200px;
height: 160px;
/*background-color: pink;*/
margin: 100px auto;
position: relative;
}
#box:hover{
transform: scale(1.2);
}
.c1,.c2{
width: 100px;
height: 160px;
position: absolute;
border-radius: 50px 50px 0 0;
background-color: red;
}
.c1{
top:0;
left:0;
transform:rotate(45deg);
transform-origin: right bottom;
}
.c2{
top:0;
right: 0;
transform:rotate(-45deg);
transform-origin: left bottom;
}
</style>
</head>
<body>
<div id="box">
<span class="c1"></span>
<span class="c2"></span>
</div>
</body>
</html>
文來自阿里云云棲社區，未經許可禁止轉載。
更多資訊，盡在云棲科技快訊~
來科技快訊看新聞鴨~
快點關注我認識我愛上我啊~~~
CSS全稱Cascading Style Sheets（層疊樣式表），用于描述網頁上的信息格式化和顯示的方式。CSS能夠對網頁中元素進行精準控制并提供了豐富的樣式屬性，擁有對網頁對象和模型樣式編輯的能力。通過CSS對HTML標簽元素進行樣式描述可以定義其元素的顯示方式，最終在瀏覽器中顯示成為我們設置的樣式效果。
根據項目的需求不同我們可以將CSS樣式分為3種類型，分別是：外聯css樣式、內聯css樣式和嵌入css樣式。外聯css樣式是引用外部的css文件，借用別人封裝好的樣式文件來達到我們想要的樣式效果，比如Bootstrap就提供了大量現成的樣式，引用Bootstrap可以幫助我們快速得到豐富的頁面效果。內聯css樣式是將樣式聲明在一個專門的CSS文件中，當HTML頁面需要使用時直接引用該樣式即可，這樣也可以提供樣式的復用性，讓多個頁面風格的保持統一。嵌入css樣式則是在HTML標簽元素創建時通過style直接定義當前標簽元素的樣式，或者在HTML文檔中的<head>中使用<style>標簽標記。
這個只要在Vue項目的public目錄中找到index.html模板，在head標簽中通過link來引入外部的樣式文件。href可以連接在線的樣式文件，當然也可以引用本地的樣式文件。這種方式引入的樣式編譯在生成的html文件中，該樣式在整個項目都能夠公用。
這個在Vue中可以全局引用也可以局部模板引用，全局引用的話需要在main.js入口文件中引入。當項目啟動時就會對css文件進行解析，將對應的css代碼插入生成html文件的style標簽中。這里可以將一些全局的或者公共的樣式文件引入，提高代碼的復用性。
除了在main.js中引入我們還可以在局部模板中引用 樣式文件，在對應的模板.vue文件中通過@import ‘樣式文件路徑’。但是這樣引入發現一個問題：該模板標簽元素以上的樣式不生效，改用@import url(樣式文件路徑)后樣式生效了但是在index.html的head上會多出一個空的<style></style>樣式標簽。
這個就不存在引入了，直接在當前的模板中編寫樣式即可。vue模板提供了一個style標簽專門用來描述HTML樣式，在style中申明scoped則該樣式只影響到當前頁面。也可以直接在標簽元素中通過style屬性來描述當前元素的樣式，通過屬性綁定的形式，將樣式對象應用到元素中，樣式對象也可以定義在data中，如果需要data上的多個樣式對象則可以在:style中通過數組引用。
CSS樣式在前端中是必不可少的成員之一，合理的利用樣式可以讓你的項目更加的簡單、快捷、高效。充分利用CSS樣式表的復用可以更大程度的縮減了頁面的體積，減少下載的時間，提升用戶體驗。以上內容是小編給大家分享的【Vue實戰079：常見的幾種CSS樣式文件引入方式詳解】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：
https://juejin.cn/post/7159105009232117774
近期的生活是在是有點太美好了的，讓我都覺得像是在做夢，哈哈哈哈哈，幸福的生活，莫過于此，你說是吧，莎老板，我也要更加努力的加油才是。我想你就是我的動力源吧。
文字單行溢出:
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號顯示
white-space: nowrap; // 規定段落中的文本不進行換行
復制代碼
多行文字溢出:
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號顯示
display:-webkit-box; // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3; // 顯示的行數
CSS變量又稱CSS自定義屬性，通過在css中自定義屬性--var與函數var()組成，var()用于引用自定義屬性。談到為何會在CSS中使用變量，以下使用一個示例講述。
:root {
--c-color: orange;
}
.title {
background-color: var(--c-color);
}
漸變分為線性漸變、徑向漸變，這里筆者直接記錄的使用方式，也是為了使用的時候更加的直觀，這里說下，在使用線性漸變的時候，使用角度以及百分比去控制漸變，會更加的靈活
使用方式:
//漸變(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));
//漸變(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);
邊框漸變:
border有個border-image的屬性，類似background也有個background-image一樣,通過為其設置漸變顏色后，實現的漸變，后面的數字4為x方向偏移量
使用方式:
.border-grident{
margin-top: 20px;
width: 200px;
height: 200px;
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}
contain:圖片放大至滿足背景區域的最小邊即止，當背景區域與背景圖片的寬高比不一致的情況下，背景區域可能會長邊下有空白覆蓋不全。cover:圖片放大至能滿足最大變時為止，當背景區域與背景圖片的寬高比不一致時，背景圖片會在短邊下有裁切，顯示不全。
百分比:可以設置兩個值
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
width: 100%;
height: 300px;
background: url('./img/mtk.png');
/* background-size: contain; */
/* background-size: cover; */
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
結果依次為下圖展示:
contain：
cover:
百分比（這里是100%）：
首先來看下示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
如果想要一個下的三角形，可以讓border的上邊框可見，其他邊框顏色都設置為透明
.down-triangle {
width: 0;
height: 0;
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
頁面頭部必須有meta關于viewport的聲明
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
通常在做響應式布局的時候，以及大屏的時候很常用的，從而實現在不通分辨率下，實現不同的展示效果
/* 超過1920分辨率后顯示多列 */
@media screen and (min-width:1920px) {
.car_box.el-card {
min-width: 450px !important;
width: 450px !important;
}
}
筆者目前技術棧是vue，在修改elementui的樣式真的是苦不堪言，style使用css的預處理器(less, sass, scss)的寫法如下
// 第一種/deep/
/deep/ .test {
***
}
// 第二種::v-deep
::v-deep .test{
***
}
在一個有時候會遇到修改elementui中table的全部樣式，下面就來一一對應的去修改下的：
① 修改表格頭部背景:
::v-deep .el-table th{
background: orange;
}
② 修改表格行背景:
::v-deep .el-table tr{
background: #eee;
}
③ 修改斑馬線表格的背景：
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
background: #ccc;
}
④ 修改行內線的顏色：
::v-deep .el-table td,.building-top .el-table th.is-leaf {
border-bottom: 2px solid #eee;
}
⑤ 修改表格最底部邊框顏色和高度：
::v-deep .el-table::before{
border-bottom: 1px solid #ccc;
height: 3px
}
⑥ 修改表頭字體顏色：
::v-deep .el-table thead {
color: #ccc;
font-weight: 700;
}
⑦ 修改表格內容字體顏色和字體大小：
::v-deep .el-table{
color: #6B91CE;
font-size: 14px;
}
⑧ 修改表格無數據的時候背景，字體顏色
::v-deep .el-table__empty-block{
background: #ccc;
}
::v-deep .el-table__empty-text{
color: #fff
}
⑨ 修改表格鼠標懸浮hover背景色
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
