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

發(fā)布時間：2022-03-10 16:19:03 來源：億速云閱讀：619 作者：iii 欄目：web開發(fā)

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

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

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

link這個也要放在<head></head>之間

第一種：

@import " 直接寫css文件路徑"

</style>

第二種：

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

</style>

一、選擇器

1.派生選擇器

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

div span{給樣式}

<div>

</div>

2.還有

列如：(p和a 都選擇)

p,a{給樣式}

二、

背景顏色：

background-color: #ccc;

background意思是背景

color 意思是顏色

背景圖片：

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

background-repeat: repeat-y;

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

repeat-y 意思是按y軸平鋪

repeat-x 意思是按x軸平鋪

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

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

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

1.center（居中）

2.top （上）

3.right (右)

4.left (左)

5.bottom (下)

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

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

fixed(意思是固定的)

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

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

size 意思是尺寸

屬性： 1.contain

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

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

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

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

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

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

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

三、字體

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

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

定義多個字體的好處就是系統(tǒng)會默認(rèn)從第一個字體開始找，如果系統(tǒng)沒有這個字體則默認(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 級加粗度

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

單位有：px em

1em=16像素

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

四、文本

text-indent:;

text(文本)

indent(縮進(jìn))

單位：em

注意：

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

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

align(意思是排列)

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

2.right(右對齊)

3.center（居中）

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

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

spacing(間隔)

單位： em

使用這個無論是詞語還是文字都必須有空格才能實現(xiàn)效果。

列如：

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

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

decoration(裝飾的意思)

屬性：1.none 去掉下劃線

2.underline (添加下劃線)

3.overline (添加上面劃線)

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

5.blink (閃爍的)

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

letter-spacing 字母間隔

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

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

用法：<style>

a:hover{

font-size：20px;

</style>

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

六、列表

列表樣式：

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

list-style:none;

七、表格：

table, th, td

border: 1px solid blue;

border：邊界邊框

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

solid 定義實線

blue 定義顏色

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

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

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

八、行內(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ù)誰對誰而定??！

十、相對定位：(相對定位雖然元素離開原來的位置，但是不釋放原來的空間)

position: relative;

left: 30px;

top: 20px;

十一、絕對定位：(絕對定位元素離開，并且釋放原來的空間)

position: absolute;

left: 30px;

top: 20px;

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

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

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

hidden 隱藏

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

偽類選擇器：

#a ul li:first-child{

margin-left:0px;

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

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

last-child(最后一個)

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

括號里面是幾選擇的就是第幾個

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

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

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

十四、相對定位絕對定位的理解：

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

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

且不釋放原來的位置。依據(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

文本溢出時顯示為省略號（..........）

text-overflow ：ellipsis

resize:none;

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

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

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

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

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽