前端基礎(chǔ)-CSS的屬性相關(guān)設(shè)置

番茄西紅柿發(fā)布于2019-04-23 13:41 / 3546人閱讀

摘要：值描述左邊對齊默認(rèn)值右對齊居中對齊兩端對齊文本裝飾為重點(diǎn)值描述默認(rèn)。繼承父元素的屬性的值。具體的像素一定要加單位例如，等等第一個(gè)值是水平位置，第二個(gè)值是垂直位置。單位是像素或任何其他的單位。

一字體屬性
二文本屬性
三背景屬性
四盒子模型
五盒子模型各部分詳解

一、字體屬性

1、font-weight：文字粗細(xì)（表格中*為重點(diǎn)）

取值	描述
normal	默認(rèn)值，標(biāo)準(zhǔn)粗細(xì)
bord	粗體 *
border	更粗
lighter	更細(xì)
100~900	設(shè)置具體粗細(xì)，400等同于normal，而700等同于bold *
inherit	繼承父元素字體的粗細(xì)值

2、font-style：文字風(fēng)格

 normal 正常，默認(rèn)就是正常的
 italic 傾斜

3、font-size：文字大小

fs：一般是12px或13px或14px
注意：
1、通過font-size設(shè)置文字大小一定要帶單位，即一定要寫px
2、如果設(shè)置成inherit表示繼承父元素的字體大小值。

4、font-family：文字字體

font-family: , , , sans--、如果取值為中文，需要用單或雙引號擴(kuò)起來

5、文字屬性簡寫

/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: serif,微軟雅黑;*/
簡寫為
font: bolder italic 50px serif,微軟雅黑;

6、color：文字顏色

取值	格式	描述
英文單詞	color：red;	大多數(shù)顏色都有對應(yīng)的英文單詞描述，但英文單詞終究有其局限性:無法表示所有顏色
rgb	color：rgb(255,0,0)	什么是三原色？ red，green，blue 什么是像素px？對于光學(xué)顯示器，一整個(gè)屏幕是有一個(gè)個(gè)點(diǎn)組成，每一個(gè)點(diǎn)稱為一個(gè)像素點(diǎn)，每個(gè)像素點(diǎn)都是由一個(gè)三元色的發(fā)光元件組成，該元件可以發(fā)出三種顏色，red，green，blue。發(fā)光元件協(xié)調(diào)三種顏色發(fā)光的明亮度可以調(diào)節(jié)出其他顏色格式：rgb(255,0,0); 參數(shù)1控制紅色顯示的亮度參數(shù)2控制綠色顯示的亮度參數(shù)3控制藍(lán)色色顯示的亮度數(shù)字的范圍0-255，0代表不發(fā)光，255代表發(fā)光，值越大越亮紅色：rgb(255,0,0) 綠色：rgb(0,255,0) 藍(lán)色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮白色：rgb(255,255,255) # 所有都最亮灰色：只要讓紅色/綠色/藍(lán)色的值都一樣就是灰色，而且三個(gè)值越小，越偏黑色，越大越偏白色
rgba	color：rgba(255,0,0,0.1);	rgba到css3中才推出，比起rgb多了一個(gè)a，a代表透明度 a取值0-1，取值越小，越透明
十六進(jìn)制	color: #FF0000;	#FFEE00 其中FF代表R，EE代表G，00代表B 只要十六進(jìn)制的顏色每兩位都是一樣的，那么就可以簡寫為一個(gè)，例如#F00 等同于#FF0000

二、文本屬性

1、text-align：規(guī)定元素中的文本的水平對齊方式。

值	描述
left	左邊對齊默認(rèn)值
right	右對齊
center	居中對齊
justify	兩端對齊

2、text-decoration：文本裝飾（* 為重點(diǎn)）

值	描述
none	默認(rèn)。定義標(biāo)準(zhǔn)的文本，通常用來去掉a標(biāo)簽的下劃線 *
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

3、text-indent：首行縮進(jìn)

#將段落的第一行縮進(jìn) 32像素,16px;=1em;
p {
  text-indent: 32px;
}

4、line-height：行高

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>行高title><style type="text/css">p {width: 500px;height: 200px;background-color: yellow;text-align: center;text-decoration: line-through;line-height: 200px;}a {text-decoration: none;}style>head><body><div><p>hello英雄不問出處，流氓不論歲數(shù)p><a href="#">點(diǎn)我啊a>div>body>html>

演示

三、背景屬性

注意：沒有寬高的標(biāo)簽，即便設(shè)置背景也無法顯示

屬性	描述	值
background-color	設(shè)置標(biāo)簽的背景顏色的	background-color: rgb(0,255,0); background-color: #00ffff;
background-image	設(shè)置標(biāo)簽的背景圖片	background-image: url("images/2.jpg"); background-image: url("圖片網(wǎng)址"); 注意：如果圖片的大小沒有標(biāo)簽的大小大，那么會(huì)自動(dòng)在水平和錘子方向平鋪和填充
background-size	設(shè)置標(biāo)簽的背景圖片的寬、高	background-size: 300px 300px; background-size: 100% 100%;
background-repeat	設(shè)置標(biāo)簽的背景圖片的平鋪方式	background-repeat: repeat; #默認(rèn)值，在垂直和水平方向都重復(fù) background-repeat: no-repeat; #不重復(fù)，背景圖片將僅顯示一次 background-repeat: repeat-x; #背景圖片將在水平方向平鋪 background-repeat: repeat-y; #背景圖片將在垂直方向平鋪應(yīng)用：可以在服務(wù)端將一個(gè)大圖片截成小圖片，然后在客戶端基于平鋪屬性將小圖重復(fù) 這樣用戶就以為是一張大圖，如此，既節(jié)省了流量提升了速度，又不影響用戶訪問例如很多網(wǎng)站的導(dǎo)航條都是用這種手法制作的
background-attachment	設(shè)置標(biāo)簽的背景圖片在標(biāo)簽中固定或隨著頁面滾動(dòng)而滾動(dòng)	background-attachment: scroll; #默認(rèn)值，背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng) background-attachment: fixed; #不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
background-position	前端的坐標(biāo)系"：圖片默認(rèn)都是在盒子的左上角， background-position：屬性，就是專門用于控制背景圖片的位置	background-position：水平方向的值，垂直方向的值 1、具體的方位名詞 2、百分比　　第一個(gè)值是水平位置，第二個(gè)值是垂直位置。　　左上角是 0% 0%。右下角是 100% 100%。　　如果只設(shè)置了一個(gè)值，另一個(gè)值就是50%。 3、具體的像素（一定要加px單位）例如：30px，50px等等　　第一個(gè)值是水平位置，第二個(gè)值是垂直位置。　　左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。　　如果只設(shè)置了一個(gè)值，另一個(gè)值就是50%。　　可以混合使用和值。
inherit	設(shè)置從父元素繼承background屬性值	以上背景屬性的值均可以設(shè)置為inherit，代表從父元素繼承background屬性
背景縮寫		body { background: red url(xx.png) no-repeat fixed center/300px 300px; }

1、背景屬性縮寫

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景屬性簡寫title><style type="text/css">div {width: 400px;height: 400px;/*background-image: url("https://img03.sogoucdn.com/app/a/100520093/ac75323d6b6de243-1aa6516885d490be-00d4ee679007ef3bff0e9c8f4b37d633.jpg");*//*background-repeat: no-repeat;*//*background-position: right bottom;*//*background-size: 100px 100px;*/background: url("https://img03.sogoucdn.com/app/a/100520093/ac75323d6b6de243-1aa6516885d490be-00d4ee679007ef3bff0e9c8f4b37d633.jpg") no-repeat right bottom /100px 100px ;}style>head><body><div>div>body>html>

背景屬性簡寫實(shí)例

2、背景圖片和插入圖片的區(qū)別

#1、
背景圖片僅僅只是一個(gè)裝飾，不會(huì)占用位置，
插入圖片會(huì)占用位置

#2、
背景圖片有定位屬性，可以很方便地控制圖片的位置，
而插入圖片則不可以

#3、
插入圖片語義比背景圖片的語義要強(qiáng)，所以在企業(yè)開發(fā)中如果你的圖片
想被搜索引擎收錄，那么推薦使用插入圖片

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滾動(dòng)背景圖示例title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527506340692&di=a08e7a08951a7d571bc8c87d7ea0fe10&imgtype=0&src=http%3A%2F%2Fp2.gexing.com%2Fshaitu%2F20130205%2F1705%2F5110cb6fc97b2.jpg") no-repeat center center;background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}style>head><body><div class="d1">div><div class="box">div><div class="d2">div><div class="d3">div>body>html>

滾動(dòng)圖片，背景圖片不動(dòng) 實(shí)例

3、精靈圖

#1、什么是CSS精靈圖（可以通過瀏覽器抓包分析：微博，京東都有精靈圖）
    CSS精靈圖是一種圖像合成技術(shù)

#2、CSS精靈圖的作用
    一個(gè)電商網(wǎng)站可能有很多圖片，比如有10張圖片，這就要求客戶端發(fā)10次請求給服務(wù)端
    但其實(shí)一次請求的帶寬就足夠容納10張圖片的大小

    精靈圖的作用就是用來較少請求次數(shù)，以及降低服務(wù)器處理壓力


#3、如何使用CSS精靈圖
    CSS的精靈圖需要配合背景圖片和背景定位來使用

#4、強(qiáng)調(diào)：切圖需要用到frameworks軟件，可以知道每個(gè)圖片具體寬多少個(gè)像素高多少個(gè)像素，該軟件與ps屬于一個(gè)家族
    在右面，圖層-》位圖-》出一把鎖固定住圖片

    然后左側(cè)，有一個(gè)切片工具，框住圖片

四、盒子模型

#什么是CSS盒子模型？

CSS盒子模型僅僅是一個(gè)形象的比喻，HTML文檔中的每個(gè)元素都被描繪成矩形盒子，這些矩形盒子通過一個(gè)模型來描述其占用空間，這個(gè)模型稱為盒子模型。 
盒子模型通過四個(gè)邊界來描述：margin（外邊距），border（邊框），padding（內(nèi)填充），content（內(nèi)容區(qū)域），如圖所示：

1、盒子模型基本概念解析

    如果把一個(gè)盒子比喻成一個(gè)壁掛相片，
    在HTML中所有的標(biāo)簽都可以設(shè)置
        #外邊距margin ===== 一個(gè)相框與另外一個(gè)相框之間的距離
        #邊框border ====== 邊框指的就是相框
        #內(nèi)邊距padding ===== 內(nèi)容/相片與邊框的距離
        #寬度width/高度height ===== 指定可以存放內(nèi)容/相片的區(qū)域
        
    提示：可以通過谷歌開發(fā)者工具查看盒子的各部分屬性

2、盒子模型的寬度和高度

#1、內(nèi)容的寬度和高度
    通過標(biāo)簽的width和height屬性設(shè)置

#2、元素的寬度和高度
    寬度= 左邊框 + 左內(nèi)邊距 + width(內(nèi)容的寬) + 右內(nèi)邊距 + 右邊框高度
    高度= 。。。。

#3、元素空間的寬度和高度
    寬度= 左外邊距 + 左邊框 + 左內(nèi)邊距 + width(內(nèi)容的寬) + 右內(nèi)邊距 + 右邊框高度 + 右外邊距
    高度= 。。。。

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>盒子模型寬度和高度title><style>span,a,b,strong {display: inline-block;width: 100px;height: 100px;border: 6px solid #000;padding: 20px;margin: 20px;}style>head><body><span>我是spanspan><a href="#"> 我是草鏈接a><b>我是加粗b><strong>我是強(qiáng)調(diào)strong>body>html>

實(shí)例display不懂下面有

3、?。?！css顯示模式:塊級、行內(nèi)、行內(nèi)塊級

在HTML中HTML將所有標(biāo)簽分為兩類，分別是容器級和文本級
在CSS中CSS也將所有標(biāo)簽分為兩類，分別是容器級是塊級元素和行內(nèi)元素

#1、HTML中容器級與文本級

    容器級標(biāo)簽：可以嵌套其他的所有標(biāo)簽
    div、h、ul>li、ol>li、dl>dt+dd

    文本級標(biāo)簽：只能嵌套文字、圖片、超鏈接
    span、p、buis、strong、em、ins、del

#2、CSS中塊級與行內(nèi)

    塊級：塊級元素會(huì)獨(dú)占一行，所有的容器類標(biāo)簽都是塊級，文本標(biāo)簽中的p標(biāo)簽也是塊級
    div、h、ul、ol、dl、li、dt、dd   還有標(biāo)簽p

    行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，所有除了p標(biāo)簽以外的文本標(biāo)簽都是行內(nèi)
    span、buis、strong、em、ins、del

#3、塊級元素與行內(nèi)元素的區(qū)別

    1、塊級元素block
        獨(dú)占一行
        可以設(shè)置寬高
            若沒有設(shè)置寬度，那么默認(rèn)和父元素一樣寬（比如下例中的div的父元素是body，默認(rèn)div的寬就是body的寬）
            若沒有設(shè)置寬高，那么就按照設(shè)置的來顯示

    2、行內(nèi)元素inline
        不會(huì)獨(dú)占一行
        不可以設(shè)置寬高
            盒子寬高默認(rèn)和內(nèi)容一樣

    3、行內(nèi)塊級元素inline-block
        不會(huì)獨(dú)占一行
        可以設(shè)置寬高

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>title><style>/*塊級元素*/div,p,h1 {background-color: red;width: 200px;height: 100px;}/*行內(nèi)元素*/span,b,strong {background-color: blue;width: 200px;height: 100px;}/*行內(nèi)塊級元素*/img {width: 100px;height: 100px;}style>head><body><div>我是divdiv><p>我是段落 p><h1>我是標(biāo)題h1><hr><span>我是spanspan><b>我是加粗b><strong>我是強(qiáng)調(diào)strong><hr><img src="1.png" alt=""><img src="1.png" alt="">body>html>

實(shí)例

GPU云服務(wù)器云服務(wù)器阿里云服務(wù)器的相關(guān)設(shè)置 css屬性訪問CSS屬性 position屬性，css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2213.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 769·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4022·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3855·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3909·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3838·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3949·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3613·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6310·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端基礎(chǔ)-CSS的屬性相關(guān)設(shè)置

一、字體屬性

二、文本屬性

三、背景屬性

四、盒子模型

相關(guān)文章

**前端基礎(chǔ)-CSS是什么？**

CSS相關(guān)文章

CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

前端開發(fā)知識點(diǎn)整理

前端開發(fā)知識點(diǎn)整理

發(fā)表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端基礎(chǔ)-CSS的屬性相關(guān)設(shè)置

一、 字體屬性

二、 文本屬性

三、 背景屬性

四、 盒子模型

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

一、字體屬性

二、文本屬性

三、背景屬性

四、盒子模型