前端html css

時間 2019-11-09

標籤前端 html css 欄目 HTML 简体版

原文原文鏈接

編輯器

pycharm|sublime|Hbuild|webstrom|atomjavascript

前端

前端概念css

廣義:用戶能看見而且交互的展現界面html

狹義:運行在瀏覽器上的頁面前端

html5 =>(h5架構+css3佈局+javascript邏輯)html5

網頁編寫|移動端應用編寫|(客戶端編寫)java

先後臺分離css3

腳本就是源代碼的基礎上加上功能.就是在源代碼中嵌入一段代碼程序塊web

HTML:標記語言

不具有程序邏輯瀏覽器

使用目的:完成頁面結構的構建架構

三大組成:

標籤:被尖括號包裹

指令:

轉義字符:

註釋:瀏覽器會將全部的空白符(空格,製表符,回車)都解析爲一個空格

若是要換行br標籤添加<br>

統一編碼:<meta charset="utf-8">

style="color:#092ff25"

html的註釋符號

語義給瀏覽器看的

css:樣式層級表

學習css目的:完成頁面佈局(還原設計稿)

三大組成部分

選擇器:由標籤.類.id單獨或者組合出現

做用域:一組大括號包含的區域

樣式塊:知足css鏈接語法的衆多樣式

選擇器:

用來將css與html創建關聯的橋樑.

將原來出如今標籤內部的樣式分離開來,能夠用一個個選擇器加以管理,達到頁面也樣式的解耦合目的,從而提升代碼的複用性與開發效率

css三種引入方式

1.行間式

2.內聯式

3.外聯式

注:選擇器的應用場景在內聯式和外聯式

總結:

開發: 最經常使用的是外聯式, 內聯與行間輔助樣式佈局

測試: 內聯式, 可讀性最強, 且解耦有複用性

行間的應用場景: 最簡單粗暴, js操做的樣式都是行間式

<style>        /* css註釋:書寫在style標籤內部的要採用css語法 */        /*        p:選擇器        {}:做用域        寬高背景顏色:樣式塊        */        p{            width:200px;            height: 200px;            background-color: purple;        }        h2{            width:100px;            height: 100px;            background-color: aqua;        }    </style></head><body>    <!--1.行間式-->    <!--        1.寫在標籤的style屬性中,(style標籤通常出如今head中)        2.屬性與屬性之間用;隔開        3屬性與屬性值之間用:賦值    -->    <div style="width:150px;height:150px;background-color: magenta"></div>    <div style="width:150px;height:150px;background-color: magenta"></div>    <!--2.內聯式-->    <!--        1.寫在style標籤中        2.用選擇器與html創建鏈接        3.樣式塊書寫在做用域內    -->    <p></p>    <h2></h2>    <!--3.外聯式-->    <!--        1.css樣式徹底與html文件脫離,造成單獨的.css文件.樣式寫在.css文件中        2.用選擇器與html創建鏈接        3.樣式塊寫在做用域裏面        4.將.css文件與.html文件創建關聯    -->    <h3></h3>    <!--注:用link標籤將css文件與html文件創建鏈接    <link rel="stylesheet" href="css文件的相對路徑"    -->    <link rel="stylesheet" href="css/h3樣式.css"></body></html>