css學習入門篇（1）

時間 2020-05-20

標籤 css 學習入門欄目 CSS 简体版

原文原文鏈接

1.網頁製做的兩大誤區；【1】.網頁用了Table，頁面就不標準【2】.div標籤越多越好。php

解釋：table是爲了存儲數據而div是爲了架設頁面，二者有不一樣的工做職能。css

2.W3C標準：他不是一個標準，而是一系列標準的組合：結構標準（表明語言HTML）、表現標準（CSS）、動做標準（JavaScript）。html

3.css控制頁面的四種方式：程序員

【1】行內樣式：<p style=" color: #F00; background: #CCC; font-size: 12px;">行內樣式 </p>瀏覽器

缺點：每一個標籤都要設置style標籤，致使文件體積較大，HTML不夠純淨，不利於搜索蜘蛛爬行，維護成本較高框架

【2】內嵌樣式：ide

缺點：每一個頁面都要定義css代碼，若是一個網站有不少頁面，每一個文件都很大，後期維護也很難度也大佈局

【3】連接樣式：推薦使用性能

優勢：實現了頁面框架HTML代碼與表現CSS代碼的徹底分離，使得前期製做和後期維護都十分方便，而且若是要保持頁面風格統一字體

【4】導入樣式：

採用import樣式導入CSS樣式表

4.CSS選擇器

【1】標籤選擇器：對標籤統一聲明css樣式。

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title>標籤選擇器 </ title>

< style type= "text/css" >

p {

font-size: 20 px; /*字體大小*/

background: #090; /*字體背景顏色*/

color: aqua; /*字體自己顏色*/

}

</ style>

</ head>

< body>

< p>標籤選擇器demo </ p>

</ body>

</ html>

優勢：對統一標籤屬性進行了統一設置

缺點：若是頁面中除了某個標籤和其餘標籤屬性不是一直的，那麼這樣寫就不行了

【2】ID選擇器：ID具備惟一性，給標籤起個ID更具備針對性。

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title>標籤選擇器 </ title>

< style type= "text/css" >

#one {

font-size: 20 px; /*字體大小*/

background: #090; /*字體背景顏色*/

color: aqua; /*字體自己顏色*/

}

</ style>

</ head>

< body>

< p id= "one" >ID選擇器demo</ p>

</ body>

</ html>

優勢：能夠單獨給某個標籤訂義屬性，能夠解決【1】中的弊端

【3】類選擇器：就是給不一樣的標籤賦予相同的css樣式

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title>標籤選擇器 </ title>

< style type= "text/css" >

. one{

font-size: 20 px; /*字體大小*/

background: #090; /*字體背景顏色*/

color: aqua; /*字體自己顏色*/

}

</ style>

</ head>

< body>

< p class= " one"> ID選擇器demo</ p>

< div class= " one"> 此處爲DIV標籤內的文字</ div>

</ body>

</ html>

備註：ID和class能夠同時使用，只是ID是#開頭，class是.開頭

【4】通用選擇器：對整個HTML標籤進行css樣式定義

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title></ title>

</ head>

< style>

* {

margin: 0; padding: 0;/*保證頁面可以兼容多種瀏覽器，固然這樣會影響性能，也能夠用到那些就加那些*/

font-size : 20 px;

background :#000088 ;

color : brown ;

}

</ style>

< body>

< p>通用選擇器 </ p>

< div>通用選擇器 </ div>

</ body>

</ html>

備註：功能很強大，可是不夠靈活，不建議使用

5.CSS選擇器命名及經常使用命名：駱駝命名法，帕斯卡命名法，匈牙利命名法

命名是程序員最基本的，這裏就很少作介紹，不瞭解的能夠本身百度瞭解，很簡單.

6.盒子模型：是XHTML+CSS佈局頁面中的核心！

剛開始接觸的人來講理解可能有點暈，其實就是css標籤中的四個屬性：content(內容)、border(邊框)、padding(內邊距)、margin(外邊距).

我的解釋：我把一個網頁當着是一個大的長方體，裏面有不少小長方體，這些小長方體的寫的內容就是content，小長方體的厚度咱們理解爲border，裏面的內容和小長方體的距離咱們認爲是padding，小長方體和大長方體之間的距離能夠認爲是margin.

每一個人理解方式不同，能夠選擇其餘的模型去幫助本身去記憶，最主要是去實戰中不斷用用這些標籤屬性幫助理解.

7.塊狀元素和內聯元素：對定義理解可能以爲很差理解，在後續的實戰中會慢慢理解，先理解定義，後面在寫代碼的過程慢慢對照定義深刻理解

塊狀元素：通常是其餘元素的容器，可容納內聯元素和其餘塊狀元素，塊狀元素排斥其餘元素與其位於同一行，寬度(width)高度(height)起做用。常見塊狀元素爲div和p。

內聯元素：內聯元素只能容納文本或者其餘內聯元素，它容許其餘內聯元素與其位於同一行，但寬度(width)高度(height)不起做用。常見內聯元素爲「a」.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。