Web-3-CSS基礎入門：從零開始打造網頁樣式

.CSS介紹

HTML學習完以后，以及可以使用HTML開發網頁了，但是在呈現的效果上沒有那么美觀，所以接下來我們要學習CSS,CSS就是可以讓我們頁面變得更加美觀，接下來我們開始學習CSS
第一步：在IDEA中創建名為08_CSS-介紹.html的文件：

第二步:編寫如下代碼，需要注意的是style標簽中書寫的是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>

第三步：瀏覽器打開頁面，效果如下：

很明顯，如果沒有css，我們只會呈現黑色的效果，而我們加入了css，此處呈現紅色大號字體，讓我們的網頁變得更加的美觀的(ps:此處我們審美問題，修飾的并不美麗)。所以css可以美化我們的頁面。

2.CSS概念和作用 2.1CSS格式規范HTML,元素名稱在規則集開始位置

格式說明 大括號 開頭和結尾，所有的樣式放在里面 樣式名 左邊是樣式名，樣式名和樣式值是固定的，中間使用冒號分隔 樣式值 右邊是樣式值 樣式結尾 每個樣式以分號結尾

2.2CSS介紹

2.2.1CSS概念

層疊樣式表，用于控制頁面的樣式（表現）。

2.2.2 CSS作用

美化網頁

CSS格式規范

選擇器:位于規則集開始位置，用于選擇HTML元素
屬性：改變HTML元素樣式
屬性值: 在屬性右邊，冒號后面
存放位置：<head>標簽中創建<style>標簽

3.CSS三種引入方式

我們知道了css可以美化html的頁面，那么我們該如何再html中書寫css呢？接下來我們需要學習html中書寫css的方式，具體有3種，語法如下表格所示：

名稱 語法描述 內聯樣式在標簽內使用style屬性，屬性值是css屬性鍵值對內部樣式定義<style>標簽，在標簽內部定義css樣式外部樣式定義<link>標簽，通過href屬性引入外部css文件

對于上述3種引入方式，企業開發的使用情況如下：

內聯樣式會出現大量的代碼冗余，不方便后期的維護，所以不常用。
內部樣式，通過定義css選擇器，讓樣式作用于指定的標簽上
外部樣式，html和css實現了完全的分離，企業開發常用方式。

接下來，我們通過IDEA編寫代碼，來演示css的引入方式
第一步：我們IDEA中創建名為09_CSS-引入方式.html的文件：

第二步：我們首先演示內聯樣式，按照內聯樣式的語法，我們編寫如下代碼：

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


<p style="color: red;font-size: 40px">CSS內聯樣式</p>
</body>
</html>

第三步：我們通過瀏覽器打開觀察效果如下：

第四步：我們接下來注釋掉內聯樣式，按照內部樣式的語法演示內部樣式，修改代碼如下：

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


    <!--    1.內聯樣式-->
    <!--      <p style="color: red;font-size: 40px">CSS內聯樣式</p>-->

    <!--2.內部樣式-->
    <p>CSS內部樣式1</p>
    <p>CSS內部樣式2</p>
  </body>
</html>

新增內容：

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

第五步：打開瀏覽器觀察效果如下：

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

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

第八步：我們注釋掉內部樣式，新增標簽來引入外部css文件，完整代碼如下：

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


    <!--    1.內聯樣式-->
    <!--      <p style="color: red;font-size: 40px">CSS內聯樣式</p>-->

    <!--2.內部樣式
    <p>CSS內部樣式1</p>
    <p>CSS內部樣式2</p>-->

    <!--3.外部樣式-->
    <p>CSS內部樣式1</p>
    <p>CSS內部樣式2</p>
  </body>
</html>

新增內容：

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

第九步：打開瀏覽器觀察效果如圖所示：

4.CSS選擇器

上一小節我們學習了css的引入方式，其中內聯樣式和外部樣式都書寫了css選擇器，那么本小節主要來講解css的選擇器，包括css選擇器中的屬性。顧名思義：選擇器是選取需設置樣式的元素（標簽），但是我們根據業務場景不同，選擇的標簽的需求也是多種多樣的，所以選擇器有很多種，我們只學習最基本的3種
選擇器通用語法如下：

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

我們需要學習的3種選擇器是元素選擇器，id選擇器，class選擇器，語法以及作用如下：

4.1元素選擇器

格式：

選擇器的名字必須是標簽的名字
作用：選擇器中的樣式會作用于所有同名的標簽上

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

例子如下：


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

4.2.id選擇器:

選擇器的名字前面需要加上#
作用：選擇器中的樣式會作用于指定id的標簽上，而且有且只有一個標簽

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

例子如下：

#{
    color: blue;
}

4.3類選擇器

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

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

例子如下:

.cls{
     color: aqua;
 }

接下來我們需要通過代碼來演示3種選擇器的作用：
第一步：在IDEA中創建名為10_CSS-選擇器.html的文件：

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

<!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>

第三步：打開瀏覽器，觀察效果如下圖所示：

疊樣式表(Cascading Style Sheets，CSS)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言，CSS備受前端開發者的青睞。本文對基本的CSS元素的基本屬性進行介紹。

圖片源于網絡

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

第一種：對對象進行內嵌樣式，代碼如下：

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

第二種：對整個文本嵌入樣式，代碼如下：

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

第三種：嵌入外部樣式表

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

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

三種方式中，后兩種會經常用到，因為第一種在一個HTML中無法實現同時對兩個對象進行樣式設置，而后兩種可以對多個對象進行樣式設計。

另外，當三種在HTML同時層疊出現時，三種方式的優先級：第一種>第二種>第三種。

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

一、行內元素樣式獲取：

<!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>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js獲取內部部樣式</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>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力

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

三、兼容性:

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

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];
 }
}

對前端的技術，架構技術感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

在線咨詢

上一篇：像許昕、劉子歌一樣逐夢吧，這所體育運動學校招生啦！
下一篇：JS模塊化 - 淺談 CommonJS requir

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商