我的php學(xué)習(xí)第六天之css篇：css屬性，浮動(dòng)，盒

我的php學(xué)習(xí)第六天之css篇：css屬性，浮動(dòng)，盒子……

.昨日回顧

CSS的介紹

CSS，Cascading Style Sheets層疊樣式表。

一個(gè)網(wǎng)頁由三個(gè)部分：結(jié)構(gòu)、表現(xiàn)、行為，對應(yīng)的標(biāo)準(zhǔn)是：XHTML、CSS、JavaScript。

這三個(gè)標(biāo)準(zhǔn)語言，是瀏覽器直接可以識別的，并且能直接進(jìn)行解釋(翻譯)的。

CSS的格式

一個(gè)CSS樣式表(<style></style>)由多個(gè)CSS規(guī)則構(gòu)成；

一個(gè)CSS規(guī)則由“選擇器”和{}構(gòu)成；

選擇器就是給哪一個(gè)HTML元素定義；

CSS選擇器

第一：基本選擇器（單一）

通用選擇器(*)：將匹配所有的HTML元素；
標(biāo)簽選擇器：對應(yīng)所有的HTML標(biāo)記，名稱與標(biāo)記名稱一樣。
類選擇器：可以通過給一類HTML元素，定義同一個(gè)class屬性來增加樣式。類樣式定義以“.”開頭定義。CSS的CLASS屬性一般給層疊樣式用表。比如：

.news表示class=news的元素增加樣式
news表示class=news的<div>元素增加樣式
.news title表示class=news下的class=title的<div>元素

ID選擇器：給標(biāo)記特定ID屬性的HTML元素來增加樣式。\

Id選擇器的定義，以“#”號開頭
網(wǎng)頁不能出現(xiàn)同一個(gè)ID的值，ID像身份證號，具有唯一性；
HTML元素的ID屬性，一般給JavaScript使用

第二：組合選擇器

多元素選擇器：也就是同時(shí)給多個(gè)HTML元素定義。

body,p,a,ul,li,p{margin:0px;padding:0px;}
每一個(gè)HTML元素都具有默認(rèn)樣式。

后代元素選擇器：用空格來分隔各個(gè)選擇器。

.news .title p{background-color:#FF0000;}

子元素選擇器：用>號來分隔父子選擇器，不存在第三層級的問題。

第三：偽類選擇器

偽類選擇器一般是給超鏈接<a>標(biāo)記來增加樣式。

超鏈接具有四個(gè)狀態(tài)：

正常狀態(tài) a:link{ }

放上狀態(tài) a:hover{ }

激活狀態(tài)a:active{ }

訪問過狀態(tài) a:visited{ }

全局鏈接

a:link,a:visited{color:#333;text-decoration:none;}

a:hover{color:#FF0000,text-decoration:underline;}

給鏈接增加類樣式 (class=“a2”)

a.a2:link,a.a2:visited{ }

a.a2:hover{ }

CSS的繼承性

CSS內(nèi)部元素將繼承外部元素的樣式，多個(gè)外層元素的樣式就疊加到內(nèi)層元素上。<body>元素是網(wǎng)頁中最大的標(biāo)記，它中的樣式將被其它子元素繼承。

哪些CSS屬性能被繼承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等

引入CSS的方式

（1）內(nèi)嵌式

通過<style></style>來書寫CSS代碼。

只能應(yīng)用于當(dāng)前網(wǎng)頁，不能被其它網(wǎng)頁共享。

注意：<style>標(biāo)記可以放在網(wǎng)頁的任何地方，但一般放在<head>。

（2）外聯(lián)式

通過<link>標(biāo)記來引入外部的CSS文件(.css)。

可以被其它網(wǎng)頁共享。public.css index.css news.css about.css

格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意：<link>標(biāo)記只能放在<head>中

（3）行內(nèi)樣式

通過style的屬性來書寫CSS代碼。

每一個(gè)HTML元素，都有 style、class、id、name、title 屬性。

舉例：<p style=“font-size:24px;”></p>

CSS的字體/文本屬性

Font-size：文字大小

Font-weight：加粗

Font-style：斜體

Color：顏色

Line-height：行高

Text-indent：首行縮進(jìn)

Text-align：水平對齊

Letter-spacing：字符間距

CSS列表

List-style-type：列表類型，取值：none、circle、 square

List-style-position：符號位置，取值：inside、outside

List-style-image：圖片路徑，舉例：list-style-image:url(images/li01.gif);

2.CSS背景屬性

Background-color：背景顏色

Background-image：背景圖片，舉例：background-image:url(images/bg.gif);

Background-repeat：背景平鋪，取值：no-repeat(不平鋪)、repeat(平鋪)、repeat-x(x方向)、repeat-y(y方向)

Background-position：背景定位，取值：固定值或百分比

格式：background-position:水平方向垂直方向;

用固定值定位：background-position:100px 0px; //距離左邊100px，距離上邊0px

用百分比定位：background-position:50% 50%; //水平方向居中垂直方向居中

用單詞來定位：background-postion:left|center|right top|center|bottom; 三個(gè)值取其中一個(gè)

Background-attachment：附加信息，取值：scroll(滾動(dòng))、fixed(固定)

簡寫形式：background:url(images/bg.gif) repeat-x 100px 0px; //多個(gè)屬性值間用“空格”隔開

3.CSS浮動(dòng)和清除

Float：元素浮動(dòng)，取值：left或right。

Clear：清除浮動(dòng)，取值：left或right或both

CSS浮動(dòng)元素將向左向右浮動(dòng)；

浮動(dòng)可以叫“飄”起來；

浮動(dòng)的元素，直到碰到父元素的邊框或前一個(gè)浮動(dòng)元素的邊框?yàn)橹梗?/p>

浮動(dòng)元素是一個(gè)塊元素框，不管它原來是什么元素(行內(nèi)元素)；

浮動(dòng)元素不再占用空間，脫離了普通文檔流，層級比普通元素的級別高；

清除浮動(dòng)

清除浮動(dòng)特性后，清除元素之后的其它元素將恢復(fù)默認(rèn)排版；
清除浮動(dòng)特性后，包圍元素從視覺上看起來，像包圍住了浮動(dòng)元素；

4.CSS邊框?qū)傩?/h1>
Border：同時(shí)設(shè)置四個(gè)邊框的屬性
Border-left：設(shè)置左邊框的屬性
Border-right：設(shè)置右邊框的屬性
Border-top：設(shè)置頂邊框的屬性
Border-bottom：設(shè)置底邊框的屬性
格式：border-bottom：粗細(xì) 線型線顏色;
舉例：border-bottom：2px solid #FF0000; //元素的下邊線為2px粗的實(shí)線，顏色為紅色
線型取值：none(無邊線)、solid(實(shí)線)、dashed(虛線)、dotted(點(diǎn)狀線)、double(雙線)

5.“盒子”模型

每一個(gè)HTML元素可以看成一個(gè)“盒子”。

一個(gè)“盒子”具有：寬度、邊框、內(nèi)填充、外邊距

寬度(width)和高度(height)：是指內(nèi)容的寬度和高度，不含邊框、外邊距、內(nèi)填充。

內(nèi)填充(padding)：是指內(nèi)容到邊框線間的距離，含四個(gè)方向：上、右、下、左

外邊距(margin)：是指邊框線以外的距離。

計(jì)算一個(gè)“盒子”的總空度

假設(shè)：總寬度為100px，邊框?yàn)?px，內(nèi)填充為10px，求內(nèi)容的寬度

Width=100px – 1px*2 -10px*2=78px

假設(shè)：總寬度為100px，內(nèi)容的寬50px，求左右內(nèi)填充分別是多少？

Padding-left=(100px – 50px )/2=25px

6.CSS內(nèi)填充padding

Padding-left：左邊線到內(nèi)容間的距離

Padding-right：右邊線到內(nèi)容間的距離

Padding-top：頂邊線到內(nèi)容間的距離

Padding-bottom：底邊線到內(nèi)容間的距離

Padding：同時(shí)設(shè)置四個(gè)邊的內(nèi)填充距離

padding:10px; //表示：上下左右四個(gè)內(nèi)填充都是10px

padding:5px 10px; //表示：上下為5px，左右為10px

padding:5px 10px 15px; //表示：上為5px，左右為10px，下為15px

padding:5px 10px 15px 20px; //表示：上右下左分別設(shè)置不同的內(nèi)填充，順序不可亂

7.CSS外邊距margin

Margin-left：左邊線以外的距離

Margin-right：右邊線以外的距離

Margin-top：頂邊線以外的距離

Margin-bottom：底邊線以外的距離

Margin:10px; //表示：四個(gè)外邊距都是10px

Margin:10px 15px; //表示：上下外邊為10px，左右外邊距為15px

Margin:5px 10px 15px //表示：上外邊距為5px，左右外邊距為10px，下外邊距為15px

Margin:5px 10px 15px 20px; //分別設(shè)置四外外邊距，順序?yàn)椤?strong>上右下左”

8.綜合案例：PHP首頁

一、首先要確定的事情

主頁的寬度：973px

主頁的背景色、背景圖片

網(wǎng)頁的結(jié)構(gòu)：網(wǎng)頁頭部、網(wǎng)頁尾部、網(wǎng)頁主要內(nèi)容（左右兩列）

二、網(wǎng)頁結(jié)構(gòu)圖

lass屬性 - 定制化網(wǎng)頁設(shè)計(jì)的強(qiáng)大武器

在HTML中,Class屬性是一個(gè)非常強(qiáng)大而又靈活的工具。它可以讓您為網(wǎng)頁中的各種元素賦予獨(dú)特的樣式和功能,從而打造出與眾不同的視覺效果和交互體驗(yàn)。本文將為您解密Class屬性的魔力,教您如何利用它來實(shí)現(xiàn)個(gè)性化的網(wǎng)頁設(shè)計(jì)。

1. Class屬性的基本用法

Class屬性允許您為HTML元素指定一個(gè)或多個(gè)類名。這些類名可以在CSS中定義樣式規(guī)則,從而影響元素的外觀。

<div class="header">
  <h1 class="title">歡迎來到我的網(wǎng)站</h1>
  <p class="description">這里是網(wǎng)站的簡介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class屬性的進(jìn)階用法

除了基本的樣式定制,Class屬性還可以用于更復(fù)雜的場景。您可以為同一個(gè)元素指定多個(gè)類名,實(shí)現(xiàn)更細(xì)致的樣式控制。

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class屬性與JavaScript的結(jié)合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進(jìn)行聯(lián)動(dòng),實(shí)現(xiàn)各種交互效果。您可以通過JavaScript動(dòng)態(tài)地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個(gè)盒子</div>

const box=document.getElementById('box');

box.classList.add('active'); // 添加類名
box.classList.remove('box'); // 刪除類名
box.classList.toggle('hidden'); // 切換類名

4. Class屬性的最佳實(shí)踐

在使用Class屬性時(shí),有幾個(gè)需要注意的最佳實(shí)踐:

類名要具有描述性,方便理解和維護(hù)
避免過多的類名,保持CSS規(guī)則的簡潔性
利用CSS預(yù)處理器如SASS/LESS來管理類名和樣式規(guī)則
結(jié)合BEM或OOCSS等命名方法論,提高代碼的可讀性和可維護(hù)性

總之,HTML Class屬性是一個(gè)非常強(qiáng)大的工具,它可以幫助您定制化網(wǎng)頁設(shè)計(jì),打造出獨(dú)一無二的視覺效果和交互體驗(yàn)。只要掌握好它的用法,相信您一定能創(chuàng)造出令人驚嘆的網(wǎng)頁作品。

d屬性 - 賦予網(wǎng)頁元素個(gè)性化標(biāo)識的關(guān)鍵所在

在HTML中,Id屬性是一個(gè)非常重要的元素,它可以為網(wǎng)頁上的每個(gè)元素提供一個(gè)獨(dú)特的標(biāo)識符。通過Id屬性,您可以精準(zhǔn)地定位和操作特定的HTML元素,從而實(shí)現(xiàn)更細(xì)致的樣式控制和交互功能。本文將為您揭示Id屬性的魔力,教您如何利用它來打造出與眾不同的網(wǎng)頁體驗(yàn)。

1. Id屬性的基本用法

Id屬性的值必須在整個(gè)HTML文檔中是唯一的,這使它成為定位和操作特定元素的理想選擇。通常情況下,我們會(huì)為頁面中的重要元素如頁頭、導(dǎo)航欄、主內(nèi)容區(qū)域等分別設(shè)置Id。

<header id="header">
  <nav id="nav">
    <ul>
      <li><a href="#">首頁</a></li>
      <li><a href="#">產(chǎn)品</a></li>
      <li><a href="#">關(guān)于我們</a></li>
    </ul>
  </nav>
</header>

<main id="main">
  <section id="hero">
    <h1>歡迎來到我的網(wǎng)站</h1>
    <p>這里是網(wǎng)站的主要內(nèi)容區(qū)域</p>
  </section>
</main>

2. Id屬性與CSS的結(jié)合

有了Id屬性,您可以在CSS中直接針對特定元素進(jìn)行樣式定制。這種精準(zhǔn)的選擇器使您能夠更好地控制網(wǎng)頁的視覺效果。

#header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

#nav ul {
  list-style-type: none;
  display: flex;
}

#nav li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

#hero {
  background-color: #f2f2f2;
  padding: 50px;
  text-align: center;
}

3. Id屬性與JavaScript的結(jié)合

除了CSS,Id屬性在JavaScript中也扮演著重要的角色。通過Id,您可以快速地獲取和操作特定的HTML元素,實(shí)現(xiàn)各種交互效果。

<button id="myButton">點(diǎn)擊我</button>

const button=document.getElementById('myButton');

button.addEventListener('click', ()=> {
  alert('您點(diǎn)擊了按鈕!');
});

4. Id屬性的最佳實(shí)踐

在使用Id屬性時(shí),有幾個(gè)需要注意的最佳實(shí)踐:

Id值應(yīng)該具有描述性,方便理解和維護(hù)
盡量避免在CSS中過度使用Id選擇器,保持CSS規(guī)則的靈活性
結(jié)合Class屬性使用,提高代碼的可讀性和可維護(hù)性
在JavaScript中謹(jǐn)慎使用Id,以免造成過度耦合

總之,HTML Id屬性是一個(gè)非常強(qiáng)大的工具,它可以為網(wǎng)頁元素提供獨(dú)特的標(biāo)識,從而幫助您實(shí)現(xiàn)精細(xì)化的樣式控制和交互功能。只要掌握好它的用法,相信您一定能打造出令人驚嘆的網(wǎng)頁作品。

在線咨詢

上一篇：都2021年了，做個(gè)Chrome插件給自己吧
下一篇：一篇文章搞懂 Django 中的 AJAX

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商