資訊專欄INFORMATION COLUMN
閱讀目錄
CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標簽添加樣式的。
樣式指的是HTML標簽的顯示效果，比如換行、寬高、顏色等等
層疊屬于CSS的三大特性之一，我們將在后續(xù)內(nèi)容中介紹
表指的是我們可以將樣式統(tǒng)一收集起來寫在一個地方或者一個CSS文件里
在沒有CSS之前，我們想要修改HTML標簽的樣式則需要為每個HTML標簽多帶帶定義樣式屬性，如下
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
head>
<body>
<h1 align="center">
<font color="pink" size="5">天凈沙·秋思font>
h1>
<p align="center">
<font color="pink" size="5">錦瑟無端五十弦，一弦一柱思華年。font>
p>
<p align="center">
<font color="pink" size="5">莊生曉夢迷蝴蝶，望帝春心托杜鵑。font>
p>
<p align="center">
<font color="pink" size="5">滄海月明珠有淚，藍田日暖玉生煙。font>
p>
<p align="center">
<font color="pink" size="5">此情可待成追憶，只是當時已惘然。font>
p>
body>
html>
HTML演示
這么做的缺點是
#1、記憶困難：需要記憶每個標簽的所有樣式相關屬性，如果標簽沒有某個樣式相關的屬性，那么設置了也沒有效果 #2、代碼耦合度高：HTML語義與樣式耦合到一起 #3、擴展性差：當某一類樣式需要修改時，我們需要找到所有設置了該樣式標簽進行修改
于是CSS應運而生，很好地解決了以上三個問題
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,p {
color: pink;
font-size: 24px;
text-align: center;
}
style>
head>
<body>
<h1>天凈沙·秋思h1>
<p>錦瑟無端五十弦，一弦一柱思華年。p>
<p>莊生曉夢迷蝴蝶，望帝春心托杜鵑。p>
<p>滄海月明珠有淚，藍田日暖玉生煙。p>
<p>此情可待成追憶，只是當時已惘然。p>
body>
html>
用CSS來實現(xiàn)
1、如何使用CSS之CSS的語法
CSS語法可以分為兩部分： #1、選擇器 #2、聲明 聲明由屬性和值組成，多個聲明之間用分號分隔，如下圖
2、如何使用CSS之CSS的四種引入方式
#1、行內(nèi)式Egon是一個非常了不起的人
#2、嵌入式 #3、外部樣式表之導入式 #4、外部樣式表之鏈接式（企業(yè)開發(fā)中使用這種方式）
#1、行內(nèi)式 行內(nèi)式是在標簽的style屬性中設定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，不推薦使用。四種方式的詳細演示"color: red;font-size: 50px;text-align: center">Egon是一個非常了不起的人
#2、嵌入式 嵌入式是將CSS樣式集中寫在網(wǎng)頁標簽內(nèi)的的標簽對中。格式如下： "utf-8">Egon是一個非常了不起的人
#新建外部樣式表，然后使用導入式和鏈接式引入 首先在與html文件同級目錄下有一個css文件夾，該文件夾下新建一個外部樣式表mystyle.css,內(nèi)容為 p { color: red; font-size: 50px; text-align: center } #3、導入式 "utf-8">Egon是一個非常了不起的人
#4、鏈接式（推薦使用） "utf-8"> "stylesheet" href="css/mystyle.css">Egon是一個非常了不起的人
#導入式與鏈接式的區(qū)別: 1、標簽屬于XHTML,@import是屬于CSS2.1特有的，對于不兼容CSS2.1的瀏覽器來說就是無效的 2、導入式的缺點： 導入式會在整個網(wǎng)頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網(wǎng)頁比較大則會兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。這是導入式固有的一個缺陷，用戶體驗差。 3、鏈接式的優(yōu)點： 使用鏈接式時與導入式不同的是它會在網(wǎng)頁文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示有樣式的網(wǎng)頁，這是鏈接式的優(yōu)點。 #！！！注意點！！！ 1、style標簽必須放到head內(nèi) ,type="text/css"代表文本類型的css 2、type屬性其實可以不用寫，默認就是type="text/css" 3、設置樣式時必須按照固定的格式來設置，key:value; 其中;不能省略，最后一個屬性其實可以省略，但我們可以簡單地統(tǒng)一記成不 能省略就行了
3、css注釋
/*中間放注釋的內(nèi)容*/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2222.html
摘要：程序員到底要學什么程序員到底要學什么或者說，程序員到底要學多少東西呢這個問題問到你了嗎今天就來簡單聊一聊程序員的學習之路。程序員的種類很多，這里只講前端工程師和后端工程師，因為自己也就接觸到這兩個層面。 ...
摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗和總結(jié)，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗和總結(jié)，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗和總結(jié)，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗和總結(jié)，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗和總結(jié)，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗和總結(jié)，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...
摘要：經(jīng)過了百度前端技術(shù)學院任務三和四五，在這里總結(jié)一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好先說一下，我個人理解的前端布局的思想吧。 經(jīng)過了百度前端技術(shù)學院任務三和四五，在這里總結(jié)一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好 先說一下，我個人理解的前端布局的思想吧。 在前端布局的時候， 先不要設計太多什么margin,paddin...
摘要：經(jīng)過了百度前端技術(shù)學院任務三和四五，在這里總結(jié)一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好先說一下，我個人理解的前端布局的思想吧。 經(jīng)過了百度前端技術(shù)學院任務三和四五，在這里總結(jié)一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好 先說一下，我個人理解的前端布局的思想吧。 在前端布局的時候， 先不要設計太多什么margin,paddin...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3882·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
