資訊專欄INFORMATION COLUMN
摘要：那么這些樣式每一個代表什么作用呢接下來我們才正式進入的講解為什么要學習樣式使用樣式可以幫助我們調整美觀標簽，以及如何對進行布局什么是樣式是指層疊樣式表，樣式定義如何顯示元素，樣式通常又會存在于樣式表中。
在前面大概的介紹了css，從本片博文開始，會詳細的介紹它，在最開始介紹web前端時，打開百度首頁，當時我提出了一個問題，為什么百度首頁的輸入框可以放在正中間，就是由于有css的控制，我們可以打開瀏覽器的調試界面查看這個輸入框的css樣式：
圖中我圈出來的左邊html代碼的就是html屬性的鍵值對，然后圈出的右邊位置就是css樣式，然后右邊那個窗口你還可以所謂的線上編輯，在最后點擊一下，就可以編輯：
這個此時就暫且不提了，以后學到的時候再添加，然后那些已經有的也可以去掉，把選項框里的“√”去掉（即再點一下就可以去掉）
但是你發(fā)現，好像百度的輸入框沒有什么變化對吧？
你去輸入文字試試呢？
是的，你發(fā)現輸入框變小了，然后輸入框外層還包含有一個大的框，這樣的話，我們確實改動了百度首頁的輸入框對吧？
好的，我們很簡單的體驗了一把修改css樣式。那么這些css樣式每一個代表什么作用呢？
接下來我們才正式進入css的講解
使用css樣式可以幫助我們調整美觀html標簽，以及如何對html進行布局
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式通常又會存在于樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件里
CSS的出現解決了下面兩個問題：
- 將HTML頁面的內容與樣式分離。
- 提高web開發(fā)的工作效率。
- 內容與表現分離
- 網頁的表現統一，容易修改
- 豐富的樣式，使頁面布局更加靈活
- 減少網頁的代碼量，增加網頁瀏覽器速度，節(jié)省網絡帶寬
- .運用獨立頁面的css,有利于網頁被搜索引擎收錄
CSS語法可以分為兩部分：
- 選擇器
- 聲明
語法：
html元素（有的又叫選擇器） {
css語句：值；
css語句：值；
……
}
注釋：
/* …… */
例：
[object Object]
以上的兩個，font-size表示字體大小，值16px表示16像素，px即表示像素單位，還有em，rpx作為單位，這個后期會用到；color表示顏色，值red表示紅色
打開瀏覽器查看測試：
說到這，就要說下css樣式添加的方式了：
css添加方式：
- 內聯樣式
- 行內樣式表
- 外部樣式表
- 鏈接式
- 導入式
像上面那個例子，在html文件里的head標簽下添加style，并把css寫進style標簽里就是內斂式：
寫在html標簽元素里：
創(chuàng)建一個style.css樣式(名字隨意，導入時必須寫同名的文件)，并把樣式寫進此文件
在html標簽里的head標簽里引入link標簽（注意語法），href屬性寫上css樣式文件所在路徑加文件名
這樣就是一個外聯樣式的外鏈式
這種引入方式只是做一個了解，很少用到
同樣的創(chuàng)建一個css樣式文件，這里內容和前面的一樣就不貼圖了
在html文件里的head添加style標簽，然后使用語法 @import url(); 導入
標簽屬于XHTML,@import是屬性css2.1
使用鏈接的css文件先加載到網頁當中，再進行編譯顯示
使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中
@import是屬于CSS2.1特有的，對于不兼容CSS2.1的瀏覽器來說就是無效的
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/1552.html
摘要：前端之前端之前言前言昨天學習了標記式語言，也就是無邏輯語言。今天學習，被稱之為網頁的化妝師。為前端頁面的樣式，由選擇器作用域與樣式塊組成。年初，組織負責的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了年月出版的規(guī)范第二版。前端之 CSS 前言 昨天學習了標記式語言，也就是無邏輯語言。了解了網頁的骨架是什么構成的，了解了常用標簽，兩個指令以及轉義字符；其中標簽可以分為兩大類： 一類...
摘要：寫在前面月到這天，前端提升營，騰訊大佬們分享個人經驗，使出各種前端方面的大招。并且減輕服務器的負擔，的原則是按需取數據，可以最大程度的減少冗余請求和響應對服務器造成的負擔?？刂票韱慰丶慕脿顟B(tài)。 寫在前面 5月24到30這7天，IMWeb前端提升營，騰訊大佬們分享個人經驗，使出各種前端方面的大招。從中學習了很多前端方面的知識，也get到了前端學習的方法論，還有一些算法知識等等。 現將...
摘要：聲明聲明本篇內容摘抄自以下兩個來源中文網感謝大佬們的分享。版本是全球最受歡迎的前端組件庫，用于開發(fā)響應式布局移動設備優(yōu)先的項目。官方示例官方示例版本，官方還沒有中文教程，的中文教程倒是很齊全了。聲明 本篇內容摘抄自以下兩個來源： BootStrap中文網 感謝大佬們的分享。 正文-響應式布局（BootStrap） 這次想來講講一個前端開發(fā)框架：BootStrap BootStrap 目前...
閱讀 847·2023-04-25 19:43
閱讀 4115·2021-11-30 14:52
閱讀 3930·2021-11-30 14:52
閱讀 4027·2021-11-29 11:00
閱讀 3921·2021-11-29 11:00
閱讀 4039·2021-11-29 11:00
閱讀 3768·2021-11-29 11:00
閱讀 6606·2021-11-29 11:00
