當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端（二）之 CSS

發布時間：2025/7/14 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了前端（二）之 CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端之 CSS

前言

昨天學習了標記式語言，也就是無邏輯語言。了解了網頁的骨架是什么構成的，了解了常用標簽，兩個指令以及轉義字符；其中標簽可以分為兩大類：

一類是根據標簽內容可以分類單雙標簽，單標簽指的是不需要字內容，標簽就可以代表所有功能；雙標簽：主內容可以包含文本，也可以包含子標簽（具有作用域）；

另一類是根據標簽顯示的效果可以分為行塊標簽，塊標簽會換行顯示；行標簽會同行顯示。

今天學習 CSS，被稱之為網頁的化妝師。

什么是 CSS

CSS 全稱為級聯樣式表（Cascading Style Sheet），主要負責頁面的風格設計，樣式、美觀。通常以.css 后綴結尾。

標記語言

和 html 一樣是非編程語言，不具備語言的程序邏輯。

css 為前端頁面的樣式，由選擇器、作用域與樣式塊組成。

選擇器：由標簽、類、id 單獨或組合出現；

作用域：一組大括號包含的區域；

樣式塊：滿足 css 連接語法的眾多樣式。

css 發展史代表版本

① 1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年，Web真正走出實驗室。 ② 1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，于是他們決定一起設計CSS。 ③ 哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網絡會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。 ④ 1997年初，W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規范第二版。 ⑤ CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

CSS 書寫語法

css 由三部分組成：選擇器、作用域與樣式塊。

選擇器 {樣式1: 值1;樣式2: 值2; }h3 {width: 100px;height: 100px;background-color: yellowgreen }

CSS 的三種引入方式

第一種引入方式：行間式

特點：

書寫在標簽的 style全局屬性中；

樣式格式為=》key：value（單位）；

以分號隔開多個樣式；

最后的分號可以省略

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>css 三種引入第一種引入</title> </head> <body><p style="width: 200px; height: 200px; background-color: green">css 第一種引入行間式</p> </body> </html>

第二種引入方式：內聯式

特點：

樣式書寫在 head 標簽內的 style 屬性內；

樣式格式為 => 選擇器：p|作用域 {}|樣式塊；

以分號隔開多個樣式；

最后的分號可以省略

<!DOCTYPE html> <html><head><meta charset='utf-8' /><title>css 三種引入第二種引入</title><style type='text/css'>p {width: 150px;height: 150px;background-color: red}</style></head><body><p>css 第二種引入內聯式引入</p></body> </html>

第三種引入方式：外聯式

特點：

書寫在外部的 css文件中，不需要書寫任何標簽；

其他同上

/*css 文件書寫 css 語法*/ /*外部 css 文件 00.css*/ h3 {width: 100px;height: 100px;background-color: yellowgreen } <!DOCTYPE html> <html><head><meta charset='utf-8'/><title>第三種引入外聯式引入</title><link rel='stylesheet' href='./00.css'><h3>第三種引入外聯式引入</h3> </head> </html>

CSS 三種引入方式的優先級

三種可以同時存在并協同完整布局，三種引入方式之間沒有優先級之說，哪種引入方式在邏輯下方（后解釋的）誰就起作用（樣式覆蓋）。并且行間式一定是邏輯最下方的。

當三種引入方式同時存在且操作同一對象的同一屬性時，才會出現沖突，最終起作用的就是優先級高的。

/*o4.css*/ div {height: 200px;color: brown; } <!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>三種引入的優先級</title><style type="text/css">div {width: 200px;color: pink;/*height: 200px;*/}</style><link rel="stylesheet" href="./04.css"> </head> <body><div style="background-color: cyan; color: orange">你是個好人</div> </body> </html>

基礎選擇器

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>基礎選擇器</title><style type="text/css">/* div => 標簽名 =》標簽選擇器：開發過程中盡可能少的運用，運用范圍為最內層的顯示層 *//* dd => class 名 =》類選擇器：布局的主力軍 *//* d => id名 =》 id 選擇器：一定唯一的 *//* * => 通配選擇器 =》控制 html,body,body 下所有用于顯示內容的標簽（head 不參與顯示）*/* {border: 1px solid black;}/* 三種選擇器有優先級*/div {width: 200px;height: 200px;background-color: red;}/* 類選擇器： .類名{} */.dd {background-color: orange;}/* id 選擇器： #id名 {}*/#d {background-color: green;}/* 優先級：id 選擇器 > 類選擇器 > 標簽選擇器 > 通配選擇器*//* 作用范圍越精確，優先級越高*/</style><style type="text/css">.div {width: 100px;height: 100px;background-color: orange}/* 多類名：類名與類名之間不能擁有任何符號隔斷 */.red.div{}.div.red {background-color: red;}</style></head> <body><div></div><div class="dd"></div><div class="dd" id="d"></div><div class="div red"></div><div class="div"></div> </body> </html>

長度單位與顏色

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>長度單位與顏色</title><style type="text/css">.div {/*px mm cm in em vw vh*/width: 200px;height: 200px;/*顏色單詞 | rgb() 0~255 | rgba | #六個十六進制數*/background-color: rgba(255,0,255,0.5);/* #abc == #AABBCC*/background-color: #00FFFF}</style> </head> <body><div class="div"></div> </body> </html>

文本樣式操作

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>文本樣式操作</title><style type="text/css">.box {width: 200px;height: 200px;background-color: orange}/*字體樣式*/.box {width: 400px;/*字族*//* STSong 作為首選字體，微軟雅黑作為備用字體*/font-family: 'STSong','微軟雅黑';}.box.uu {/* 字體大小*/font-size: 40px;/*字重*/font-weight: 100;/*風格*//*none清除系統字體風格*//*font-style: none;*/font-style: italic;/*行高：某一段文本在自身行高中可以垂直居中顯示=》文本垂直居中*/line-height: 200px;/*字體整體設置*//*字重風格大小/行高字族（風格可以省略）*/font: 100 normal 60px/200px 'STSong';/*}i {Normal 清除系統字體風格font-style: normal;}*/</style><style type="text/css">.wrap {width: 200px;height: 200px;background-color: yellow;}.w1 {/*換行方式*/word-break: break-all;}.w2 {width: 400px;/*水平居中：left|center|right*//*text-align: center;*//*字劃線中下上劃線*/text-decoration: line-through;text-decoration: underline;text-decoration: overline;/*字間距*/letter-spacing: 5px;/*詞間距*/word-spacing: 5px;/*縮進*//*1em 相當于一個字的寬度*/text-indent: 2em;}a {/*取消劃線*/text-decoration: none}</style> </head> <body><div class="box uu">[普通文本]</div><i>i的文本</i><div class="wrap"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五</div><hr><div class="wrap w1"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二</div><hr><div class="wrap w2">hello world hello world</div><a href="sfjsflj">aaa</a> </body> </html>

display

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>display</title><style>.box {width: 80px;height: 40px;background-color: orange}.box {/*block: 塊級標簽，獨占一行，支持所有 css 樣式*//*display: block;*//*inline：內聯（行級）標簽，同行顯示，不支持寬高*//*display: inline;*//*inline-block：內聯塊標簽，同行顯示，支持所有 css 樣式*/display: inline-block;/*標簽的嵌套規則*//*block 可以嵌套所有顯示類型標簽，div|h1~h6|p，*//*注：hn 與 p 屬于文本類型標簽，所以一般只嵌套inline 標簽*//* inline 標簽只能嵌套 inline 標簽，span|i|b|sub|sup|ins|/*inline-block 可以嵌套其他類型標簽，但不建議嵌套任意類型標簽 img|input*/}.b1 {height: 100px;}.b2 {height: 80px;}.b3 {height: 120px;}.box {/*文本基線對齊*/vertical-align: baseline;}</style> </head> <body><div class="box b1">123</div><div class="box b2">456</div><div class="box b3">789</div> </body> </html>

轉載于:https://www.cnblogs.com/zuanzuan/p/10072831.html

總結

以上是生活随笔為你收集整理的前端（二）之 CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

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