當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

前端之css引入方式/长度及颜色单位/常用样式

發布時間：2023/11/27 生活经验 50 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之css引入方式/长度及颜色单位/常用样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.css三種引入方式

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>三種引入方式</title>
 <!-- 三種: 行間式 | 內聯式 | 外聯式 -->
 內聯式:
 ? ?<!-- <style type="text/css">
  div {
   width: 200px;
   height: 200px;
   background-color: brown;
  }
 </style> -->
 外聯式:
 <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
 <!-- 行間式 -->
 <!-- 1.在標簽頭部的style屬性內 -->
 <!-- 2.屬性值滿足的是css語法 -->
 <!-- 3.屬性值用key: value形式賦值,value具有單位 -->
 <!-- 4.屬性值之間用;隔開 -->
 <!-- <div ></div> -->
 <!-- <hr /> -->
 
 <!-- 內聯式 -->
 <!-- 1.在style標簽內(style標簽一般作為head的子標簽) -->
 <!-- 2.屬性值滿足的是css語法 -->
 <!-- 3.屬性值用key: value形式賦值,value具有單位 -->
 <!-- 4.屬性值之間用;隔開(一般獨行分開賦值) -->
 <!-- 5.格式: 選擇器{樣式塊} -->
 <!-- <div></div> -->
?
 <!-- 外聯式 -->
 <!-- 1.在外部css文件中 -->
 <!-- 2.屬性值滿足的是css語法 -->
 <!-- 3.屬性值用key: value形式賦值,value具有單位 -->
 <!-- 4.屬性值之間用;隔開(一般獨行分開賦值) -->
 <!-- 5.格式: 選擇器{樣式塊} -->
 <!-- 6.將html與css文件建立聯系:html通過link標簽鏈接外部css(一般head中鏈接) -->
 <div></div>
 
</body>
?
</html>

注:三種方式間沒有優先級
 ?  1.三種方式協同布局:
 ?  2.不重復的屬性一定為唯一位置的唯一值
 ?  3.重復的屬性采用覆蓋賦值,保留最后位置的屬性值
 ?  4.行間式一定是邏輯上最后被解析的位置(js正常操作的就是行間式)
 ? 5.!important會影響優先級 
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>三種引入優先級</title>
 <style type="text/css">
  div {
   width: 100px
   height: 100px;
   background-color: yellow!important;
  }
 </style>
 <link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
 <div style="background-color: yellowgreen"></div>
</body>
</html>

2.長度及顏色單位

1.長度單位

px：像素(pixel)，屏幕上顯示的最小單位，用于網頁設計，直觀方便
mm：毫米
cm：厘米
in：英寸
pt：點(point)，一個標準的長度單位，1pt＝1/72in，用于印刷業，非常簡單易用；
em：相當長度，通常1em=16px，應用于流式布局

2.顏色單位

rgb()：三個值可為[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三個值可為像素或是百分比，最后一個為[0, 1]數值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一個值為[0,360]數值，后二個值可為百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一個值為[0,360]數值，中間二個值可為百分比，最后一個為[0, 1]數值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六個十六進制位，每兩位一整體，分別代表Red、Green、Blue，可以簡寫#abc

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>長度及顏色單位</title>
 <style type="text/css">
  body {
   background-color: yellowgreen; 
  }
  div {
   /*長度單位*/
   /*px in pt mm cm em rem vw vh*/
   width: 100px;
   /*width: 720pt; 10in*/
   /*width: 100mm; 10cm*/
   /*width: 10em; 通常160px 10rem*/
   /*width: 50vw; 50% view width*/
   height: 100px;
   /*顏色單位*/
   /*單詞 rgb() rgba() #六個十六進制位 hsl()*/
   /*background-color: cyan;*/
   /*background-color: rgb(255, 0, 0);*/
   /*background-color: rgba(255, 0, 0, 0);*/
   /*滿足AABBCC形式可以簡寫為abc*/
   background-color: #a0c
  }
 </style>
</head>
<body>
 <div></div>
</body>
</html>

3.常用樣式

1、字體樣式

font-family：字體族科，多值用于備用，以,隔開(當"STSong"不存在時,再選取"Arial")

font-family: "STSong", "Arial";

font-size：字體大小(font-size: 20mm;)
font-style：字體風格? normal | italic(斜體) | oblique(斜體)
font-weight：字體重量 normal | bold(加粗) | lighter(變細) | 100~900(900最粗)
line-height：行高(line-height:20mm;)
font：字重風格大小/行高字族

2、文本樣式

color：文本顏色
text-align：橫向排列

left 居左 | center 居中 | right 居右

vertical-align：縱向排列

baseline：將支持valign特性的對象的內容與基線對齊 
sub：垂直對齊文本的下標 
super：垂直對齊文本的上標 
top：將支持valign特性的對象的內容與對象頂端對齊 
text-top：將支持valign特性的對象的文本與對象頂端對齊 
middle：將支持valign特性的對象的內容與對象中部對齊 
bottom：將支持valign特性的對象的文本與對象底端對齊 
text-bottom：將支持valign特性的對象的文本與對象底端對齊

text-indent：字體縮減
text-decoration：字劃線
letter-spacing：字間距
word-spacing：詞間距
word-break：自動換行

normal：默認換行規則
break-all：允許在單詞內換行

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>文本樣式</title>
 <style type="text/css">
  1.字體樣式
 ? ? ? ?span {
   /*字體顏色*/
   color: red;
   /*字體水平居中方式:left center right*/
   text-align: center;
   /*字劃線: underline line-through overline none*/
   text-decoration: overline;
   /*字間距*/
   letter-spacing: 3px;
   /*詞間距*/
   word-spacing: 10px;
  }
 ? ? ? ?2.文本樣式
  a {
   /*應用場景*/
   text-decoration: none;不設置字體下劃線
  }
  div {
   width: 300px;
   /*顯示方式*/
   display: inline-block;將塊級標簽設置成同行顯示
  }
  div {
   font-size: 12px;
   /*垂直排列方式: top baseline bottom*/
   vertical-align: baseline;
   /*縮進*/
   text-indent: 2em;
  }
  /*遇到連體的英文,html將其解析為一個單詞(作為一個整體)*/
  .div {
   /*按標簽的設定寬度強行換行,可以在單詞(整體)內部換行*/
   word-break: break-all;
  }
  h1 {
   text-align: center;
  }
 </style>
</head>
<body>
 <h1>標題</h1>
 <span>123 abc 呵呵</span>
 <!-- <a href="">123</a> -->
 <

轉載于:https://www.cnblogs.com/zhangshengxiang/p/9681807.html

總結

以上是生活随笔為你收集整理的前端之css引入方式/长度及颜色单位/常用样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：什么地方请佛？
下一篇： [USACO Section 3.2]