網頁設計基礎，學習筆記

網頁設計筆記(2)－css與javascript更改元素樣式

本篇接下來要使用css與javascrpt來快速更改各種樣式。

要更改樣式最基本的有三種方式：

  1. 直接寫在元素的標籤內設定樣式
  2. 在<style></style>內寫入設定樣式
  3. 使用javascript更改樣式。

首先是第一種範例：

程式碼：

<div style="width:150px; height:50px; background-color: DarkViolet; 
text-align: center; line-height: 50px">方塊2</div>


<div style="width:300px; height:100px;
background-color: DeepSkyBlue">方塊3</div>



<div style="background-color: HoneyDew; text-align: center; line-height: 50px">方塊4</div>

效果：

方塊2
方塊3
方塊4

使用方法為在<div>裡面多寫一段 Style="….這中間放的內容就可以更改樣式…." style 前面要記得空一格，每個不同的標籤後面要加上「;」隔開，為方便讀去會再多一個空格，標籤的各個用途如下：

標籤使用用途：
width:50px;寬度設為50px
height:100px;高度設為100px
background-color:skyblue;背景設為天空藍
text-align: center;文字置中
line-height: 100px;文字高度設為100px
margin: 10px;設定周圍間距10px
border-radius: 30px;設定圓角30px
display : ‘inline-block’;設為行內元素，像是上面提到的div強制會放在同一行內喔!
以上是可能比較常用到的。

除了div元素之外，其他像是前一篇有提到的p、pre等之後會有更多的元素都可以用這種方式改變樣式。

另外特別說明，style="……"，在雙引號的內容中，通通屬於css語法，可以看到這邊已經出現了html語法與css語法交互使用的情況了。

剛剛的方式一次就只能改變一個div，如果今天有好多個區塊都要設定顏色，就要使用到網頁架構中的<style><\style>標籤

接下來是第二種CSS選取器：

先上範例再來說明：

程式碼：

 <style>
    div{
        width: 40px;
        height: 40px;
        background-color: SkyBlue;
        text-align: center;
        line-height: 40px;
        margin: 10px;
        text-inline: center;
        border-radius: 30px;
      }
 </style>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</body>

效果：

1
2
3
4
5
6
7
8
9
10

以上就是用style標籤快速設定樣式的基本操作，不過這樣的設定方法還是有些問題的，實務上一定會有很多不同的區塊要設定不同的顏色。

目前的作法只能把所有叫div的通通變成天藍色，接下來就要回到HTML的語法

我們要給每個元素都有個ID，好操控他們，寫法如下。

<div id = 'div1'>這是ID為div1的div</div>
<p id = 'p1'>這是ID為p的p</p>
<p id = 'div2'>這是ID偽裝為div2的p</p>
<div id = 'div3'>這是正常的div3</div>

/* ^= 代表後面的字串開頭符合的所有條件*/
div[id^=div]  
/* 代表符合id前面的幾個字為DIV的元素通通都會改，像上面有個偽裝的就會被改*/
{...
}

#div3
/*直接指定ID設定*/

{....
}

[id^=div]
/*也可以指定符合條件的ID設定*/
{
}
優先度style格式指定的方式
1.<div style="width:300px; height:100px>直接在body裡面的div元素裡面宣告的最大
2.#div3#加上ID名稱為最高優先度
3.div[id ^="…."]指定元素符合條件次之(這邊是指定id，也可以指定其他的)
4.[id = ]未指定元素，符合id的通通改變
這邊wordpress展示不出來QQ…

詳細可參考https://www.w3schools.com/css/css_selectors.asp

最後是第三種：

可以直接用javescript快速創建元素並且設定標籤屬性，當有大量資料需要使用時，會搭配迴圈使用

<body>
  <script>
      var ref = document.createElement('div');
      ref.id = 'box01';
      ref.style.width = '100px';
      ref.style.height = '100px';
      ref.style.textAlign = 'center';
      ref.style.lineHeight = '100px';
      ref.style.margin = '5px';
      ref.style.borderRadius = '5px';
      ref.style.display = 'inline-block';
      ref.style.backgroundColor = 'SkyBlue';
      ref.style.color = 'gold';
      ref.innerHTML = '方塊1';

      document.body.append(ref);    
  </script>
</body>

以上是三種設定元素樣式的方法。

發表留言