CSS學習指南

.1 CSS 語法

CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

selector {property: value}

下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時將字體大小設置為 14 像素。

在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu)：

image.png

1.1.1 字體屬性：

屬性含義屬性值

font-family 字體 各種字體
font-style 字體樣式 italic、oblique
font-variant 小體大寫 small-caps
font-weight 字體粗細 bold、bolder、lighter…
font-size 字體大小 absolute、relative、%
color 字體顏色 顏色值

1.1.2 顏色與背景屬性：

屬性含義屬性值

Color 顏色 顏色值
Background-color 背景色 顏色值
Background-image 背景圖案 圖片路徑
Background-repeat 背景圖案重復方式 Repeat-x | repeat-y | no-repeat
Background-attachment 背景的滾動 Scroll | fix
Background-position 背景圖案初始位置 % | n em | top | left | right | bottom

1.1.3 文本屬性:

屬性含義屬性值

word-spacing 單詞間距 n em
letter-spacing 字母間距 n em
text-decoration 裝飾樣式 underline| overline| line-through| blink
vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom
text-transform 轉(zhuǎn)為其他形式 capitalize| uppercase| lowercase
text-align 對齊 left| right| center| justify
text-indent 縮進 n em| %
line-height 行高 pixels、n em、%

1.1.4 邊距屬性:

屬性含義屬性值

margin-top 上邊距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %

1.1.5 邊框?qū)傩?

屬性含義屬性值

Border-top-width 上邊框?qū)挾?n em | thin | medium | thick
Border-right-width 右 同上
Border-bottom-width 下 同上
Border-left-width 左 同上
Border-width 四邊 同上
Border-color 邊框顏色 Color
Border-style 邊框樣式 Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top|right|bottom|left 上(右|底|左)所有屬性 Border-width | border-style | color

1.1.6 圖文混排:

屬性含義屬性值

Width 寬度 n em | %
Height 高度 n em
Float 文字環(huán)繞 Left | right
clear 去除文字環(huán)繞 Left | right | both

1.1.7 列表屬性:

屬性含義屬性值

Display 是否顯示 Block | inline | list-item | none
White-space 空白部分 Pre | nowrap | normal（是否合并)
List-style-type 項目編號 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image 項目前圖片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部屬性 Keyword | position | url

1.1.8 鼠標屬性:

屬性值含義屬性值含義

Auto 自動 N-resize 上箭頭
Crosshair "+" Se-resize 右下
Default 默認 Sw-resize 左下
Hand 手形 S-resize 下箭頭
Move 移動 W-resize 左箭頭
E-resize 右箭頭 Text "I"
Ne-resize 右上 Wait 沙漏
Nw-resize 左上 help 幫助

1.2 CSS選擇器

1.2.1 li標簽選擇器

html:

<li>列表項1</li>（改變標簽里的樣式類型）

css:

針對所有列表

li{
 color: rgb(255,0,0); /*#ff0000 red*/
 font-size: 30px;
}

1.2.2 類選擇器 class（把一堆樣式劃為一類）

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>

當前頁面內(nèi)可以多個同樣 html:

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all"><li class="blue">`列表項``2`</li></pre>

css:

<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> color: #0000ff;</pre>
<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> }</pre>

1.2.3 ID選擇器 id（也可控制某個DIV樣式）

當前頁面內(nèi)唯一id；如果頁面內(nèi)出現(xiàn)多個相同id，雖然可以解析出，但不規(guī)范，不建議

<li id="item">列表項1</li>
 #item{
 color: #00FF00;
 font-size:40px;
 }

權(quán)重越大，優(yōu)先級越高，優(yōu)先級高的覆蓋優(yōu)先級低的

各種選擇器可以用在列表li、容器div等中

html:

 <div>這是一個Div</div>

CSS:

 div{
 background-color: #ccc;
 }

1.3 CSS樣式規(guī)則

1.3.1 三種定義樣式的方法

①****在本文件下的表示方法

 <head>
 <style type="text/css"> //樣式
 選擇器（即修飾對象）{ //.g{ }
 對象屬性1：屬性值1； //font：
 對象屬性2：屬性值2； //height：50px；
 }
 </style>
 </head>

②在1.css文件中的表示方法

 <link rel="stylesheet" type="text/css" href="1.css">

③直接跟著定義樣式

<div class=" size show show-1"></div>

每個樣式間用空格隔開，有三個樣式 size、show、show-1

1.3.2 顏色

red = #FF0000 = rgb(255,0,0) 紅色
blue = #0000ff = 藍色
green = #00FF00 = 綠色
 #ccc = #cccccc 灰色
 #fff = #ffffff 白色
black = #333 黑色
background: #fff; 背景為白色
background: #fff; 背景為白色
 cursor: pointer; 當移動到當前位置時（配合li:hover）變成小手
 transition: all 1s ease; 漸變效果（有些瀏覽器不支持）
 -webkit-transition:all 1s ease;
 -o-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -ms-transition: all 1s ease; 對于不支持的瀏覽器，解決方案

1.3.3 字體font

 width: 200px;寬度
 font-weight: bold; 字體粗細（粗體）
 font-size: 12px; 字體大小
 color: #ff7300; 字體顏色
 background-color: #ccc; 背景色
 height 高度
width 寬度（可以認為是長度）
font-family：隸書；字體

長度單位：

px 像素

顏色

 十六進制：#ffffff
 顏色名稱：red

尺寸屬性：

 Height、max_height、min_height
 width、max_width、min_width

字體、字號：

 font 縮寫形式
 font-weight 粗細
 font-size 大小
 font-family 字體系列
 font-style 字體樣式

字體顏色

 color
 opacity 透明度 css3

行距、對齊等

 line-height 行高
 text-align 對齊
 letter-spacing 字符間距
 text-decoration 文本修飾
 overflow 浮動
 text-overflow
 text-indent

1.3.4 列表寬度決定了列表項寬度

 height: 100px;
 line-height: 100px; 使其上下居中對齊
 text-align: right; 水平對齊方式：水平靠右
 text-align: center; 水平對齊方式：水平居中
 letter-spacing: 10px; 字間距
 text-decoration: none; 下劃線設置（去除）
 white-space: nowrap; 設為一行顯示
 overflow: hidden;
 display: block; 隱藏多余內(nèi)容

1.3.5 圖片

 background-image: url(images/1.jpg); 插入圖片
 background-image: url(../images/1.jpg); 插入上一級文件夾中images文件夾中的圖片1.jpg
 background-repeat: no-repeat; 圖片默認多大就是多大（不加自動復制顯示）
 background-position: 50px 50px; 移動圖片（正數(shù)為右下角，負數(shù)為左上角）

1.3.6 塊級元素默認占一行

★float: left; 浮動 將塊級元素變?yōu)樾屑壴?讓多行在一行 如果一行放不下，自動轉(zhuǎn)第二行
 height: 50px; /*使其上下居中對齊*/
 line-height: 50px; /*使其上下居中對齊*/
 text-align: center; 水平對齊方式：水平居中
 margin-right: 5px; 每個元素間間隔5px
 font-size: 20px; 字體大小

1.3.7 焦點

鼠標移到當前位置時的狀態(tài)

 a:hover{
 color: red;
 }
 /*鼠標激活選定狀態(tài)*/
 a:active{
 color: green;
 }

1.3.8 超鏈接樣式的四種狀態(tài)

 未訪問狀態(tài) a:link
 已訪問狀態(tài) a:visited
 鼠標移上狀態(tài) a：hover
 激活選定狀態(tài) a：active

1.3.9 盒子（矩形方框）

margin（外邊距/邊界）
border（邊框）
padding（內(nèi)邊距/填充）
width 寬度
height 高度
margin 外邊距/邊界
margin：1px 2px 3px 4px 外邊距/邊界（上右下左）
margin：1px 2px 外邊距/邊界（上下、左右）
margin：1px 外邊距/邊界（上下左右、通常表現(xiàn)出來上左）

margin

一個值：4邊

兩個值：上下、左右

四個值：上右下左

margin-left: auto; 左邊距自動
margin-left: auto; /水平居中/
margin-right: auto; /水平居中/
margin: 0px auto; /水平居中，有的瀏覽器不支持/

默認下，div沒有邊框border（有顏色）

默認不顯示border

border-color: blue;
border-width: 10px;
border-style: solid; 以上三句話使其最終顯示 solid實心的
border width style color
border：20px solid green 一句話也可以顯示
border-top:30px solid #ccc; 設置上邊框?qū)傩?padding-top: 20px; 內(nèi)邊距（上）
padding: 20px; 內(nèi)邊距（上下左右）
padding: 20px 50px; 內(nèi)邊距（上下、左右）

對同一屬性做設置，后面的優(yōu)先級高

對外邊距/邊界設置，一般統(tǒng)一格式，不要上邊設下邊距，下邊設上邊距；如果設置，按大的顯示

margin-bottom: 30px;
.topbar .search .topabar .link{float:right;} 共用一種樣式{浮動 將塊級元素變?yōu)樾屑壴貆

1.3.10 解決浮動問題，使用尾類

 .fix{*zoom:1;*clear:both;} 
 .fix:before,.fix:after{
 display: table;clear:both;
 content: '';
 }
 <div class="wrap fix"> +fix誰的子元素浮動，就可以清除影響
 .fix{*zoom:1;*clear:both;}
 .fix:before,.fix:after{
 display: table;clear:both;
 content: '';
 }

1.3.11 定位

 position: absolute; 絕對定位
 position: relative; 相對定位

參照物是距離最近定位的父元素

1.3.12 對定位元素顯示排序

 z-index: 1; 數(shù)字越大，優(yōu)先級越高

設置鼠標指到哪里，哪里在上邊

 .c4:hover{
 z-index: 3;
 }

1.3.13 響應式

viewport
 設備方向：Orientation
 設備方向：Orientation

1.3.14 其他樣式

header、footer、center、left、right

頭尾中間左右

鏈接默認帶下劃線

<div class=" size show show-1"></div>

每個樣式間用空格隔開，有三個樣式 size、show、show-1

list-style:none; 去除前面的列表序列號
border 邊框
border: 1px solid red; 添加邊框
<div style="clear: both"></div> 用于消除浮動效果導致的順序錯亂
height 高度
width 寬度（可以認為是長度）
font-family：隸書；字體
 top: 25px; 距離上方25px
 left: 15px; 距離左邊15px
display: none;不顯示
@media screen and (max-width: 900px){ } 當分辨率小于900px時
line-height: 1.8; 行高

1.4 為CSS單獨建立文件（建立鏈接link）

TML是超文本標記語言。

web標準是由W3C和其它標準化組織制成集合。

web標準的構(gòu)成

結(jié)構(gòu)（對網(wǎng)頁元素進行整理和分類-HTML）

表現(xiàn)（設置網(wǎng)頁元素的版式，顏色，大小等外觀樣式-CSS）

行為（模型的定義及交互的表現(xiàn)-JS）

HTML常用標簽

加粗:<strong>和<b>

傾斜：<em>和<i>

刪除線：<del>和<s>

下劃線：<ins>和<u>

<div>分割分區(qū)<span>跨度跨距

圖片標簽<img/>

屬性: src圖片路徑

alt替換文本，圖片無法正常顯示

title提示文本，鼠標放到圖像顯示

width寬度，height高度（只需要修改其中一個）

border邊框（無需單位直接寫數(shù)值）

注意：

①圖像標簽可以擁有多個屬性，必須寫在標簽名后面

②屬性之前不分先后順序，標簽名與屬性，屬性與屬性之間需要空格分開

③屬性采取鍵值對的格式

相對路徑：以引用文件所在位置為參考基礎

（同一級路徑，下一級路徑/，上一級路徑../）

絕對路徑：從盤符開始的路徑（\）

常用屬性

img ——vspace垂直邊距，hspace水平邊距 align對齊

details,summary，鼠標點擊時顯示或隱藏

mark 文本中高亮顯示，和strong相似

cite 用于引用標記，斜體顯示

draggable true選中后可以拖動操作

font定義 font-style font-weight font-size/line-height font-family 順序不能改變

word-wrap break-word長單詞或url地址自動換行

letter-spacing字間距

word-spacing單詞間距

line-height行間距

text-decorantion文本裝飾unline下劃線，overline上劃線，line-through刪除線

text-indent 2em 首行縮進兩個字符

white-space空白符處理 pre

box-sizing:content-box當widthh和height的時候不包括margin和panding

更換圖層位置，z軸偏移z-index:-10

align-items:center居中對齊

align-self:center

超鏈接標簽<a>

href鏈接目標地址

target鏈接頁面打開的方式（_self當前窗口打開,_blank新窗口中打開方式）

外部鏈接，內(nèi)部鏈接，空鏈接，下載鏈接，網(wǎng)頁元素鏈接，錨點鏈接（快速定位到頁面的某個位置- 添加id屬性）

去除超鏈接樣式:text-decoration:none

特殊字符

空格符  

小于號< 大于號>

表格標簽

align對齊方式

bolder表格邊框

cellpadding單元格與內(nèi)容之間空白

cellspacing單元格與單元格之前空白

合并單元格：rowspan colspan

列表標簽

無序列表：ul li

有序列表：ol li

自定義列表：dl dt dd

表單標簽

完整表單：表單域<form>，表單控件，提示信息

<form>

——action（指定接受并處理表單數(shù)據(jù)的服務器程序的url地址）

——method（get/post設置表單數(shù)據(jù)的提交方式）

——name（指定表單名稱）

<input>輸入元素

type屬性：button（點擊按鈕）checkbox（復選框）file（輸入字段和“瀏覽”按鈕）hidden（隱藏輸入字段）image（圖片形式提交按鈕）password（密碼字段）radio（單選按鈕）reset（重置按鈕）sumbit（提交按鈕）text（單行輸入字段，默認20個字符）

name屬性：（相同的名字——單選框和復選框）區(qū)別不同表單元素

value屬性：定義input元素值

checked屬性：頁面首次加載是否選中

maxlength屬性：輸入字段的最大值

<lable>標簽

用于綁定一個表單元素，當點擊<lable>標簽內(nèi)的文本時，瀏覽器會自動將焦點轉(zhuǎn)到或者選擇對應的表單元素上，用來增加用戶體驗。

<lable>標簽的for屬性與相關元素的id屬性相同

<select>下拉列表元素

-<option>

-selected="selected"默認選中

<textarea>文本域

-cols rows （每行每列字數(shù)）

站開發(fā)簡介

網(wǎng)站開發(fā)包括前端和后端，后端是服務器，用來存儲數(shù)據(jù)和設計業(yè)務邏輯，前端用來展示網(wǎng)站效果。
網(wǎng)站是多個網(wǎng)頁的集合，網(wǎng)頁是純文本格式的文件，瀏覽器就是將這些純文本格式的文件渲染成網(wǎng)頁。

HTML簡介

HTML是超文本標記語言（HyperText Markup Language），是一種用于創(chuàng)建網(wǎng)頁的標準標記語言，HTML由一個個標簽組成，文件的后綴名是html或htm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開就顯示文本，用瀏覽器打開就會渲染成網(wǎng)頁。

HTML基本結(jié)構(gòu)：

<!DOCTYPE html> 聲明為 HTML5 文檔
<html></html>是文檔的開始標記和結(jié)束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔
<head></head>元素出現(xiàn)在文檔的開頭部分
<title></title>定義網(wǎng)頁標題，在瀏覽器標題欄顯示<body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <title>黑貓編程</title>
</head>

<body>
    網(wǎng)頁顯示內(nèi)容
</body>
</html>

前端開發(fā)需要哪些技術(shù)？

首先是UI設計師使用Photoshop設計出前端效果圖片，前端工程師根據(jù)圖片轉(zhuǎn)化成前端代碼，主要需要HTML、CSS和JavaScript。
HTML是前端的框架，比如劃分頁面布局、設置段落。
CSS是裝飾前端框架，可以給頁面添加顏色、樣式等，使前端界面更加漂亮。
JavaScript是給前端添加動態(tài)效果，使網(wǎng)站具備交互功能。

前端開發(fā)編輯器

前端開發(fā)語言本質(zhì)上都是文本文件，只要后綴名符合標準，任何文本編輯器都可以用來寫前端代碼，在此推薦幾種編輯器:

IDE——集成開發(fā)環(huán)境：

WebStorm
PyCharm

輕量級文本編輯器：

Atom
Sublime
Notepad++
Vim和Emacs
VS Code

VS Code開發(fā)前端項目比較方便，推薦安裝插件：

Auto Rename Tag
Live Server

標簽分類

分類一：

閉合標簽——雙標簽 <標簽名屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標簽名>
自閉合標簽——單標簽 <標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

分類二：

塊級標簽：獨占一行，可自行設置寬高div
內(nèi)聯(lián)標簽：按內(nèi)容占位，高度和寬度由內(nèi)容填充span

<meta>標簽

所有瀏覽器都支持 <meta> 標簽：

<meta>提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞
<meta>提供的信息對用戶是不可見的
SEO三大標簽：titledescription：<meta name="description" content="專注編程課程研發(fā)，算法，信奧賽">keywords：<meta name="keywords" content="編程在線課程算法競賽">
網(wǎng)站logo：<link rel="shortcut icon" href="cat.ico" type="image/x-icon">

圖像標簽

<img>標簽可以在網(wǎng)頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：

src屬性，定義圖片的引用地址
alt屬性定義圖片加載失敗時顯示的文字
只設置圖片寬度或者高度，會進行等比縮放
<img src="xxx.png" alt="xxx" />

標題標簽

通過<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，標簽可以在網(wǎng)頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說： <h1>用作主標題，其后是<h2>，再其次是 <h3>，以此類推。搜索引擎會使用標題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

<h1>標題1</h1>
<h2>標題2</h2>

span和div

<div>定義文檔中的分區(qū)，當作容器使用
<span>劃分文字

思考：完成如下圖所示效果

為七個div分別設置寬為100px,150px,200px,250px,300px,350px,400px;
			                      高均為20px；
			                      背景顏色分別為紅橙黃綠青藍紫
                            
<div style="width:100px;height:20px;background-color:red"></div>
<div style="width:150px;height:20px;background-color:orange"></div>
<div style="width:200px;height:20px;background-color:yellow"></div>
<div style="width:250px;height:20px;background-color:green"></div>
<div style="width:300px;height:20px;background-color:cyan"></div>
<div style="width:350px;height:20px;background-color:blue"></div>
<div style="width:400px;height:20px;background-color:purple"></div>

<!--添加兩個div進行嵌套-->
<div style="width: 100px; height: 100px; background-color: pink">
  			<div style="width: 50px; height: 50px; background-color: yellow"></div>
</div>

CSS樣式

css：Cascading Style Sheet 層疊樣式表，它是用來美化頁面的一種語言。

沒有使用css的效果圖

使用css的效果圖

CSS引入三種方式

行內(nèi)式：是在標記的style屬性中設定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，使得代碼看起來整體格式混亂，不推薦使用。

<div style="background-color:black; color:red">hello world</div>

內(nèi)嵌式：是將CSS樣式集中寫在網(wǎng)頁的<head></head>標簽對的<style></style>標簽對中

<style>
        div {
            background-color:yellow;
            color:green;
        }
</style>

外鏈式：將css代碼寫在一個單獨的.css文件中，在<head>標簽中使用<link>標簽直接引入該文件到頁面中

<link rel="stylesheet" type="text/css" href="css/index.css"/>

在加載網(wǎng)頁時，首先找到html根文件，再加載引用的css外部樣式，速度會比較慢，因此，內(nèi)嵌式一般用于網(wǎng)站的首頁，有利于提高頁面加載速度，提高用戶體驗。

常用CSS選擇器

css 選擇器是用來選擇標簽的，選出來以后給標簽加樣式

標簽選擇器 p { color:green }
類選擇器

.a {
      font-weight:bold;
      color:yellow;
}

<p class="a">a1 class</p>
<p class="a">a2 class</p>
<p class="b">b2 class</p>
<p class="b">b2 class</p>

id選擇器

#info {
      font-size:24px;
      color:red;
}

<div>hello world</div>
<div id="info">My name is xuyanpeng.</div>

優(yōu)先級：id>class>標簽
結(jié)構(gòu)偽類選擇器

nth-child:
        nth-child(odd)
        nth-child(even)
        nth-child(3n+1)
        nth-child(3)
        nth-last-child(3)
        nth-child(-n+3)
        nth-child(n+5)
        last-child
        first-child

偽元素

::before

.father::before{
            display: block;
            content: '最前面';
            width: 100px;
            height:100px;
            background-color: brown;
}

::after

.father::after{
            display: block;
            content: '最后面';
            width: 100px;
            height:100px;
            background-color: yellow;
}

超鏈接

HTML使用標簽<a>來設置超文本鏈接
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分
當把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈?/span>
在標簽<a> 中使用了href屬性來描述鏈接的地址
默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線
訪問過的鏈接顯示為紫色并帶有下劃線
點擊鏈接時，鏈接顯示為紅色并帶有下劃線

偽類選擇器

a:link{
    text-decoration: none;
}

a:visited{
    color: red;
}

a:hover{
    color: orange;
}

a:active{
    color: green;
}

錨點定位

通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。創(chuàng)建錨點鏈接分為兩步：

文本標簽

注釋標簽：如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。

簡單解釋：注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。

文本屬性

font-size：文本大小
font-family：字體
        無襯線字體：sans-serif
        襯線字體：serif
        等寬字體：monospace
font-weight：字體粗細 100-900
        normal：400
        bold：700
font-style：字體風格 normal italic
pre：預格式化文本
color：文本顏色
text-align：文本水平對齊方式
line-height：行間距
text-indent:首行縮進

特殊字符

背景屬性

背景顏色：
        background-color：顏色值; 默認的值是 transparent 透明的
        background: rgba(0, 0, 0, 0.3); 最后一個參數(shù)為透明度
背景平鋪：pbackground-repeat : repeat | no-repeat | repeat-x | repeat-y
背景固定：pbackground-attachment : scroll | fixed
背景位置：
        background-position : x y：
        x和y：為長度值或top、left等方位詞
background-size：contain/cover

盒子模型

邊框盒子：
        自動內(nèi)減：box-sizing: border-box;
        默認：box-sizing: content-box;
margin合并：相鄰盒子邊距取較大值
margin塌陷：塊級元素嵌套，字盒子設置外邊距改變父盒子的位置

浮動應用，首頁布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{
            width: 700px;
            border: 1px solid gray;
            margin: 0 auto;
            background-color: lightyellow;
        }

        .header{
            text-align: center;
            background-color: skyblue;
            padding: 8px;
            color: white
        }

        .left{
            width: 160px;
            float: left;
            padding: 23px;
        }

        .content{
            padding: 16px;
            margin-left: 190px;
            border-left: 1px solid gray;
        }

        .footer{
            padding: 8px;
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>backcat1995.com</h1>
        </div>

        <div class="left">
            <p>黑貓編程教育品牌</p>
            <p>作者：黑貓</p>
        </div>

        <div class="content">
            <h2>課程大綱</h2>
            C++從入門到精通
            <br>
            玩轉(zhuǎn)數(shù)據(jù)結(jié)構(gòu)與算法
            <br>
            Python從小白到起飛
        </div>

        <div class="footer">
            地址：火星巖漿路1198弄
        </div>
    </div>
</body>
</html>

元素隱藏

overflow：

visible：默認值，溢出部分可見
hidden：溢出部分隱藏
scroll：無論是否溢出，都顯示滾動條
auto：根據(jù)是否溢出，自動顯示或隱藏滾動條

絕對單位和相對單位

1.絕對單位，當窗口大小發(fā)生改變，不能自適應窗口進行改變

<style>
    *{margin: 0; padding: 0;}
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>

<div class="box"></div>

2.相對單位

<style>
    *{margin: 0; padding: 0;}
    .box{
        width: 50%;
        height: 50%;
        background-color: red;
    }

    body, html{
        height: 100%;
    }

    .box2{
        width: 50%;
        height: 50%;
        background-color: green;
    }
</style>

<div class="box">
    <div class="box2">

    </div>
</div>

風箏效果

<style>
        *{margin: 0; padding: 0;}
        .box{
            width: 200px; height: 200px; background-color: red;
            position: absolute; left: 50%; top: 50%;
            margin-left: -100px; margin-top: -100px;
        }

        .box div{
            width: 50%; height: 50%; background-color: black;
            position: absolute; left: 100%; top: 100%;
        }

</style>

<div class="box">
        <div>
            <div>
                <div></div>
            </div>
        </div>
</div>

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

表單標簽

表單用于搜集不同類型的用戶輸入(用戶輸入的數(shù)據(jù))，然后可以把用戶數(shù)據(jù)提交到web服務器。

表單屬性設置：

action: 是設置表單數(shù)據(jù)提交地址
method: 是表單提交方式，提交方式有GET和POST
表單元素屬性設置
name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時參數(shù)名所對應的值

響應式布局Bootstrap

響應式最主要特點就是針對不同寬度設備進行布局和樣式設置，從而適配不同大小設備。

柵格系統(tǒng)：

顯示和隱藏：

在線咨詢

上一篇：學習網(wǎng)頁制作并不難，HTML菜鳥教程，從這里開始第一課學習
下一篇：HTML DOM Document 對象

您的項目需求

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

整合營銷服務商

CSS學習指南

web標準的構(gòu)成

HTML常用標簽

站開發(fā)簡介

HTML簡介

前端開發(fā)需要哪些技術(shù)？

前端開發(fā)編輯器

標簽分類

<meta>標簽

圖像標簽

標題標簽

span和div

CSS樣式

CSS引入三種方式

常用CSS選擇器

超鏈接

錨點定位

文本標簽

文本屬性

背景屬性

盒子模型

浮動應用，首頁布局

元素隱藏

絕對單位和相對單位

風箏效果

列表標簽

表格標簽

表單標簽

響應式布局Bootstrap

您的項目需求

浮動應用，首頁布局