當前位置：首頁 > news >正文

萍鄉(xiāng)做網(wǎng)站的百度云網(wǎng)盤資源搜索引擎入口

news 2025/7/7 2:20:55

萍鄉(xiāng)做網(wǎng)站的,百度云網(wǎng)盤資源搜索引擎入口,東莞網(wǎng)站建設(shè)制作免費咨,三門峽網(wǎng)站開發(fā)目錄 1 -> 字體屬性 1.1 -> 設(shè)置字體 1.2 -> 字體大小 1.3 -> 字體粗細 1.4 -> 文字樣式 2 -> 文本屬性 2.1 -> 文本顏色 2.1.1 -> 認識RGB 2.1.2 -> 設(shè)置文本顏色 2.2 -> 文本對齊 2.3 -> 文本裝飾 2.4 -> 文本縮進 2.5 -&g…

1 -> 字體屬性

1.1 -> 設(shè)置字體

1.2 -> 字體大小

1.3 -> 字體粗細

1.4 -> 文字樣式

2 -> 文本屬性

2.1 -> 文本顏色

2.1.1 -> 認識RGB

2.1.2 -> 設(shè)置文本顏色

2.2 -> 文本對齊

2.3 -> 文本裝飾

2.4 -> 文本縮進

2.5 -> 行高

3 -> 背景屬性

3.1 -> 背景顏色

3.2 -> 背景圖片

3.3 -> 背景平鋪

3.4 -> 背景位置

3.5 -> 背景尺寸

4 -> 圓角邊框

4.1 -> 生成圓形

4.2 -> 生成圓角矩形

4.3 -> 展開寫法

1 -> 字體屬性

1.1 -> 設(shè)置字體

body {
? ? font-family: '微軟雅黑';
? ? font-family: 'Microsoft YaHei';
}

字體名稱可以用中文，但是不建議使用中文。
多個字體之間使用逗號分隔(從左到右查找字體，如果都找不到，就會使用默認字體)。
如果字體名有空格，使用引號包裹。
建議使用常見字體，否則兼容性不好。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-family .one {font-family: 'Microsoft YaHei';}.font-family .two {font-family: '宋體';}</style></head><body><div class="font-family"><div class="one">我是微軟雅黑</div><div class="two">我是宋體</div></div></body>
</html>

展示結(jié)果：

1.2 -> 字體大小

p {
? ? font-size: 20px;
}

不同的瀏覽器默認字號不一樣，最好給一個明確值(chrome默認是16px)。
可以給body標簽使用font-size。
要注意單位px不要忘記。
標題標簽需要單獨指定大小。

注意：實際上它設(shè)置的是字體中字符框的高度；實際的字符字形可能比這些框高或者矮。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-size .one {font-size: 40px;}.font-size .two {font-size: 20px;}</style></head><body><div class="font-size"><div class="one">王路飛</div><div class="two">王路飛</div></div></body>
</html>

展示結(jié)果：

1.3 -> 字體粗細

p {
? ? font-weight: bold;
? ? font-weight: 700;
}

可以使用數(shù)字表示粗細。
700 == bold，400是不變粗 == normal。
取值范圍是[100，900]。?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-weight .one {font-weight: 900;}.font-weight .two {font-weight: 100;}</style></head><body><div class="font-weight"><div class="one">王路飛</div><div class="two">王路飛</div></div></body>
</html>

展示結(jié)果：

1.4 -> 文字樣式

/* 設(shè)置傾斜 */
font-style: italic;
/* 取消傾斜 */
font-style: normal;

?很少把某個文字變傾斜。但是經(jīng)常要把em/i改成不傾斜。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font-style em {font-style: normal;}.font-style div {font-style: italic;}</style></head><body><div class="font-style"><em>王路飛</em><div class="one">王路飛</div></div></body>
</html>

展示結(jié)果：

2 -> 文本屬性

2.1 -> 文本顏色

2.1.1 -> 認識RGB

我們的顯示器是由很多很多的“像素”構(gòu)成的。每個像素視為一個點，這個點就能反映出一個具體的顏色。我們使用R(red)、G(green)、B(blue)的方式表示顏色(色光三原色)。三種顏色按照不同的比例搭配，就能混合出各種效果。

計算機中針對R、G、B三個分量，分別使用一個字節(jié)表示(8個比特位，表示的范圍是0~255，十六進制表示為00~FF)。數(shù)值越大，表示該分量的顏色就越濃。(255，255，255)就表示白色；(0，0，0)就表示黑色。

2.1.2 -> 設(shè)置文本顏色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

鼠標懸停在vscode的顏色上，會出現(xiàn)顏色選擇器，可以手動調(diào)整顏色。

color屬性值的寫法：

預定義的顏色值。
十六進制形式。
RGB方式。

十六進制形式表示顏色，如果兩兩相同，就可以用一個來表示。

#ff00ff => #f0f

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.color {color: red;/* color: rgb(255, 0, 0); *//* color: #ff0000; */}</style></head><body><div class="color">One Piece</div></body>
</html>

展示結(jié)果：

2.2 -> 文本對齊

控制文字水平方向的對齊。

不光能控制文本對齊，也能控制圖片等元素居中或者靠右。

text-align: [值];

center：居中對齊。
left：左對齊。
right：右對齊。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-align .one {text-align: left;}.text-align .two {text-align: right;}.text-align .three {text-align: center;}
</style></head><body><div class="text-align"><div class="one">王路飛</div><div class="two">王路飛</div><div class="three">王路飛</div></div></body>
</html>

展示結(jié)果：

2.3 -> 文本裝飾

text-decoration: [值];

常用取值：

underline 下劃線。
none 什么都沒有?？梢越oa標簽去掉下劃線。
overline 上劃線。
line-through 刪除線。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-decorate .one {text-decoration: none;}.text-decorate .two {text-decoration: underline;}.text-decorate .three {text-decoration: overline;}.text-decorate .four {text-decoration: line-through;}</style></head><body><div class="text-decorate"><div class="one">王路飛</div><div class="two">王路飛</div><div class="three">王路飛</div><div class="four">王路飛</div></div></body>
</html>

展示結(jié)果：

2.4 -> 文本縮進

控制段落的首行縮進(其他行不影響)。

text-indent: [值];

單位可以使用px或者em。
使用em作為單位更好。1個em就是當前元素的文字大小。
縮進可以是負的，表示往左縮進(會導致文字就冒出去了)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-indent .one {text-indent: 2em;}.text-indent .two {text-indent: -2em;}</style></head><body><div class="text-indent"><div class="one">王路飛</div><div class="two">王路飛</div></div></body>
</html>

展示結(jié)果：

2.5 -> 行高

行高指的是上下文本行之間的基線距離。

HTML中展示文字涉及到這幾個基準線：

頂線。
中線。
基線(相當于英語四線格的倒數(shù)第二條線)。
底線。

內(nèi)容區(qū)：底線和頂線包裹的區(qū)域，即下圖深灰色背景區(qū)域。

其實基線之間的距離 = 頂線間距離 = 底線間距離 = 中線間距離。

line-height: [值];

注意1：行高 = 上邊距 + 下邊距 + 字體大小

上下邊距是相等的，此處字體大小是16px，行高40px，上下邊距就分別是12px。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.line-height .one {line-height: 40px;font-size: 16px;}</style></head><body><div class="line-height"><div>王路飛</div><div class="one">王路飛</div><div>王路飛</div></div></body>
</html>

展示結(jié)果：

注意2：行高也可以取normal等值。

這個取決于瀏覽器的實現(xiàn)。chrome上normal為21px。

注意3：行高等與元素高度，就可以實現(xiàn)文字居中對齊。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.line-height .two {height: 100px;line-height: 100px;}</style></head><body><div class="line-height"><div class="two">王路飛</div></div></body>
</html>

展示結(jié)果：

3 -> 背景屬性

3.1 -> 背景顏色

background-color: [指定顏色]

默認是transparent(透明)的?？梢酝ㄟ^設(shè)置顏色的方式修改。?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #f3f3f3;}.bgc .one {background-color: red;}.bgc .two {background-color: #0f0;}.bgc .three {/* 背景透明 */background-color: transparent;}</style></head><body><div class="bgc"><div class="one">王路飛</div><div class="two">劉索隆</div><div class="three">One Piece</div></div></body>
</html>

展示結(jié)果：

3.2 -> 背景圖片

background-image: url(...);

比image更方便控制位置(圖片在盒子中的位置)。?

注意：

url不要遺漏。
url可以是絕對路徑，也可以是相對路徑。
url上可以加引號，也可以不加。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgi .one {background-image: url(images/云云.jpg);height: 3300px;}</style></head><body><div class="bgi"><div class="one">背景圖片</div></div></body>
</html>

展示結(jié)果：

3.3 -> 背景平鋪

background-repeat: [平鋪方式]

?重要取值：

repeat：平鋪。
no-repeat：不平鋪。
repeat-x：水平平鋪。
repeat-y：垂直平鋪。

默認是repeat。

背景顏色和背景圖片可以同時存在，背景圖片在背景顏色的上方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgr .one {background-image: url(images/前端技術(shù).png);height: 300px;background-repeat: no-repeat;}.bgr .two {background-image: url(images/前端技術(shù).png);height: 300px;background-repeat: repeat-x;}.bgr .three {background-image: url(images/前端技術(shù).png);height: 300px;background-repeat: repeat-y;}</style></head><body><div class="bgr"><div class="one">不平鋪</div><div class="two">水平平鋪</div><div class="three">垂直平鋪</div></div></body>
</html>

展示結(jié)果：

3.4 -> 背景位置

background-position: x y;

修改圖片的位置。

參數(shù)有三種風格：

方位名詞：(top，left，right，bottom)。
精確單位：坐標或者百分比(以左上角為原點)。
混合單位：同時包含方位名詞和精確單位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgp .one {background-image: url(images/前端技術(shù).png);height: 500px;background-repeat: no-repeat;background-color: purple;background-position: center;}</style></head><body><div class="bgp"><div class="one">背景居中</div></div></body>
</html>

展示結(jié)果：

注意：

如果參數(shù)的兩個值都是方位名詞，則前后順序無關(guān)。(top left和left top等效)。
如果只指定了一個方位名詞，則第二個默認居中(left則意味著水平居中，top意味著垂直居中)。
如果參數(shù)是精確值，則第一個肯定是x ，第二個肯定是y。(100 200意味著x為100，y為 200)。
如果參數(shù)是精確值，且只給了一個數(shù)值，則該數(shù)值一定是x坐標，另一個默認垂直居中。
如果參數(shù)是混合單位，則第一個值一定為x，第二個值為y坐標。(100 center表示橫坐標為 100，垂直居中)

關(guān)于坐標系：

計算機中的平面坐標系，一般是左手坐標系(和高中數(shù)學上常用的右手系不一樣。y軸是往下指的)。

3.5 -> 背景尺寸

background-size: length|percentage|cover|contain;

可以填具體的數(shù)值：如40px 60px表示寬度為40px，高度為60px。
也可以填百分比：按照父元素的尺寸設(shè)置。
cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bgs .one {width: 500px;height: 300px;background-image: url(images/前端技術(shù).png);background-repeat: no-repeat;background-position: center;background-size: contain;}</style></head><body><div class="bgs"><div class="one">背景尺寸</div></div></body>
</html>

展示結(jié)果：

注意體會contain和cover的區(qū)別。當元素為矩形(不是正方形)時，區(qū)別是很明顯的。

4 -> 圓角邊框

通過border-radius使邊框帶圓角效果。

基本用法

border-radius: length;

length是內(nèi)切圓的半徑。數(shù)值越大，弧線越強烈。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 10px;}</style></head><body><div>One Piece是真實存在的！！！</div></body>
</html>

展示結(jié)果：

4.1 -> 生成圓形

讓border-radius的值為正方形寬度的一半即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 10px;} */div {width: 200px;height: 200px;border: 2px solid skyblue;border-radius: 100px;/* 或者用 50% 表示寬度的一半 */border-radius: 50%;}</style></head><body><div></div></body>
</html>

展示結(jié)果：

4.2 -> 生成圓角矩形

讓border-radius的值為矩形高度的一半即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 10px;} *//* div {width: 200px;height: 200px;border: 2px solid skyblue;border-radius: 100px;/* 或者用 50% 表示寬度的一半 *//* border-radius: 50%;}  */div {width: 200px;height: 100px;border: 2px solid skyblue;border-radius: 50px;}</style></head><body><div></div></body>
</html>

展示結(jié)果：

4.3 -> 展開寫法

border-radius是一個復合寫法。實際上可以針對四個角分別設(shè)置。

border-radius:2em;

等價于

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

等價于(按照順時針排序)

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottom-right-radius:30px;

border-bottom-left-radius:40px;

感謝各位大佬支持！！！

互三啦！！！

查看全文

http://www.risenshineclean.com/news/44401.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

萍鄉(xiāng)做網(wǎng)站的百度云網(wǎng)盤資源搜索引擎入口

1 -> 字體屬性

1.1 -> 設(shè)置字體

1.2 -> 字體大小

1.3 -> 字體粗細

1.4 -> 文字樣式

2 -> 文本屬性

2.1 -> 文本顏色

2.1.1 -> 認識RGB

2.1.2 -> 設(shè)置文本顏色

2.2 -> 文本對齊

2.3 -> 文本裝飾

2.4 -> 文本縮進

2.5 -> 行高

3 -> 背景屬性

3.1 -> 背景顏色

3.2 -> 背景圖片

3.3 -> 背景平鋪

3.4 -> 背景位置

3.5 -> 背景尺寸

4 -> 圓角邊框

4.1 -> 生成圓形

4.2 -> 生成圓角矩形

4.3 -> 展開寫法

相關(guān)文章：