国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端基礎(chǔ)-CSS是什么？

番茄西紅柿 / 3523人閱讀

閱讀目錄

  • 一、 什么是CSS
  • 二、 為何要用CSS
  • 三、 如何使用CSS

一、 什么是CSS

CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標(biāo)簽添加樣式的。

樣式指的是HTML標(biāo)簽的顯示效果，比如換行、寬高、顏色等等

層疊屬于CSS的三大特性之一，我們將在后續(xù)內(nèi)容中介紹

表指的是我們可以將樣式統(tǒng)一收集起來寫在一個(gè)地方或者一個(gè)CSS文件里

二、 為何要用CSS

在沒有CSS之前，我們想要修改HTML標(biāo)簽的樣式則需要為每個(gè)HTML標(biāo)簽多帶帶定義樣式屬性，如下

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">滄海月明珠有淚，藍(lán)田日暖玉生煙。font>
p>
<p align="center">
    <font color="pink" size="5">此情可待成追憶，只是當(dāng)時(shí)已惘然。font>
p>
body>
html>
HTML演示

這么做的缺點(diǎn)是

#1、記憶困難：需要記憶每個(gè)標(biāo)簽的所有樣式相關(guān)屬性，如果標(biāo)簽沒有某個(gè)樣式相關(guān)的屬性，那么設(shè)置了也沒有效果

#2、代碼耦合度高：HTML語義與樣式耦合到一起

#3、擴(kuò)展性差：當(dāng)某一類樣式需要修改時(shí)，我們需要找到所有設(shè)置了該樣式標(biāo)簽進(jìn)行修改

于是CSS應(yīng)運(yùn)而生，很好地解決了以上三個(gè)問題

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>滄海月明珠有淚，藍(lán)田日暖玉生煙。p>
<p>此情可待成追憶，只是當(dāng)時(shí)已惘然。p>
body>
html>
用CSS來實(shí)現(xiàn)

三、 如何使用CSS

1、如何使用CSS之CSS的語法

CSS語法可以分為兩部分：
#1、選擇器
#2、聲明
聲明由屬性和值組成，多個(gè)聲明之間用分號分隔，如下圖

 

2、如何使用CSS之CSS的四種引入方式

#1、行內(nèi)式

Egon是一個(gè)非常了不起的人


#2、嵌入式

    


#3、外部樣式表之導(dǎo)入式

    


#4、外部樣式表之鏈接式（企業(yè)開發(fā)中使用這種方式）

    

#1、行內(nèi)式
行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，不推薦使用。

"color: red;font-size: 50px;text-align: center">Egon是一個(gè)非常了不起的人


#2、嵌入式
嵌入式是將CSS樣式集中寫在網(wǎng)頁標(biāo)簽內(nèi)的的標(biāo)簽對中。格式如下：



    "utf-8">
    




Egon是一個(gè)非常了不起的人






#新建外部樣式表，然后使用導(dǎo)入式和鏈接式引入
首先在與html文件同級目錄下有一個(gè)css文件夾，該文件夾下新建一個(gè)外部樣式表mystyle.css,內(nèi)容為
p {
    color: red;
    font-size: 50px;
    text-align: center
}

#3、導(dǎo)入式



    "utf-8">
    




Egon是一個(gè)非常了不起的人





#4、鏈接式（推薦使用） 



    "utf-8">
    "stylesheet" href="css/mystyle.css">




Egon是一個(gè)非常了不起的人






#導(dǎo)入式與鏈接式的區(qū)別:
1、標(biāo)簽屬于XHTML,@import是屬于CSS2.1特有的，對于不兼容CSS2.1的瀏覽器來說就是無效的
2、導(dǎo)入式的缺點(diǎn)：
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問題，如果網(wǎng)頁比較大則會(huì)兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。這是導(dǎo)入式固有的一個(gè)缺陷，用戶體驗(yàn)差。
3、鏈接式的優(yōu)點(diǎn)：
使用鏈接式時(shí)與導(dǎo)入式不同的是它會(huì)在網(wǎng)頁文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的，它不會(huì)象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示有樣式的網(wǎng)頁，這是鏈接式的優(yōu)點(diǎn)。


#?。。∽⒁恻c(diǎn)！??！
1、style標(biāo)簽必須放到head內(nèi) ,type="text/css"代表文本類型的css
2、type屬性其實(shí)可以不用寫，默認(rèn)就是type="text/css"
3、設(shè)置樣式時(shí)必須按照固定的格式來設(shè)置，key:value;
    其中;不能省略，最后一個(gè)屬性其實(shí)可以省略，但我們可以簡單地統(tǒng)一記成不 
    能省略就行了
四種方式的詳細(xì)演示

 

 

3、css注釋

/*中間放注釋的內(nèi)容*/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2222.html

相關(guān)文章

  • 程序員到底要學(xué)什么？

    摘要：程序員到底要學(xué)什么程序員到底要學(xué)什么或者說，程序員到底要學(xué)多少東西呢這個(gè)問題問到你了嗎今天就來簡單聊一聊程序員的學(xué)習(xí)之路。程序員的種類很多，這里只講前端工程師和后端工程師，因?yàn)樽约阂簿徒佑|到這兩個(gè)層面。 ...

    mo0n1andin 評論0 收藏0

  • 26自學(xué)轉(zhuǎn)行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏2637

  • 26自學(xué)轉(zhuǎn)行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏2577

  • 26自學(xué)轉(zhuǎn)行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉(zhuǎn)行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面這里前后端指的是開發(fā)的前后端。 轉(zhuǎn)行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經(jīng)驗(yàn)和總結(jié)，無可厚非，但是決定了就一定要堅(jiān)定的走下去，謹(jǐn)慎是為了更好的堅(jiān)持，而不是放棄的理由。寫在前面：這里前后端指的是web開發(fā)的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏0

  • 百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

    摘要：經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。 經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好 先說一下，我個(gè)人理解的前端布局的思想吧。 在前端布局的時(shí)候， 先不要設(shè)計(jì)太多什么margin,paddin...

    CoyPan 評論0 收藏0

  • 百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

    摘要：經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。 經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好 先說一下，我個(gè)人理解的前端布局的思想吧。 在前端布局的時(shí)候， 先不要設(shè)計(jì)太多什么margin,paddin...

    YacaToy 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<