前端基礎-CSS的屬性相關設置_ZenDei技術網路在線

一字體屬性二文本屬性三背景屬性四盒子模型五盒子模型各部分詳解一、字體屬性 1、font-weight：文字粗細（表格中*為重點） 2、font-style：文字風格 3、font-size：文字大小 4、font-family：文字字體 5、文字屬性簡寫 6、color：文字顏 ...

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

一、字體屬性

1、font-weight：文字粗細（表格中*為重點）

取值	描述
normal	預設值，標準粗細
bord	粗體 *
border	更粗
lighter	更細
100~900	設置具體粗細，400等同於normal，而700等同於bold *
inherit	繼承父元素字體的粗細值

2、font-style：文字風格

 normal 正常，預設就是正常的
 italic 傾斜

3、font-size：文字大小

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

4、font-family：文字字體

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

常見字體：
serif 襯線字體
sans-serif 非襯線字體
中文：宋體，微軟雅黑，黑體

註意：
    1、設置的字體必須是用戶電腦里已經安裝的字體，瀏覽器會使用它可識別的第一個值。
　 2、瀏覽器如果不支持第一個值，就會識別下一個，也叫“回退”系統
    3、如果取值為中文，需要用單或雙引號擴起來

5、文字屬性簡寫

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

6、color：文字顏色

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

二、文本屬性

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

值	描述
left	左邊對齊預設值
right	右對齊
center	居中對齊
justify	兩端對齊

2、text-decoration：文本裝飾（* 為重點）

值	描述
none	預設。定義標準的文本，通常用來去掉a標簽的下劃線 *
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

3、text-indent：首行縮進

#將段落的第一行縮進 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英雄不問出處，流氓不論歲數</p>
    <a href="#">點我啊</a>
</div>

</body>
</html>

演示

三、背景屬性

註意：沒有寬高的標簽，即便設置背景也無法顯示

屬性	描述	值
background-color	設置標簽的背景顏色的	background-color: rgb(0,255,0); background-color: #00ffff;
background-image	設置標簽的背景圖片	background-image: url("images/2.jpg"); background-image: url("圖片網址"); 註意：如果圖片的大小沒有標簽的大小大，那麼會自動在水平和錘子方向平鋪和填充
background-size	設置標簽的背景圖片的寬、高	background-size: 300px 300px; background-size: 100% 100%;
background-repeat	設置標簽的背景圖片的平鋪方式	background-repeat: repeat; #預設值，在垂直和水平方向都重覆 background-repeat: no-repeat; #不重覆，背景圖片將僅顯示一次 background-repeat: repeat-x; #背景圖片將在水平方向平鋪 background-repeat: repeat-y; #背景圖片將在垂直方向平鋪應用：可以在服務端將一個大圖片截成小圖片，然後在客戶端基於平鋪屬性將小圖重覆這樣用戶就以為是一張大圖，如此，既節省了流量提升了速度，又不影響用戶訪問例如很多網站的導航條都是用這種手法製作的
background-attachment	設置標簽的背景圖片在標簽中固定或隨著頁面滾動而滾動	background-attachment: scroll; #預設值，背景圖片會隨著滾動條的滾動而滾動 background-attachment: fixed; #不會隨著滾動條的滾動而滾動
background-position	前端的坐標系"： -------------------->x軸 \| \| \| \| \| \| y軸圖片預設都是在盒子的左上角， background-position：屬性，就是專門用於控制背景圖片的位置	background-position：水平方向的值，垂直方向的值 1、具體的方位名詞水平方向：left，center，right 垂直方向：top，center，bottom 　　如果只設置了一個關鍵詞，那麼第二個值就是"center"。 2、百分比　　第一個值是水平位置，第二個值是垂直位置。　　左上角是 0% 0%。右下角是 100% 100%。　　如果只設置了一個值，另一個值就是50%。 3、具體的像素（一定要加px單位）例如：30px，50px等等　　第一個值是水平位置，第二個值是垂直位置。　　左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。　　如果只設置了一個值，另一個值就是50%。　　可以混合使用`%`和`position`值。
inherit	設置從父元素繼承background屬性值	以上背景屬性的值均可以設置為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>

背景屬性簡寫實例

2、背景圖片和插入圖片的區別

#1、
背景圖片僅僅只是一個裝飾，不會占用位置，
插入圖片會占用位置

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

#3、
插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片
想被搜索引擎收錄，那麼推薦使用插入圖片

<!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>滾動背景圖示例</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>

滾動圖片，背景圖片不動實例

3、精靈圖

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

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

    精靈圖的作用就是用來較少請求次數，以及降低伺服器處理壓力


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

#4、強調：切圖需要用到frameworks軟體，可以知道每個圖片具體寬多少個像素高多少個像素，該軟體與ps屬於一個家族
    在右面，圖層-》點陣圖-》出一把鎖固定住圖片

    然後左側，有一個切片工具，框住圖片

四、盒子模型

#什麼是CSS盒子模型？

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

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

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

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

#1、內容的寬度和高度
    通過標簽的width和height屬性設置

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

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

<!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>我是span</span>
<a href="#"> 我是草鏈接</a>
<b>我是加粗</b>
<strong>我是強調</strong>

</body>
</html>

實例display不懂下麵有

3、！！！css顯示模式:塊級、行內、行內塊級

在HTML中HTML將所有標簽分為兩類，分別是容器級和文本級
在CSS中CSS也將所有標簽分為兩類，分別是容器級是塊級元素和行內元素

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

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

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

#2、CSS中塊級與行內

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

    行內：行內元素不會獨占一行，所有除了p標簽以外的文本標簽都是行內
    span、buis、strong、em、ins、del

#3、塊級元素與行內元素的區別

    1、塊級元素block
        獨占一行
        可以設置寬高
            若沒有設置寬度，那麼預設和父元素一樣寬（比如下例中的div的父元素是body，預設div的寬就是body的寬）
            若沒有設置寬高，那麼就按照設置的來顯示

    2、行內元素inline
        不會獨占一行
        不可以設置寬高
            盒子寬高預設和內容一樣

    3、行內塊級元素inline-block
        不會獨占一行
        可以設置寬高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        /*塊級元素*/
        div,p,h1 {
            background-color: red;
            width: 200px;
            height: 100px;
        }

        /*行內元素*/
        span,b,strong {
            background-color: blue;
            width: 200px;
            height: 100px;
        }


        /*行內塊級元素*/
        img {
            width: 100px;
            height: 100px;

        }

    </style>
</head>
<body>
<!--塊級-->
<div>我是div</div>
<p>我是段落 </p>
<h1>我是標題</h1>
<hr>

<!--行內-->
<span>我是span</span>
<b>我是加粗</b>
<strong>我是強調</strong>
<hr>


<!--行內塊級 ，沒有圖片可以自己找個鏈接-->
<img src="1.png" alt="">
<img src="1.png" alt="">

</body>
</html>

實例

4、！！！CSS顯示模式轉換

屬性	描述	值
display	可以通過標簽的display屬性設置顯示模式	none HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用 block 塊級 inline 行內 inline-block 行內塊級
display:"none"與visibility:hidden的區別：	visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。 display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面佈局中消失。

屬性

描述

值

display

可以通過標簽的display屬性設置顯示模式

none HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用
block 塊級
inline 行內
inline-block 行內塊級

display:"none"與visibility:hidden的區別：

visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面佈局中消失。

5、div與span

佈局都是用塊級元素，而行內元素是控制內容顯示的。
1、div標簽
   一般用於配合css完成網頁的基本佈局

2、span標簽
  一般用於配合css修改網頁中的一些局部信息，比如一行文字我們只為一部分加顏色<p>我是<span>duoduo</span></p>

3、div和span有什麼區別？
    div一般用於排版，而span一般用於局部文字的樣式
    1、站在HTML的角度：div是一個塊級元素、獨占一行，而span是一個行內元素、不會單獨占一行
    2、站在CSS的角度：div是一個容器級標簽，而span是一個文本級標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div與span標簽</title>

    <style>
        .header {
            margin: 0 auto;

            width: 980px;
            height: 100px;
            background: pink;

            margin-bottom: 10px;
        }

        .content {
            margin: 0 auto;

            width: 980px;
            height: 500px;
            background: #e9ca37;

            margin-bottom: 10px;

        }

        .footer {
            margin: 0 auto;

            width: 980px;
            height: 100px;
            background: #7e1487;

        }

        .logo {
            width: 200px;
            height: 50px;
            background: #bfccdb;
            float: left;
            margin: 20px;
        }

        .nav {
            width: 600px;
            height: 50px;
            background: palegreen;
            float: right;
            margin: 20px;
        }

        .aside {
            width: 250px;
            height: 460px;
            background: #cccccc;
            float: left;
            margin: 20px;
        }

        .article {
            width: 650px;
            height: 460px;
            background: green;
            float: right;
            margin: 20px;

        }

        span {
            color: red;
        }

    </style>
</head>
<body>

<div class="header">

前端基礎-CSS的屬性相關設置

一、 字體屬性

二、 文本屬性

三、 背景屬性

四、 盒子模型

一、字體屬性

二、文本屬性

三、背景屬性

四、盒子模型