Web-3-CSS基礎(chǔ)入門：從零開(kāi)始打造網(wǎng)頁(yè)樣式

.CSS介紹

HTML學(xué)習(xí)完以后，以及可以使用HTML開(kāi)發(fā)網(wǎng)頁(yè)了，但是在呈現(xiàn)的效果上沒(méi)有那么美觀，所以接下來(lái)我們要學(xué)習(xí)CSS,CSS就是可以讓我們頁(yè)面變得更加美觀，接下來(lái)我們開(kāi)始學(xué)習(xí)CSS
第一步：在IDEA中創(chuàng)建名為08_CSS-介紹.html的文件：

第二步:編寫如下代碼，需要注意的是style標(biāo)簽中書寫的是css樣式，我們先照著寫即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介紹</title>
<style>
h1{
background-color:yellow;
color: red;
}
</style>
</head>
<body>
<h1>
Hello CSS
</h1>
</body>
</html>

第三步：瀏覽器打開(kāi)頁(yè)面，效果如下：

很明顯，如果沒(méi)有css，我們只會(huì)呈現(xiàn)黑色的效果，而我們加入了css，此處呈現(xiàn)紅色大號(hào)字體，讓我們的網(wǎng)頁(yè)變得更加的美觀的(ps:此處我們審美問(wèn)題，修飾的并不美麗)。所以css可以美化我們的頁(yè)面。

2.CSS概念和作用 2.1CSS格式規(guī)范HTML,元素名稱在規(guī)則集開(kāi)始位置

格式 說(shuō)明 大括號(hào) 開(kāi)頭和結(jié)尾，所有的樣式放在里面 樣式名 左邊是樣式名，樣式名和樣式值是固定的，中間使用冒號(hào)分隔 樣式值 右邊是樣式值 樣式結(jié)尾 每個(gè)樣式以分號(hào)結(jié)尾

2.2CSS介紹

2.2.1CSS概念

層疊樣式表，用于控制頁(yè)面的樣式（表現(xiàn)）。

2.2.2 CSS作用

美化網(wǎng)頁(yè)

CSS格式規(guī)范

選擇器:位于規(guī)則集開(kāi)始位置，用于選擇HTML元素
屬性：改變HTML元素樣式
屬性值: 在屬性右邊，冒號(hào)后面
存放位置：<head>標(biāo)簽中創(chuàng)建<style>標(biāo)簽

3.CSS三種引入方式

我們知道了css可以美化html的頁(yè)面，那么我們?cè)撊绾卧賖tml中書寫css呢？接下來(lái)我們需要學(xué)習(xí)html中書寫css的方式，具體有3種，語(yǔ)法如下表格所示：

名稱 語(yǔ)法描述 內(nèi)聯(lián)樣式在標(biāo)簽內(nèi)使用style屬性，屬性值是css屬性鍵值對(duì) 內(nèi)部樣式定義<style>標(biāo)簽，在標(biāo)簽內(nèi)部定義css樣式外部樣式定義<link>標(biāo)簽，通過(guò)href屬性引入外部css文件

對(duì)于上述3種引入方式，企業(yè)開(kāi)發(fā)的使用情況如下：

內(nèi)聯(lián)樣式會(huì)出現(xiàn)大量的代碼冗余，不方便后期的維護(hù)，所以不常用。
內(nèi)部樣式，通過(guò)定義css選擇器，讓樣式作用于指定的標(biāo)簽上
外部樣式，html和css實(shí)現(xiàn)了完全的分離，企業(yè)開(kāi)發(fā)常用方式。

接下來(lái)，我們通過(guò)IDEA編寫代碼，來(lái)演示css的引入方式
第一步：我們IDEA中創(chuàng)建名為09_CSS-引入方式.html的文件：

第二步：我們首先演示內(nèi)聯(lián)樣式，按照內(nèi)聯(lián)樣式的語(yǔ)法，我們編寫如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
</head>
<body>


<p style="color: red;font-size: 40px">CSS內(nèi)聯(lián)樣式</p>
</body>
</html>

第三步：我們通過(guò)瀏覽器打開(kāi)觀察效果如下：

第四步：我們接下來(lái)注釋掉內(nèi)聯(lián)樣式，按照內(nèi)部樣式的語(yǔ)法演示內(nèi)部樣式，修改代碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <!--    2.內(nèi)部樣式-->
    <style>
      p{
        color: yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>


    <!--    1.內(nèi)聯(lián)樣式-->
    <!--      <p style="color: red;font-size: 40px">CSS內(nèi)聯(lián)樣式</p>-->

    <!--2.內(nèi)部樣式-->
    <p>CSS內(nèi)部樣式1</p>
    <p>CSS內(nèi)部樣式2</p>
  </body>
</html>

新增內(nèi)容：

<!--    2.內(nèi)部樣式-->
<style>
  p{
    color: yellow;
    font-size: 50px;
  }
</style>

第五步：打開(kāi)瀏覽器觀察效果如下：

第七步：在resources目錄下創(chuàng)建demo.css文件中編寫如下的css代碼：

p{
color: blue;
font-size: 60px;
}

第八步：我們注釋掉內(nèi)部樣式，新增標(biāo)簽來(lái)引入外部css文件，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <!--    2.內(nèi)部樣式-->
    <!--    <style>
    p{
    color: yellow;
    font-size: 50px;
    }
  </style>-->
    <link rel="stylesheet" href="demo.css">
  </head>
  <body>


    <!--    1.內(nèi)聯(lián)樣式-->
    <!--      <p style="color: red;font-size: 40px">CSS內(nèi)聯(lián)樣式</p>-->

    <!--2.內(nèi)部樣式
    <p>CSS內(nèi)部樣式1</p>
    <p>CSS內(nèi)部樣式2</p>-->

    <!--3.外部樣式-->
    <p>CSS內(nèi)部樣式1</p>
    <p>CSS內(nèi)部樣式2</p>
  </body>
</html>

新增內(nèi)容：

    <link rel="stylesheet" href="demo.css">

第九步：打開(kāi)瀏覽器觀察效果如圖所示：

4.CSS選擇器

上一小節(jié)我們學(xué)習(xí)了css的引入方式，其中內(nèi)聯(lián)樣式和外部樣式都書寫了css選擇器，那么本小節(jié)主要來(lái)講解css的選擇器，包括css選擇器中的屬性。顧名思義：選擇器是選取需設(shè)置樣式的元素（標(biāo)簽），但是我們根據(jù)業(yè)務(wù)場(chǎng)景不同，選擇的標(biāo)簽的需求也是多種多樣的，所以選擇器有很多種，我們只學(xué)習(xí)最基本的3種
選擇器通用語(yǔ)法如下：

選擇器名   {
css樣式名：css樣式值;
css樣式名：css樣式值;
}

我們需要學(xué)習(xí)的3種選擇器是元素選擇器，id選擇器，class選擇器，語(yǔ)法以及作用如下：

4.1元素選擇器

格式：

選擇器的名字必須是標(biāo)簽的名字
作用：選擇器中的樣式會(huì)作用于所有同名的標(biāo)簽上

元素名稱 {
    css樣式名:css樣式值；
}

例子如下：


      p{
        color: #00FF00;
        font-size: 30px;
      }

4.2.id選擇器:

選擇器的名字前面需要加上#
作用：選擇器中的樣式會(huì)作用于指定id的標(biāo)簽上，而且有且只有一個(gè)標(biāo)簽

#id屬性值 {
    css樣式名:css樣式值；
}

例子如下：

#{
    color: blue;
}

4.3類選擇器

選擇器的名字前面需要加上.
作用：選擇器中的樣式會(huì)作用于所有class的屬性值和該名字一樣的標(biāo)簽上，可以是多個(gè)

.class屬性值 {
    css樣式名:css樣式值；
}

例子如下:

.cls{
     color: aqua;
 }

接下來(lái)我們需要通過(guò)代碼來(lái)演示3種選擇器的作用：
第一步：在IDEA中創(chuàng)建名為10_CSS-選擇器.html的文件：

第二步：遵循上述的3種選擇器語(yǔ)法，編寫如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器</title>

<style>
p{
color: #00FF00;
font-size: 30px;
}
#pp{
color: blue;
}

.cls{
color: aqua;
}
</style>
</head>
<body>

<p>CSS元素選擇器</p>



<p id="pp">CSS id選擇器</p>

<p class="cls">CSS類選擇器</p>

</body>
</html>

第三步：打開(kāi)瀏覽器，觀察效果如下圖所示：

疊樣式表(Cascading Style Sheets，CSS)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言，CSS備受前端開(kāi)發(fā)者的青睞。本文對(duì)基本的CSS元素的基本屬性進(jìn)行介紹。

圖片源于網(wǎng)絡(luò)

CSS的基礎(chǔ)元素包括style，本文主要對(duì)style中font-size(設(shè)置字體大小）和color設(shè)置文本顏色兩種屬性設(shè)置這兩種屬性主要包括三種方式：

第一種：對(duì)對(duì)象進(jìn)行內(nèi)嵌樣式，代碼如下：

<body>
<a style="font-size:定義對(duì)象大小;color=定義對(duì)象顏色">對(duì)象</a>   
</body>

第二種：對(duì)整個(gè)文本嵌入樣式，代碼如下：

<head>
<style type="text/css">
a｛
     font-size:定義字體大小;
     color:定義字體顏色
         ｝
</style>
</head>   //對(duì)整個(gè)文本進(jìn)行嵌入樣式

第三種：嵌入外部樣式表

可以單獨(dú)創(chuàng)建一個(gè)外部樣式表（.CSS）文件，CSS文件中的定義方法與第二種類似，然后在HTML中引入該文件，代碼示例如下：

<head>
<link rel="stylesheet"  type="text/css" herf="CSS文件名">
 </head>

三種方式中，后兩種會(huì)經(jīng)常用到，因?yàn)榈谝环N在一個(gè)HTML中無(wú)法實(shí)現(xiàn)同時(shí)對(duì)兩個(gè)對(duì)象進(jìn)行樣式設(shè)置，而后兩種可以對(duì)多個(gè)對(duì)象進(jìn)行樣式設(shè)計(jì)。

另外，當(dāng)三種在HTML同時(shí)層疊出現(xiàn)時(shí)，三種方式的優(yōu)先級(jí)：第一種>第二種>第三種。

家都知道在JavaScript原生操作中獲取元素的樣式，在實(shí)際操作是使用時(shí)比較頻繁的一件事，這里像大家介紹下獲取css樣式的方法，希望可以幫助一些需要的人，如果有幸被大牛看到，有更好的辦法，歡迎提出！！！

一、行內(nèi)元素樣式獲取：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js獲取外部樣式</title>
</head>
<body>
 <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
 //獲取行間樣式
 var div=document.getElementById('div');
 var width=div.style.width;
 alert(width);//200px
</script>
</html>

前端全棧學(xué)習(xí)交流圈：866109386,面向1-3經(jīng)驗(yàn)?zāi)昵岸碎_(kāi)發(fā)人員,幫助突破技術(shù)瓶頸，提升思維能力

在JS代碼中，alert會(huì)彈出div元素的width為200px；達(dá)到了要獲取元素寬度的目的，但是這種簡(jiǎn)單的方法只適用于獲取元素的行內(nèi)元素樣式，并不能獲取內(nèi)部樣式和外部樣式，在項(xiàng)目中，寫入行內(nèi)元素這種方案并不被大家認(rèn)同，所以這種方法，只是讓大家了解下。

二、非行間樣式元素獲取：

如果元素樣式并非行間樣式，利用上面這種方法并不能獲取到元素的樣式，需要使用另一種方法：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js獲取內(nèi)部部樣式</title>
 <style>
 #div{
 width: 200px;
 height: 200px;
 border:3px solid cyan;
 }
 </style>
</head>
<body>
 <div id="div""></div>
</body>
<script>
 var div=document.getElementById('div');
 //獲取div的width
 var width=window.getComputedStyle(div,null).width;
 alert(width);//200px
 //修改div的width
 div.style.cssText='width:300px;'
</script>
</html>

前端全棧學(xué)習(xí)交流圈：866109386,面向1-3經(jīng)驗(yàn)?zāi)昵岸碎_(kāi)發(fā)人員,幫助突破技術(shù)瓶頸，提升思維能力

在上面代碼中，使用了window.getComputedStyle('元素',null).'樣式',此方法兼容性:火狐谷歌 IE9 獲取的為計(jì)算后的樣式,但是這里需要注意的是用此方法獲取的值為只讀模式,并不能修改,所以用了style.cssText方式修改了其屬性,這里需要注意下書寫方式.

三、兼容性:

前段潛規(guī)則,凡是好的東西都不能通用,是的,你猜對(duì)了,任性的IE并不能使用以上方法,但是IE有自己的方法為currentStyle,用法一樣,就不再贅述了,下面直接寫出已經(jīng)處理兼容的代碼如下:

var div=document.getElementById('div');
if (div.currentStyle) {
 console.log(div.currentStyle.width);
}else{
　　console.log(getComputedStyle(div,null).width);
}

方法封裝:

 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }else{
 return getComputedStyle(obj,false)[name];
 }
}

對(duì)前端的技術(shù)，架構(gòu)技術(shù)感興趣的同學(xué)關(guān)注我的頭條號(hào)，并在后臺(tái)私信發(fā)送關(guān)鍵字：“前端”即可獲取免費(fèi)的架構(gòu)師學(xué)習(xí)資料

知識(shí)體系已整理好，歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我，可以獲得沒(méi)有的架構(gòu)經(jīng)驗(yàn)哦！！

在線咨詢

上一篇：像許昕、劉子歌一樣逐夢(mèng)吧，這所體育運(yùn)動(dòng)學(xué)校招生啦！
下一篇：JS模塊化 - 淺談 CommonJS requir

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商