CSS架構 一.顏色與單位
前景色與背景色：設置文本和背景顏色 <style>html，body{background-color: blue;/* 前景色 - 就是指字體顏色(color)* 瀏覽器默認的字體顏色為黑色背景色 - 就是指指定元素的背景顏色(background-color)* 瀏覽器默認的背景顏色為透明的(transparent)*/}h2 {color: red;/*設置文本顏色*/background-color: transparent;/*設置背景色*/}</style>
</head>
<body>
<h2>愛新覺羅</h2>
</body>
顏色的命名： <style>/*1.單詞方式表示顏色 目前主流瀏覽器識別147種預定義顏色1；可選的數量有限2；不同瀏覽器中存在色差問題2.使用RGB方式表示顏色 稱為三原色(不能再分解的三種基本顏色)1；RGB - red(紅色)、green(綠色)、blue(藍色)2；具體使用方式a.函數式RGB顏色 - rgb(紅色, 綠色, 藍色)1；每個顏色的值范圍 - 0 ~ 255b.十六進制RGB顏色 - #紅色綠色藍色1；每個顏色具有兩位2；每個顏色的值范圍 - 00 ~ FF3；如果每個顏色的兩位相同的話 -> 可以省略其中一個*/h2 {color: rgb(0,0,255);background-color: #CC0000;}</style>
</head>
<body>
<h2>呼延覺羅</h2>
</body>
透明度：是以opacity定義元素透明度；范圍值0到1.0 <style>/*html, body {background-color: black;}h1 {color: lightcoral;background-color: darkcyan;!*透明度 - 默認值為 1.0 (完全不透明)* 同時修改前景色和背景色*!opacity: 0.5;}*/h1 {color: lightskyblue;/*顏色的表示方式 - 除了有rgb()方式以外，還有rgba()方式* rgba()中的 a 表示透明度*/background-color: rgba(255,0,0,0.5);}</style>
二。文本
結構化元素:
標題元素；標題大小用h1到h6表示 常用的h1到h3，h1最大，h6最小
<body>
<!--
標題元素為 <h1>到<6>
<h1>為最大，<h6>為最小
一般瀏覽器都有自己的默認樣式（也可以以CSS進行設置
標題都會獨占一行，也是垂直排列的）-->
<h1>犬夜叉</h1>
<h2>犬夜叉</h2>
<h3>犬夜叉</h3>
<h4>犬夜叉</h4>
<h5>犬夜叉</h5>
<h6>犬夜叉</h6>
</body>
段落元素；是以p元素定義的 <body>
<p>Lorem ipsum dolor sit amet, consecteturconsequuntur dolor eaque facere facilis magnam, modi officiis pariatur possimus quasi, rerum sunt .</p>
<p>adipisicing elit. Atque cupiditate eos facere. A accusamus asperiores, at consectetur </p>
</body>
其他結構化元素 粗體元素是以b元素定義的 斜體元素是以i元素定義的 上下標元素是以sup元素定義的 <body>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit.</b> Accusamus at autem deleniti, dolor eos modi nihil <i>recusandae vel. Aspernatur beatae blanditiis, <i>ea fugiat maxime neque nobis non sequi veritatis vero.</p>
<p>E=MC<sup>2</sup>公式</p>
<p>H<sub>2</sub>0</p>
<hr><!--分割線-->
</body>
4.換行符與水平線；換行是以br元素定義的，水平線是以hr元素定義的
<body>
<!--空白折疊
瀏覽器只識別一個空格，多個空格的話，只識別一個空格-->
<p>愛 新覺羅</p>
</body>
語義化元素:
<body>
<strong>呼延覺羅</strong>呼延覺羅
<!--strong元素加粗元素-->
<em>呼延覺羅</em>呼延覺羅
<!--em元素表示強調元素-->
<br><!--換行-->
<blockquote><p>東北三省又稱“東三省”，為東北清朝末年以后的三個行政區，與地理文化上的東北地區沒有關系</p>
</blockquote>
<!--blockquote元素表示引用元素，縮進效果-->
<p>說明:<q>聲明不是一個HTML</q></p>
<!--<q>引用元素 - 添加雙引號-->
<p><cite>東北三省又稱“東三省”</cite>為東北清朝末年以后的三個行政區，與地理文化上的東北地區沒有關系</p>
<!--<cite>引文元素 - 斜體效果-->
<br>
<p><dfn>東北三省又稱“東三省”</dfn>為東北清朝末年以后的三個行政區，與地理文化上的東北地區沒有關系</p>
<address><p>東三省</p><p>吉林省吉林市</p>
</address>
</body>
內容修改元素；以ins表示帶有下劃線的文本
<body>
<p>東北 <del>三省</del> 又稱 <ins>東三省</ins></p>
</body>
字體樣式:
字體系列；以font-family表示 <style>h2, p {/*備選字體，是以用戶電腦中已安裝的字體必須是用戶電腦已存在的字體一般可選的字體數量不是很多一次性指定多個字體系列 - 中間使用逗號分隔*/font-family: 新宋體, sans-serif;}</style>
字體大小；是以font-size用于設置字體大小 <style>h2, p{font-family: 新宋體, sans-serif;}P{/*一般使用像素值（px）百分值：瀏覽器默認字體大小為（16px）=100%*//*font-size: 200%;表示瀏覽器默認字體的2倍*/font-size: small;}</style>
粗體；是以font-weight用于設置字體粗細程度 <style>h2, p{font-family: 新宋體, sans-serif;}p{font-size: 200px;font-weight: 900;/*表示頁面字體加粗*/font-style: oblique;/*表示斜體*/}</style>
4.font屬性；是可同時設置字體的樣式
<style>p {/* 定義樣式的順序是固定的 - 建議使用這種簡寫屬性 */font: bold italic large serif ;}</style>
</head>
<body>
<h1>呼延覺羅</h1>
<p>愛新覺羅</p>
</body>
二。文本樣式:
文本裝飾； <style>p {/* text-decoration提供下劃線、上劃線及刪除線 */text-decoration: line-through lightcoral dashed;/*text-decoration-line: 表示提供的下劃線、上劃線及刪除線text-decoration-color: 表示線的顏色text-decoration-style: 表示線的樣式*//*text-decoration-line: underline;text-decoration-color: lightcoral;text-decoration-style: dashed;*/}</style>
</head>
<body>
<p>愛新覺羅</p>
</body>
行間距； <style>span{line-height: 50px;/*表示垂直文本的距離大小*/}</style>
</head>
<body>
<span>呼延覺羅</span>
<br>
<span>愛新覺羅</span>
</body>
字母間距和單詞間距； <style>#q1 {letter-spacing: 10px;}#q2 {word-spacing: 10px;}#q3 {/* 字母間距允許設置漢字之間的距離 */letter-spacing: 10px;}</style>
</head>
<body>
<p id="q1">aixinjueluo</p>
<p id="q2">front end dev</p>
<p id="q3">愛新覺羅</p>
</body>
水平對齊方式； <style>/* 水平方向對齊方式默認 - 左對齊 */#p1 {text-align: right;}#p2 {text-align: center;}#p3 {text-align: justify;}</style>
</head>
<body>
<p>愛新覺羅</p>
<p id="p1">愛新覺羅</p>
<p id="p2">愛新覺羅</p>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, </p>
</body>
垂直對齊方式； <style>/* 垂直方向對齊方式默認 - 底部對齊 */img {/* 設置圖片以什么方式與文字對齊 */vertical-align: top;}</style>
</head>
<body>
<p>Lorem ipsum <img src="imgs/frame_image.svg"> dolor sit amet, consectetur adipisicing elit. </p>
</body>
總結
以上是生活随笔 為你收集整理的【静态页面架构】CSS之颜色与单位 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
