CSS內(nèi)部樣式怎么寫(xiě)

本篇內(nèi)容介紹了“CSS內(nèi)部樣式怎么寫(xiě)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出陸豐免費(fèi)做網(wǎng)站回饋大家。

內(nèi)部樣式要寫(xiě)在<head></head>標(biāo)簽之間

link這個(gè)也要放在<head></head>之間

第一種：

@import " 直接寫(xiě)css文件路徑"

</style>

第二種：

@import url(寫(xiě)樣式表文件路徑)

</style>

一、選擇器

1.派生選擇器

例如：(選擇div里面的span)

div span{給樣式}

<div>

</div>

2.還有

列如：(p和a 都選擇)

p,a{給樣式}

二、

背景顏色：

background-color: #ccc;

background意思是背景

color 意思是顏色

背景圖片：

background-image: url(寫(xiě)圖片路徑);

background-repeat: repeat-y;

repeat 意思是重復(fù)平鋪

repeat-y 意思是按y軸平鋪

repeat-x 意思是按x軸平鋪

background-repeat:no-repeat 意思是不平鋪

background-position(設(shè)置背景圖像在網(wǎng)頁(yè)上的位置。)

background-position：center;(意思是定位圖片的位置)

1.center（居中）

2.top （上）

3.right (右)

4.left (左)

5.bottom (下)

background-position:50% 50%;(這種方法也可以使背景圖片居中)

background-attachment:fixed(使背景固定不隨滾動(dòng)條走)

fixed(意思是固定的)

attachment(意思是附在那里的意思)

background-size (規(guī)定背景圖片的尺寸是css3的)

size 意思是尺寸

屬性： 1.contain

(把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域 )

意思就是按等比例縮放填滿區(qū)域

2.cover(鋪滿區(qū)域)

3.percentage(以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度)

注意：如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。

CSS內(nèi)部樣式怎么寫(xiě)

CSS個(gè)人總結(jié)筆記（收藏吧）

三、字體

這里要注意引號(hào)嵌套時(shí)外層要用雙引號(hào)內(nèi)層要用單引號(hào)

font-family:"微軟雅黑","字體二","字體三"........;(定義字體)

定義多個(gè)字體的好處就是系統(tǒng)會(huì)默認(rèn)從第一個(gè)字體開(kāi)始找，如果系統(tǒng)沒(méi)有這個(gè)字體則默認(rèn)使用瀏覽器設(shè)定的字體

font-style:normal;(定義字體如何顯示)

normal(是正常顯示)

italic(文本傾斜顯示)

font-weight：900；（設(shè)置文本的粗細(xì)）

weight(意思是重量的意思)

默認(rèn)值：normal 等于400

還可以設(shè)置為 bold 等同于700

注意：設(shè)置文本粗細(xì)的值為： 100 ~ 900 為字體指定了 9 級(jí)加粗度

font-size:50px;(設(shè)置文字的大小)

單位有：px em

1em=16像素

2em 等于當(dāng)前字體尺寸的兩倍。

四、文本

text-indent:;

text(文本)

indent(縮進(jìn))

單位：em

注意：

可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：

text-align (用于文本的對(duì)齊)

align(意思是排列)

后面的屬性有：1.left(左對(duì)齊)

2.right(右對(duì)齊)

3.center（居中）

4.justify(像word文檔里面的兩端對(duì)齊)

word-spacing(設(shè)置改變字（單詞）之間的標(biāo)準(zhǔn)間隔)

spacing(間隔)

單位： em

使用這個(gè)無(wú)論是詞語(yǔ)還是文字都必須有空格才能實(shí)現(xiàn)效果。

列如：

(你好歡迎你來(lái)到我的工作室。)

text-decoration(一般使用于去掉下劃線)

decoration(裝飾的意思)

屬性：1.none 去掉下劃線

2.underline (添加下劃線)

3.overline (添加上面劃線)

4.line-through (穿過(guò)一條線，一般多用于打折的價(jià)格劃一條線)

5.blink (閃爍的)

line-height(用于設(shè)置行高)

letter-spacing 字母間隔

五、a標(biāo)簽的一個(gè)樣式

a:hover (鼠標(biāo)指針位于鏈接的上方)

用法：<style>

a:hover{

font-size：20px;

</style>

當(dāng)鼠標(biāo)滑上去的時(shí)候字體變大20px。

六、列表

列表樣式：

如何去掉無(wú)序列表前面的小圓點(diǎn)：

list-style:none;

七、表格：

table, th, td

border: 1px solid blue;

border：邊界邊框

1px 定義邊框的粗細(xì)

solid 定義實(shí)線

blue 定義顏色

border-collapse:collapse;(將邊框折疊為單一邊框)

border-spacing:50px;(將格與格之間的間距拉開(kāi)，

但是是邊框線沒(méi)有合并的情況下才能生效)

八、行內(nèi)元素轉(zhuǎn)換為塊元素

display:block;

block 使其轉(zhuǎn)化為塊元素

inline 使其轉(zhuǎn)化為行內(nèi)元素

九、外邊距與內(nèi)邊距

內(nèi)邊距：

padding-top (上)

padding-right (右)

padding-bottom (下)

padding-left (左)

外邊距：

margin-top (上)

margin-right (右)

margin-bottom (下)

margin-left (左)

注意：與其到底是使用外邊距還是內(nèi)邊距依據(jù)誰(shuí)對(duì)誰(shuí)而定！！

十、相對(duì)定位：(相對(duì)定位雖然元素離開(kāi)原來(lái)的位置，但是不釋放原來(lái)的空間)

position: relative;

left: 30px;

top: 20px;

十一、絕對(duì)定位：(絕對(duì)定位元素離開(kāi)，并且釋放原來(lái)的空間)

position: absolute;

left: 30px;

top: 20px;

為了瀏覽器適應(yīng)，所以使用絕對(duì)居中時(shí)上面一定要寫(xiě)一個(gè)相對(duì)定位作為參照。

十二、overflow：溢出部分的處理

scroll(卷簾) 出現(xiàn)滾動(dòng)條

hidden 隱藏

auto 自動(dòng)出現(xiàn)滾動(dòng)條

偽類(lèi)選擇器：

#a ul li:first-child{

margin-left:0px;

first-child(第一個(gè)孩子的意思)

以上這段代碼便是找到類(lèi)a里面的ul 里面的Li 將第一個(gè)li標(biāo)簽的外左間距去掉。

last-child(最后一個(gè))

#a ul li:nth-child(1){

括號(hào)里面是幾選擇的就是第幾個(gè)

如果說(shuō)三的倍數(shù)就是寫(xiě) 3N

十三、CSS樣式的權(quán)重問(wèn)題：

ID>Class>標(biāo)簽本身(屬性選擇器)

十四、相對(duì)定位絕對(duì)定位的理解：

絕對(duì)定位：將被賦予此定位方法的對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒(méi)有設(shè)置定位屬性，即還是遵循HTML定位規(guī)則的，則依據(jù)body對(duì)象左上角作為參考進(jìn)行定位。

相對(duì)定位(relative)：對(duì)象不可層疊，依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移自身位置。

且不釋放原來(lái)的位置。依據(jù)當(dāng)前位置進(jìn)行定位。

十五、邊邊陰影：

box-shadow(給邊框陰影)

div

box-shadow: 10px 10px 5px #888888;

陰影水平偏移值（可取正負(fù)值）；陰影垂直偏移值（可取正負(fù)值）；陰影模糊值；陰影顏色

給邊框切圓角：

border-radius:4px;

注意這里面的值取偶不取奇

相關(guān)屬性： border-top-right-radius ,

border-bottom-right-radius ,

border-bottom-left-radius ,

border-top-left-radius

文本溢出時(shí)顯示為省略號(hào)（..........）

text-overflow ：ellipsis

resize:none;

十六、input點(diǎn)擊以后藍(lán)色邊框的去除：

outline:none; 去除input的藍(lán)色的那個(gè)線

十七、 ul ol dl 默認(rèn)都有一個(gè)外邊距：

給他們所有的margin:0;padding:0;

“CSS內(nèi)部樣式怎么寫(xiě)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

文章標(biāo)題：CSS內(nèi)部樣式怎么寫(xiě)
文章位置：http://vcdvsql.cn/article34/poddpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、用戶體驗(yàn)、軟件開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、ChatGPT、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS內(nèi)部樣式怎么寫(xiě)