我的php學習第六天之css篇：css屬性，浮動，盒

我的php學習第六天之css篇：css屬性，浮動，盒子……

.昨日回顧

CSS的介紹

CSS，Cascading Style Sheets層疊樣式表。

一個網頁由三個部分：結構、表現、行為，對應的標準是：XHTML、CSS、JavaScript。

這三個標準語言，是瀏覽器直接可以識別的，并且能直接進行解釋(翻譯)的。

CSS的格式

一個CSS樣式表(<style></style>)由多個CSS規則構成；

一個CSS規則由“選擇器”和{}構成；

選擇器就是給哪一個HTML元素定義；

CSS選擇器

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

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

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

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

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

第二：組合選擇器

多元素選擇器：也就是同時給多個HTML元素定義。

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

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

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

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

第三：偽類選擇器

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

超鏈接具有四個狀態：

正常狀態 a:link{ }

放上狀態 a:hover{ }

激活狀態a:active{ }

訪問過狀態 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內部元素將繼承外部元素的樣式，多個外層元素的樣式就疊加到內層元素上。<body>元素是網頁中最大的標記，它中的樣式將被其它子元素繼承。

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

引入CSS的方式

（1）內嵌式

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

只能應用于當前網頁，不能被其它網頁共享。

注意：<style>標記可以放在網頁的任何地方，但一般放在<head>。

（2）外聯式

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

可以被其它網頁共享。public.css index.css news.css about.css

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

注意：<link>標記只能放在<head>中

（3）行內樣式

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

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

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

CSS的字體/文本屬性

Font-size：文字大小

Font-weight：加粗

Font-style：斜體

Color：顏色

Line-height：行高

Text-indent：首行縮進

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; 三個值取其中一個

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

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

3.CSS浮動和清除

Float：元素浮動，取值：left或right。

Clear：清除浮動，取值：left或right或both

CSS浮動元素將向左向右浮動；

浮動可以叫“飄”起來；

浮動的元素，直到碰到父元素的邊框或前一個浮動元素的邊框為止；

浮動元素是一個塊元素框，不管它原來是什么元素(行內元素)；

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

清除浮動

清除浮動特性后，清除元素之后的其它元素將恢復默認排版；
清除浮動特性后，包圍元素從視覺上看起來，像包圍住了浮動元素；

4.CSS邊框屬性

Border：同時設置四個邊框的屬性

Border-left：設置左邊框的屬性

Border-right：設置右邊框的屬性

Border-top：設置頂邊框的屬性

Border-bottom：設置底邊框的屬性

格式：border-bottom：粗細線型線顏色;

舉例：border-bottom：2px solid #FF0000; //元素的下邊線為2px粗的實線，顏色為紅色

線型取值：none(無邊線)、solid(實線)、dashed(虛線)、dotted(點狀線)、double(雙線)

5.“盒子”模型

每一個HTML元素可以看成一個“盒子”。

一個“盒子”具有：寬度、邊框、內填充、外邊距

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

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

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

計算一個“盒子”的總空度

假設：總寬度為100px，邊框為1px，內填充為10px，求內容的寬度

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

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

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

6.CSS內填充padding

Padding-left：左邊線到內容間的距離

Padding-right：右邊線到內容間的距離

Padding-top：頂邊線到內容間的距離

Padding-bottom：底邊線到內容間的距離

Padding：同時設置四個邊的內填充距離

padding:10px; //表示：上下左右四個內填充都是10px

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

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

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

7.CSS外邊距margin

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

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

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

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

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

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

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

Margin:5px 10px 15px 20px; //分別設置四外外邊距，順序為“上右下左”

8.綜合案例：PHP首頁

一、首先要確定的事情

主頁的寬度：973px

主頁的背景色、背景圖片

網頁的結構：網頁頭部、網頁尾部、網頁主要內容（左右兩列）

二、網頁結構圖

lass屬性 - 定制化網頁設計的強大武器

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

1. Class屬性的基本用法

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

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

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

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

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

2. Class屬性的進階用法

除了基本的樣式定制,Class屬性還可以用于更復雜的場景。您可以為同一個元素指定多個類名,實現更細致的樣式控制。

<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的結合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進行聯動,實現各種交互效果。您可以通過JavaScript動態地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個盒子</div>

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

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

4. Class屬性的最佳實踐

在使用Class屬性時,有幾個需要注意的最佳實踐:

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

總之,HTML Class屬性是一個非常強大的工具,它可以幫助您定制化網頁設計,打造出獨一無二的視覺效果和交互體驗。只要掌握好它的用法,相信您一定能創造出令人驚嘆的網頁作品。

d屬性 - 賦予網頁元素個性化標識的關鍵所在

在HTML中,Id屬性是一個非常重要的元素,它可以為網頁上的每個元素提供一個獨特的標識符。通過Id屬性,您可以精準地定位和操作特定的HTML元素,從而實現更細致的樣式控制和交互功能。本文將為您揭示Id屬性的魔力,教您如何利用它來打造出與眾不同的網頁體驗。

1. Id屬性的基本用法

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

<header id="header">
  <nav id="nav">
    <ul>
      <li><a href="#">首頁</a></li>
      <li><a href="#">產品</a></li>
      <li><a href="#">關于我們</a></li>
    </ul>
  </nav>
</header>

<main id="main">
  <section id="hero">
    <h1>歡迎來到我的網站</h1>
    <p>這里是網站的主要內容區域</p>
  </section>
</main>

2. Id屬性與CSS的結合

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

#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的結合

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

<button id="myButton">點擊我</button>

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

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

4. Id屬性的最佳實踐

在使用Id屬性時,有幾個需要注意的最佳實踐:

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

總之,HTML Id屬性是一個非常強大的工具,它可以為網頁元素提供獨特的標識,從而幫助您實現精細化的樣式控制和交互功能。只要掌握好它的用法,相信您一定能打造出令人驚嘆的網頁作品。

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商