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

HTML

Web前端开发CSS基础(2)

發布時間：2023/12/10 HTML 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端开发CSS基础(2) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS 層疊樣式表(英文全稱：Cascading Style Sheets),是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言.CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化,并且能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力,通常情況下CSS會配合DIV標簽一同使用.

CSS全稱層疊樣式表(Cascading Style Sheets),CSS使得網站可以,創建文檔內容清晰地獨立于文檔表現層,樣式表定義如何顯示HTML元素,樣式通常保存在外部的.css文件中.通過僅僅編輯一個簡單的 CSS 文檔,外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀,由于允許同時控制多重頁面的樣式和布局,CSS 可以稱得上WEB設計領域的一個突破.作為網站開發者,你能夠為每個HTML元素定義樣式,并將之應用于你希望的任意多的頁面中.如需進行全局的更新,只需簡單地改變樣式,然后網站中的所有元素均會自動地更新.

CSS 的引用方法

直接引用: 直接在HTML標簽的后面加上style類型聲明即可,多個類型請用分號隔開.

<body><p style="color: red"> hello lyshark </p><div style="color: yellow ; background: red"> hello div </div> </body>

頭部引用: 直接在HTML頭部使用style類型聲明,以下是對div標簽進行修改的代碼.

<head><style type="text/css">.div{color:yellow ;background:red ;}</style> </head>

外部引用: 外部引用是最常用的一種引用方式,就是將CSS與HTML代碼分離,方便管理.

導入引用: 此引用方式,有一定的局限性,而且受引用數量的限制,一般不使用,了解即可.

<head><style>div {background-color: red !important ;@import "style.css" ;@import "mystyle.css" ;}</style> </head>

CSS 常用選擇器

通用選擇器: 通用選擇器就是使用星號來標注,則會對所有的頁面元素生效,也就是全局生效.

<head><style type="text/css">*{background: red ;color: bisque ;}</style> </head><body><div>這是DIV標簽</div><p>這是P標簽2</p><p>這是P標簽1</p> </body>

標簽選擇器: 比如使用以下方法,就可以使指定的DIV標簽進行修改,凡是全局范圍的DIV標簽都會應用.

<head><style type="text/css">div{background: red;color: bisque;}</style> </head><body><div>這是DIV標簽1</div><div>這是DIV標簽2</div><p>這是P標簽2</p><p>這是P標簽1</p> </body>

ID選擇器: 以下案例中只對ID=div_id1的標簽修改,警號代表ID調用,注意的ID號是唯一的不能夠重復.

<head><style type="text/css">#div_id1{background: red;color: bisque;}</style> </head><body> <div id="div_id1"> 這是DIV標簽1</div> <div id="div_id2"> 這是DIV標簽2</div> </body>

Class選擇器: 以下案例就是類選擇器的使用技巧,類選擇器一般用句號代表,該類的名稱允許重復.

<head><style type="text/css">.lyshark{background: red;color: bisque;}</style> </head><body> <div class="lyshark">這是DIV標簽<div class="lyshark">子標簽也會變</div><div class="lyshark">子標簽也會變</div> </div> </body>

嵌套選擇器: 如下嵌套,查找id=outher標簽,里面的class=A1,里面的class=B1,將其變成紅色.

<head><style type="text/css">#outher .A1 .B1{color: red;}</style> </head><body> <div id="outher"><div class="A1"> hello A1<div class="B1"> hello B1 </div></div><div class="A2"> hello A2</div> </div> </body>

組合選擇器: 組合的意思就是將一些標簽組合在一起,讓它們使用相同的CSS代碼.

<head><style type="text/css">div,h1,p{color: red;}</style> </head><body><div>hello div</div><h1>hello h1</h1><p>hello P</p> </body>

后代選擇器: 后代也就是繼承的意思,以下所有在h1標簽內的em標簽中的內容全部變成紅色.

<head><style type="text/css">h1 em{ color: red; }</style> </head><body><h1> hello <em>lyshark</em> </h1><p> hello <em>lyshark</em> </p> </body>

子代選擇器: 如果您不希望選擇任意的后代元素,而是希望縮小范圍,只選擇某個元素的子元素,請使用子元素選擇器.

<head><style type="text/css">h1 > strong {color:red;}</style> </head><body><h1> hello <strong>lyshrk</strong> <strong>lyshrk</strong> </h1><h1> hello <em><strong>lyshrk</strong></em> </h1> </body>

相鄰選擇器: 通過使用相鄰選擇器,如下解釋,將把h1標簽的后面的第一個p標簽變成紅色.

<head><style type="text/css">h1 + p {color: red;}</style> </head><body><h1>This is a heading.</h1><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p> </body>

屬性選擇器: 通過屬性選擇器實現選擇指定的標簽,過程中可以指定My=lyshark這樣的自定義類型.

<head><style type="text/css">[class="mydiv"]{ color: red;}div[My="lyshark"]{color: green;}div[id ^="myid"]{color: yellow;}</style> </head><body><div class="mydiv"> hello lyshark </div><div My="lyshark"> hello lyshark </div><div id="myid"> hello lyshark </div> </body>

偽元素選擇器(1): 鼠標經過超鏈接呈現出不同的狀態,或者點擊超鏈接會出現不同的效果.

<head><style type="text/css">a:link {color: #FF0000} #鼠標沒有碰過的樣式a:visited {color: #00FF00} #已經訪問過的鏈接樣式a:hover {color: #FF00FF} #鼠標放上去的樣子a:active {color: #0000FF} #選擇鏈接時的樣式</style> </head><body><a href="www.baidu.com" target="_blank">這是鏈接</a><p>在 CSS 定義中,a:hover 必須位于 a:link 和 a:visited 之后,這樣才能生效</p><p>在 CSS 定義中,a:active 必須位于 a:hover 之后,這樣才能生效</p> </body>

偽元素選擇器(2): 偽元素after的功能是在P標簽后面添加一行內容,而before功能則是在P標簽前添加.

<head><style type="text/css">p:after{content:"lyshark";}p:before{content:"my";}</style> </head><body><p> ---name--- </p> </body>

CSS 常用的屬性

顏色屬性: 顏色屬性,多用于對標簽的配置,以下列舉的方式為最常用的四種顏色選擇方式.

字體屬性: 字體屬性用來調節網頁中的各種字體的顯示效果,包括調節字體大小,類型,狀態等.

< ----------------------[設置字體大小]---------------------- > <h1 style="font-size: 15px"> 設置字體大小15像素 </h1> <h1 style="font-size: 30%"> 設置全局字體30% </h1> <h1 style="font-size: larger"> 設置字體格式 </h1>< ----------------------[設置字體類型]---------------------- > <h1 style="font-family: 微軟雅黑,Serif"> 設置微軟雅黑 </h1> <h1 style="font-family: 華文新魏,Serif"> 設置華文新魏 </h1> <h1 style="font-family: 新宋體,Serif"> 設置新宋體 </h1>< ----------------------[設置字體狀態]---------------------- > <h1 style="font-weight: normal">默認值</h1> <h1 style="font-weight: 100">直接賦值</h1> <h1 style="font-weight: bold">顯示加粗</h1> <h1 style="font-weight: bolder">顯示更粗</h1> <h1 style="font-weight: lighter">顯示更細</h1>< ----------------------[添加字體陰影]---------------------- > <h1 style="text-shadow: red 5px 5px 2px;">添加字體陰影</h1> <h1 style="text-shadow: -5px -5px 2px gray;">向左上角投影</h1> <h1 style="text-shadow: -5px 5px 2px gray;">向左下角投影</h1>< ----------------------[其他常用狀態]---------------------- > <h1 style="text-decoration: underline">添加下劃線</h1> <h1 style="text-decoration: line-through">添加批注橫批</h1> <h1 style="text-transform: uppercase">全部字母大寫</h1> <h1 style="text-transform: lowercase">全部字母小寫</h1>

背景屬性: 背景屬性用于控制背景色,背景圖片等一些顯示格式,還可以控制背景圖片的排列方式.

<body style="background-color: red"> 設置背景顏色為紅色</body> <body style="background-size: 30px 50px"> 設置圖像大小</body><body style="background-position: center;"> 居中顯示圖片</body> <body style="background-repeat: no-repeat"> 不重復圖片</body> <body style="background-attachment: fixed"> 固定圖片位置</body> <body style="background-repeat: repeat"> 重復鋪滿圖片</body> <body style="background-image:url(image.bmp)"> 設置背景圖片</body><body style="background-repeat: repeat-x"> 向X軸重復</body> <body style="background-repeat: repeat-y"> 向Y軸重復</body><body style="background: 背景顏色 url(圖像) 重復位置"> 簡寫模式</body> <body style="background: red url(images/bg.jpg) no-repeat top center"> 簡寫實例</body>

文本屬性: 文本屬性用于控制整個段落,或者是整個div元素的顯示效果,包括縮進文字對齊等.

< ----------------------[常用文本控制]---------------------- > <div style="text-indent: 150px"> 行首縮進150像素</div> <div style="letter-spacing: 10px"> 字符間距10像素</div> <div style="word-spacing: 20px"> 單行間距20像素</div> <div style="line-height: 200px"> 控制文本行高</div> <div style="white-space: nowrap"> 強制不換行,直到遇到br</div>< ----------------------[文本排列控制]---------------------- > <div style="text-align: center"> 居中對齊</div> <div style="text-align: right"> 居右對齊</div> <div style="text-align: left"> 居左對齊</div> <div style="direction: rtl"> 文本從左邊流入</div> <div style="direction: ltr"> 文本從右邊流入</div>

邊框屬性: 邊框屬性用于設置目標對象的邊框特征,包括邊框顏色,粗細,以及使用線條等.

< ----------------------[常見邊框類型]---------------------- > <div style="border-style: solid">普通邊框</div> none #無邊框 inherit #繼承 solid #直線邊框 groove #凸槽邊框 dashed #虛線邊框 ridge #壟狀邊框 dotted #點狀邊框 inset #邊框 double #雙線邊框 outset #邊框< ----------------------[常用邊框格式]---------------------- > <div style="border-style: solid;border-width: thin"> 細線邊框</div>px #固定值的邊框 thick #粗邊框 inherit #繼承 medium #中等邊框 thin #細邊框< ----------------------[常用邊框顏色]---------------------- > <div style="border: 10px #ff6600 solid"> 邊框簡寫格式</div> <div style="border-style: solid;border-radius: 20px"> 橢圓邊框</div> <div style="border-style: solid;border-color: red"> 紅色邊框</div> <div style="border-style: solid;border-color: #ff0ff0"> 紫色邊框</div> <div style="border-style: solid;border-color: rgb(255,254,3)"> 黃色邊框</div> <div style="border-style: solid;border-color: rgba(255,254,3)"> 黃色邊框</div>

位置屬性: 位置屬性就是指定元素的位置,它可以用來控制任何網頁元素在瀏覽器文檔窗口中的位置.

< ----------------------[位置調節屬性]---------------------- > left: 設置元素左邊的水平位置 top: 設置元素頂部的垂直位置 width: 設置元素顯示的寬度像素 height: 設置元素顯示的高度像素 z-index: 設置疊層的優先級,常用于模態對話框< ----------------------[常用定位屬性]---------------------- > position: 用于設定隊形的定位方式,分別有以下三種取值. -> absolute(絕對定位) 精確的定位元素在頁面的獨立位置,不考慮頁面上的其他元素位置. -> relative(相對定位) 相對定位所設定的位置是相對于元素通常應在的位置的偏移量. -> static(無特殊定位) 默認方法,使用HTML中通常的定位方法,不用再專門設置元素的位置值.

布局屬性: 布局屬性用于指定元素在網頁中如何放置,主要包括以下幾種屬性.

< ----------------------[控件顯示屬性]---------------------- > visibility: 用于設置元素的可見狀態,默認有以下三種屬性： -> inherit 繼承父層的顯示屬性 -> visible 顯示在網頁中 -> hidden 隱藏指定元素display: 用于設置元素的可見狀態,默認有以下4種屬性： -> block 在元素的前和后都會有換行 -> inline 在元素的前和后都不會有換行 -> list-item 與block相同,但增加了目錄列表項標記 -> none 不顯示元素,也就是隱藏元素.< ----------------------[控件其他屬性]---------------------- > clip: 用于絕對定位元素的可視區域,其他的區域隱藏: -> clip:rect(top,right,bottom,left)overflow: 設置如果元素中內容超出了元素的大小時如何處理: -> visible 增加元素的顯示空間大小 -> hdden 保持元素的顯示大小不變 -> scroll 表示總是顯示滾動條 -> auto 超出顯示大小才顯示滾動條float: 設置元素是否為浮動模式,可設置左浮動和右浮動: -> left 表示文本在這個元素的左邊 -> right 表示文本在這個元素的右邊 -> none 表示這個元素兩邊不能有空文本clear: 清除該元素旁邊的其他浮動對象,常與float通用: -> both 表示不允許有浮動的對象 -> none 允許兩邊都可有浮動對象 -> left 不允許左邊有浮動的對象 -> right 不允許右邊有浮動的對象page-break-before:always: 設置打印該元素前是否強制分頁 page-break-after:always: 設置打印該元素后是否強制分頁

邊緣屬性: 邊緣屬性包括元素邊界的矩形區域的特征,邊緣屬性包括margin,padding,width,style.

< ----------------------[3個邊界屬性]---------------------- > margin: 設置元素邊界與頭元素之間的空隙大小. padding: 設置元素邊界與內容之間的空隙大小. border: 設置元素內間隙與外間隙之間的距離.< ----------------------[屬性與顏色]---------------------- > border-top-width 指定上邊框寬度 border-right-width 指定右邊框寬度 border-bottom-width 指定下邊框寬度 border-left-width 指定左邊框寬度border-top-color 指定上邊框顏色 border-top-style 指定上邊框樣式

列表屬性: 列表屬性用于設置列表項標記的類型,列表項圖片和位置,以提供靈活列表顯示.

list-style-type:none 無標記 -> disc 默認,標記是實心圓 -> circle 標記是空心圓 -> square 標記是實心方塊 -> decimal 標記是數字 -> lower-alpha 小寫英文字母 -> upper-alpha 大寫英文字母 -> decimal-leading-zero 0開頭的數字標記< ------------------------------------------------------- > list-style-position:inside 列表項目標記放置在文本以內,且環繞文本根據標記對齊 -> outside 默認值,保持標記位于文本的左側 -> inherit 規定應該從父元素繼承list-style-position屬性的值< ------------------------------------------------------- > list-style-image:URL 圖像的路徑 -> none 默認無圖形被顯示 -> inherit 規定應該從父元素繼承list-style-image屬性的值簡寫方式: list-style:square inside url('./arrow.jpg');

CSS 之盒子模式

所有的頁面的元素都可以看成是一個盒子,占據一定的頁面空間,占據的空間要比實際使用的空間要大得多,我們可以調整盒子的邊框和距離,來調整盒子(頁面和頁面中的元素)的位置,盒子模型是由:內容(Content)、邊框(Border)、間隙(padding)、外間隔(margin)組成,為了便于理解可以把盒子模型想象成一幅畫,content是畫本身,padding是畫與畫框的留白,border是畫框,margin是畫與畫之間距離,他們的關系如下圖所示:

盒子演示實例: 盒子的自由定位例子,以下代碼配合邊框調節,用來練習盒子的自由定位.

元素居中設置: 將DIV容器設置到頁面的正中心,并可以自動的調整頁面的大小,容器中可放內容.

.form-center{width: 100px;height: 100px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}

脫離文檔流居中:

<body> <style type="text/css"> .center{display: block;position: fixed;_position: absolute;top: 50%;left: 50%;width: 666px;height:400px;margin-left: -333px;margin-top: -200px;z-index: 10001;box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;background-color: #fff; } </style> <div class="center"> </div> </body>

元素放置右下角: 將元素放置在屏幕右下角,通過定位position:fixed選項實現這一效果.

.form-right{background-color: #5f2dab;width: 300px;height: 100px;position: fixed;right: 20px;bottom: 10px;}

實現頁面小尖角: 在頁面的指定位置繪制小倒轉的尖角符號.

.icon {display: inline-block;border-top:15px solid red;border-right:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid transparent; }

float浮動模式: 通過使用float:left選項,使元素自動浮動在其他標簽之上,可設置浮動的位置,使用clear清理格式.

<head><meta charset="UTF-8"><style>.outer{background-color: green;}.menu1{background-color: blue;width: 100px;height: 20px;float: left;}.menu2{background-color: yellow;width: 100px;height: 20px;float: left;}.clear{clear: both;}</style> </head><body> <div class="outer"><div class="menu1">菜單1</div><div class="menu2">菜單2</div><div class="clear"></div>  </div><div class="bottom" style="background-color: aquamarine">底部菜單</div> </body>

后臺布局: 最后一個簡單的后臺布局.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin:0;}.pg-header {height:48px;background-color: #2459a2;}.pg-body .body-menu{position: absolute;top:48px;left:0;bottom:0;width:200px;background:red;}.pg-body .body-content{position: absolute;top:48px;left:210px;right:0;background:green;/*開啟下面,滾動條不變*//*bottom:0;*//*overflow: auto;*/}</style> </head><body><div class="pg-header"></div><div class="pg-body"><div class="body-menu"></div><div class="body-content"><h1>hello world </h1></div></div><div class="pg-heaher"></div> </body> </html>

轉載于:https://www.cnblogs.com/LyShark/p/11136264.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Web前端开发CSS基础(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：关于pycharm+opencv没有代码
下一篇：前端常用正则