當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發(fā)布時(shí)間：2023/11/27 生活经验 34 豆豆

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

1.css三種引入方式

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

注:三種方式間沒有優(yōu)先級(jí)
 ?  1.三種方式協(xié)同布局:
 ?  2.不重復(fù)的屬性一定為唯一位置的唯一值
 ?  3.重復(fù)的屬性采用覆蓋賦值,保留最后位置的屬性值
 ?  4.行間式一定是邏輯上最后被解析的位置(js正常操作的就是行間式)
 ? 5.!important會(huì)影響優(yōu)先級(jí) 
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>三種引入優(yōu)先級(jí)</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)，屏幕上顯示的最小單位，用于網(wǎng)頁設(shè)計(jì)，直觀方便
mm：毫米
cm：厘米
in：英寸
pt：點(diǎn)(point)，一個(gè)標(biāo)準(zhǔn)的長度單位，1pt＝1/72in，用于印刷業(yè)，非常簡單易用；
em：相當(dāng)長度，通常1em=16px，應(yīng)用于流式布局

2.顏色單位

rgb()：三個(gè)值可為[0-255]數(shù)值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三個(gè)值可為像素或是百分比，最后一個(gè)為[0, 1]數(shù)值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一個(gè)值為[0,360]數(shù)值，后二個(gè)值可為百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一個(gè)值為[0,360]數(shù)值，中間二個(gè)值可為百分比，最后一個(gè)為[0, 1]數(shù)值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六個(gè)十六進(jìn)制位，每兩位一整體，分別代表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() #六個(gè)十六進(jìn)制位 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：字體族科，多值用于備用，以,隔開(當(dāng)"STSong"不存在時(shí),再選取"Arial")

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

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

2、文本樣式

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

left 居左 | center 居中 | right 居右

vertical-align：縱向排列

baseline：將支持valign特性的對(duì)象的內(nèi)容與基線對(duì)齊 
sub：垂直對(duì)齊文本的下標(biāo) 
super：垂直對(duì)齊文本的上標(biāo) 
top：將支持valign特性的對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊 
text-top：將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊 
middle：將支持valign特性的對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊 
bottom：將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊 
text-bottom：將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊

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

normal：默認(rèn)換行規(guī)則
break-all：允許在單詞內(nèi)換行

<!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 {
   /*應(yīng)用場(chǎng)景*/
   text-decoration: none;不設(shè)置字體下劃線
  }
  div {
   width: 300px;
   /*顯示方式*/
   display: inline-block;將塊級(jí)標(biāo)簽設(shè)置成同行顯示
  }
  div {
   font-size: 12px;
   /*垂直排列方式: top baseline bottom*/
   vertical-align: baseline;
   /*縮進(jìn)*/
   text-indent: 2em;
  }
  /*遇到連體的英文,html將其解析為一個(gè)單詞(作為一個(gè)整體)*/
  .div {
   /*按標(biāo)簽的設(shè)定寬度強(qiáng)行換行,可以在單詞(整體)內(nèi)部換行*/
   word-break: break-all;
  }
  h1 {
   text-align: center;
  }
 </style>
</head>
<body>
 <h1>標(biāo)題</h1>
 <span>123 abc 呵呵</span>
 <!-- <a href="">123</a> -->
 <

轉(zhuǎn)載于:https://www.cnblogs.com/zhangshengxiang/p/9681807.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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