當(dāng)前位置：首頁 > news >正文

網(wǎng)站建設(shè) 2018網(wǎng)站設(shè)計與制作教程

news 2025/7/7 0:48:47

網(wǎng)站建設(shè) 2018,網(wǎng)站設(shè)計與制作教程,呼和浩特網(wǎng)站建設(shè)哪家最便宜,WordPress 突破2M大小作者：學(xué)Java的冬瓜博客主頁：?冬瓜的主頁🌙 專欄：【JavaEE】分享: 且視他人如盞盞鬼火，大膽地去走你的道路。——史鐵生《病隙碎筆》主要內(nèi)容：CSS引入html的三種方式，CSS八大選擇器&#xff…

作者：學(xué)Java的冬瓜
博客主頁：?冬瓜的主頁🌙
專欄：【JavaEE】
分享: 且視他人如盞盞鬼火，大膽地去走你的道路?！疯F生《病隙碎筆》
主要內(nèi)容：CSS引入html的三種方式，CSS八大選擇器，CSS屬性元素(文字，文本，背景，圓弧），塊級元素和行內(nèi)元素的區(qū)別，CSS盒子模型，CSS彈性布局

在這里插入圖片描述

文章目錄

一、CSS引入方式
- 1. 行內(nèi)樣式
- 2. 內(nèi)部樣式
- 3. 外部樣式
二、CSS選擇器
- 1、基礎(chǔ)選擇器
- - 1.1、標簽
  - 1.2、類
  - 1.3、id
  - 1.4、通配符
- 2、復(fù)合選擇器
- - 2.1、后代選擇器
  - 2.2、子類選擇器
  - 2.3、并集選擇器
  - 2.4、偽類選擇器
三、屬性
- 1、字體屬性
- 2、文本屬性
- 3、背景屬性
- 4、圓角矩形
四、元素的顯示模式
五、CSS盒子模型
六、彈性布局

一、CSS引入方式

1. 行內(nèi)樣式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行內(nèi)樣式</title></head><body><!-- 內(nèi)聯(lián)定義語法： <標簽 style="樣式名:樣式值; 樣式名:樣式值..."></標簽>--><div style="width: 500px; height: 300px; background-color: blue;"></div></body>
</html>

2. 內(nèi)部樣式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>內(nèi)部樣式</title></head><body><!-- 類選擇器使用 --><div class="student"></div><!-- 內(nèi)部樣式 --><style>/* 類選擇器:*/.student{width: 200px;height: 50px;background-color: blue;}</style></body>
</html>

3. 外部樣式

CSS/my.css:

#div1{width: 300px;height: 100px;background-color: blue;border: 1px solid red;
}

html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部樣式</title><!-- 引入外部獨立的CSS文件 --><link rel="stylesheet" href="CSS/my.css"/></head><body><div id="div1"></div></body>
</html>

二、CSS選擇器

1、基礎(chǔ)選擇器

優(yōu)先級：id選擇器優(yōu)先級 > 類選擇器 > 標簽選擇器
注意：在style中直接選中相應(yīng)標簽，進行設(shè)置

1.1、標簽

<!-- 標簽選擇器 --><div>i am a div</div>  <!--使用方法--><style>                /* 樣式 */div {width: 100%;height: 200px;background-color: aquamarine;}</style>

1.2、類

<!-- 類選擇器 --><div class="blue">i am a div</div>   <!--使用方法--><style>                              /* 樣式 */.blue {color: blue;}</style>

1.3、id

<!-- id選擇器 --><div id="red">i am a div</div>   <!--使用方法--><style>                          /* 樣式 */#red {color: red;background-color: blue;width: 200px;height: 150px;}</style>

1.4、通配符

注意：使用通配符選擇器，選中所有標簽

<!-- 通配符選擇器 --><div>i am a div</div><style>* {color: purple;}</style>

2、復(fù)合選擇器

注意：復(fù)合選擇器可以是任意基礎(chǔ)選擇器的組合，包括標簽，類，id。

2.1、后代選擇器

元素1 元素2 { 樣式聲明 }?????
注意：1> 元素二可以使用子元素(選中子元素)，也可以使用孫子元素(選中孫子元素)；
2>后代選擇器會選中父元素的指定后代元素(包括元素2及其后代元素)。

<!-- 后代選擇器 --><div>                                         <!-- 使用方式 --><span>i am the first span, 是div的后代<div>我是span的后代</div></span><p>i am the first p</p></div><style>                                      /* 樣式 */div div {/*選中div的孫子元素，也是span的子元素div及其后代元素*/color: aqua;}</style>

2.2、子類選擇器

元素1 元素2 { 樣式聲明 }
注意：1> 元素二只能使用子元素(選中子元素)；
2> 子類選擇器會選中指定子元素及其后代。

<!-- 子類選擇器 --><div><span>i am the first span, 是div的后代<div>我是span的后代</div></span><p>i am the first p</p></div><style>div > span {/*這里選中了div的子元素span及其后代元素*/color: aqua;}</style>

2.3、并集選擇器

元素1, 元素2 { 樣式聲明 }
注意：表示通知選中元素1和元素2

<!-- 并集選擇器 --><div><span>i am the first span, 是div的后代<div id="one">我是span的后代</div></span><p>i am the first p</p></div><style>#one, p {color: aqua;}</style>

2.4、偽類選擇器

注意：這是屬于復(fù)合選擇器的特殊用法。

a:link 選擇未被訪問過的鏈接
a:visited 選擇已經(jīng)被訪問過的鏈接
a:hover 選擇鼠標指針懸停上的鏈接
a:active 選擇活動鏈接(鼠標按下了但是未彈起)

<!-- 偽類選擇器 --><div class="one">i am a div</div><span>i am a span</span><style>.one:hover {  /*設(shè)置鼠標懸停顏色*/color: orange;}span:active { /*設(shè)置鼠標按下未放開時顏色*/color: red;}</style>

三、屬性

1、字體屬性

設(shè)置字體類型：font-family????黑體、宋體等
設(shè)置字體大小：font-size???????可以用px，也可以用large、medium等
設(shè)置字體粗細：font-weight????可以使用數(shù)字(范圍1~1000)，也可以使用單詞
設(shè)置文字樣式：font-style ????italic設(shè)置傾斜，normal設(shè)置恢復(fù)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部樣式</title><!-- 引入外部獨立的CSS文件 --><link rel="stylesheet" type="text/css" href="CSS/my.css"/></head><body><div id="div1">i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?</div><style>div {/* 1.字體屬性部分 *//* 設(shè)置字體類型 */font-family: '宋體';/* 設(shè)置字體大小 */font-size: 20px;/* 設(shè)置字體粗細 */font-weight: 20;/* 設(shè)置字體樣式:（斜體） */font-style: italic;  }</style></body>
</html>

結(jié)果展示：
在這里插入圖片描述

2、文本屬性

設(shè)置文本顏色：color????RGB(紅綠藍)

可以使用這三種方式：1> rgb(255,255,255)?? 2> #ff0000(紅)??3> #000(黑) 4> blue…

設(shè)置文本對齊：text-align???? left、right、center，
設(shè)置文本裝飾：text-decoration????

underline 下劃線(常用)
none 去掉裝飾，可以給a標簽去掉下劃線
overline 上劃線(不常用)
line-through(不常用)

設(shè)置文本縮進：text-indent???? 2em是相對的量，1em是一個文字尺寸大小。
設(shè)置行高：line-height????行高=文字高度+行間距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部樣式</title><!-- 引入外部獨立的CSS文件 --><link rel="stylesheet" type="text/css" href="CSS/my.css"/></head><body><div id="div1">i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?</div><style>div {/* 1.字體屬性部分 *//* 設(shè)置字體類型 */font-family: '宋體';/* 設(shè)置字體大小 */font-size: 20px;/* 設(shè)置字體粗細 */font-weight: 20;/* 設(shè)置字體樣式:（斜體） */font-style: italic;  /* 2.文本屬性部分 *//* 設(shè)置文本顏色 */color: #000;/* 設(shè)置文本對齊 */text-align: left;/* 設(shè)置文本裝飾 */text-decoration: none;/* 設(shè)置文本縮進 */text-indent: 2em;/* 設(shè)置行高 */line-height: 50px;}</style></body>
</html>

結(jié)果展示：
在這里插入圖片描述

3、背景屬性

設(shè)置背景顏色：background-color
設(shè)置背景圖片：background-image: url(路徑)????此處路徑不需要加引號
設(shè)置背景圖片的大小：background-size????后跟寬度和高度設(shè)置圖片尺寸，contain表示圖片在元素范圍內(nèi)變大，圖片weight或height大的達到背景大小；cover則放大圖片蓋滿元素范圍，圖片weight或height小的達到背景大小
設(shè)置背景尺寸：height 和 width：????1>數(shù)字px 2>數(shù)字%
設(shè)置背景平鋪：background-repeat

repeat: 平鋪
no-repeat: 不平鋪
repeat-x: 水平平鋪
repeat-y: 垂直平鋪

設(shè)置背景位置： background-position????后跟坐標x,y，以左上角為遠點，以水平線為x，豎直線為y。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部樣式</title><!-- 引入外部獨立的CSS文件 --><link rel="stylesheet" type="text/css" href="CSS/my.css"/></head><body><div id="div1">i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?</div><style>div {/* 1.字體屬性部分 *//* 設(shè)置字體類型 */font-family: '宋體';/* 設(shè)置字體大小 */font-size: 20px;/* 設(shè)置字體粗細 */font-weight: 20;/* 設(shè)置字體樣式:（斜體） */font-style: italic;  /* 2.文本屬性部分 *//* 設(shè)置文本顏色 */color: #000;/* 設(shè)置文本對齊 */text-align: left;/* 設(shè)置文本裝飾 */text-decoration: none;/* 設(shè)置文本縮進 */text-indent: 2em;/* 設(shè)置行高 */line-height: 50px;/* 3.背景屬性部分 *//* 設(shè)置背景顏色 */background-color: #0f0;/* 設(shè)置背景圖片 */background-image: url(image/女.jpg);/* 設(shè)置背景圖片的大小 */background-size: contain;/* 設(shè)置背景尺寸 */height: 500px;width: 100%;/* 設(shè)置背景平鋪 */background-repeat: repeat;/* 設(shè)置背景位置 */background-position: center center;}</style></body>
</html>

結(jié)果展示：
在這里插入圖片描述

4、圓角矩形

設(shè)置內(nèi)切圓半徑：border-radios????length，length為內(nèi)切圓半徑，length越大，弧度越強烈。

div四角變成圓弧： length小一點

<div class="one">I am a div</div>
<style>.one {width: 200px;height: 100px;background-color: aqua;color: #fff;text-align: center;  /*先水平居中，然后用line-height垂直居中*/line-height: 100px;border-radius: 5px; /*設(shè)置內(nèi)切圓半徑長度*/}
</style>

在這里插入圖片描述

div變成水平膠囊狀： length是背景的高度height的一半

只需要修改上面的第12行代碼為下面
border-radius: 50px; /*設(shè)置內(nèi)切圓半徑長度*/

在這里插入圖片描述

生成div圓形：背景heigth和width一樣大，length為他倆的一半

<div class="one">I am a div</div>
<style>.one {width: 100px;height: 100px;background-color: aqua;color: #fff;text-align: center;  /*先水平居中，然后用line-height垂直居中*/line-height: 100px;border-radius: 50px; /*設(shè)置內(nèi)切圓半徑長度，也可用em */}
</style>

在這里插入圖片描述

四、元素的顯示模式

顯示模式重點的有：塊級元素和行內(nèi)元素：
塊級元素和行內(nèi)元素的區(qū)別：
1> 塊級元素會獨占一行；行內(nèi)元素不會獨占一行
2> 塊級元素高度、寬度、內(nèi)外邊距都是可以設(shè)置的；行內(nèi)元素高度、寬度\行高無效，內(nèi)邊距有效，外邊距有時有效，有時無效。
3> 塊級元素默認寬度是和父元素一樣寬；行內(nèi)元素寬度默認和里面的內(nèi)容一樣寬。

五、CSS盒子模型

在這里插入圖片描述

設(shè)置元素邊框：border????設(shè)置了四個方向可以分為border-top，border-right，border-bottom，boder-left四個標簽設(shè)置。

邊框粗細：數(shù)字+px
邊框顏色：rgb，#+六位十六進制，#+三位十六進制
邊框風(fēng)格：solid(實線)

注意：邊框默認情況下會撐大盒子，使用box-size：border-box，那么邊框是向內(nèi)延展，不會撐大盒子。
防止邊框撐大盒子：box-size：border-box
設(shè)置內(nèi)邊距：padding????元素和該元素內(nèi)容之間的距離
設(shè)置外邊距：margin????元素和元素之間的距離

注意：margin的特殊用法：把margin-left和margin-right設(shè)置成auto(讓瀏覽器自動調(diào)節(jié))，垂直方向無效

<div class="one">I am a div</div>
<style>.one {width: 200px;height: 100px;background-color: aqua;color: #fff;text-align: center;  /*先水平居中，然后用line-height垂直居中(垂直居中的值和背景的height一樣大)*/line-height: 100px;border-radius: 2em; /*設(shè)置內(nèi)切圓半徑長度*/border: 8px #000 solid;box-sizing: border-box;padding: 10px 20px 30px 40px;margin: 20px;}
</style>

六、彈性布局

注意：彈性布局用于解決頁面水平方向排列的問題。

開啟彈性布局的方法：在父元素的設(shè)置樣式中添加：display:flex，代表在父元素上面的子元素變成了彈性的元素，可以設(shè)置尺寸和邊距。

開啟彈性布局后，可以設(shè)置：

未指定justify-content時，默認按照從左到右的方向布局。
指定 justify-content:設(shè)置水平方向的排列

end：彈性元素靠右排列
flex-start：靠左排列
center ：居中
space-around：空白環(huán)繞彈性元素
space-between：彈性元素環(huán)繞空白

align-items:設(shè)置元素垂直方向的排列

end：彈性元素靠下排列
flex-start：靠上排列
center：垂直方向居中
另外兩個對應(yīng)類似

理解：行內(nèi)塊元素可以解決行內(nèi)元素尺寸高度無效的問題，但是行內(nèi)元素和行內(nèi)塊元素，都會把源碼中span之間的這個換行當(dāng)作一個空格，對頁面布局產(chǎn)生影響。因此使用彈性布局是比較理想的做法。

<!--彈性布局--><div><span>1</span> <!--注意：行內(nèi)元素和行內(nèi)塊元素，都會把源碼中span之間的這個換行當(dāng)作一個空格，對頁面布局產(chǎn)生影響--><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div><style>div {width: 100%;height: 150px;background-color: red;/* 開啟彈性布局此時在彈性容器里的元素，不再是"塊級元素",而是成了彈性元素，此時就可以設(shè)置尺寸和邊距了。在要設(shè)置水平排列的元素的父元素，設(shè)置flex */display: flex;/* justify-content:設(shè)置水平方向的排列彈性元素靠右排列:end 靠左排列:flex-start 居中:center 空白環(huán)繞彈性元素space-around 彈性元素環(huán)繞空白space-between*/justify-content: space-around;/* align-items:設(shè)置元素垂直方向的排列*/align-items: center;}div>span {width: 100px;  /* 如果不使用彈性布局，設(shè)置寬度和高度無用 */height: 100px;background-color: aqua;}</style>

彈性布局以上三個操作：display:flex?????justify-content ????align-items:都是在父元素的樣式中添加的。

查看全文

http://m.aloenet.com.cn/news/44232.html

国产亚洲精品福利在线无卡一,国产精久久一区二区三区,亚洲精品无码国模,精品久久久久久无码专区不卡

網(wǎng)站建設(shè) 2018網(wǎng)站設(shè)計與制作教程

文章目錄

一、CSS引入方式

1. 行內(nèi)樣式

2. 內(nèi)部樣式

3. 外部樣式

二、CSS選擇器

1、基礎(chǔ)選擇器

1.1、標簽

1.2、類

1.3、id

1.4、通配符

2、復(fù)合選擇器

2.1、后代選擇器

2.2、子類選擇器

2.3、并集選擇器

2.4、偽類選擇器

三、屬性

1、字體屬性

2、文本屬性

3、背景屬性

4、圓角矩形

四、元素的顯示模式

五、CSS盒子模型

六、彈性布局

相關(guān)文章：

国产亚洲精品福利在线无卡一,国产精久久一区二区三区,亚洲精品无码国模,精品久久久久久无码专区不卡

文章目錄

一、CSS引入方式

1. 行內(nèi)樣式

2. 內(nèi)部樣式

3. 外部樣式

二、CSS選擇器

1、 基礎(chǔ)選擇器

1.1、標簽

1.2、類

1.3、id

1.4、通配符

2、復(fù)合選擇器

2.1、后代選擇器

2.2、子類選擇器

2.3、并集選擇器

2.4、偽類選擇器

三、屬性

1、字體屬性

2、文本屬性

3、背景屬性

4、圓角矩形

四、元素的顯示模式

五、CSS盒子模型

六、彈性布局

相關(guān)文章：

一、CSS引入方式

二、CSS選擇器

1、基礎(chǔ)選擇器

1.1、標簽

1.2、類

1.4、通配符

2、復(fù)合選擇器

2.3、并集選擇器

2.4、偽類選擇器

三、屬性

2、文本屬性

3、背景屬性

4、圓角矩形

四、元素的顯示模式

五、CSS盒子模型

六、彈性布局