10 所有文章

[學習筆記] 初識HTML+CSS入門教學

html_css

整理了慕課網的 初識HTML+CSS課程 筆記,針對HTML架構及標籤和CSS基本知識有更深入的了解,記錄下來學習中所獲得的重要筆記供大家學習。

教學1:

HTML x CSS x JS

  • HTML(內容):文字,圖片
  • CSS(外觀):字體,背景,邊框
  • JS(行為):特效

 

教學2:

字體修改優先順序以內連式 > 嵌入式 > 外部式,簡單來說就是就近原則。

  • 字體修改(嵌入式,放置在head的style type內)
<html>
    <head>        
        <style type="text/css">
        h1{
            font-size:12px;
            color:#930;
            text-align:center;
        }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>
  • 字體修改(內連式,直接寫在現有的HTML標籤中)
<html>
    <head>
    </head>
    <body>
        <span style="color:blue">Color blue!</span>
    </body>
</html>

  • 字體修改(外部式,寫在一個單獨的文件中)
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

# 單獨文件 "style.css"
span{
 color:blue;
 font-size:30px;
}

 

教學3:

class和id選擇器

<html>
    <head>
        <style type="text/css">
        #stress{
               color:red;
                }
        </style>
    </head>
    <body>
        <span id="setGreen">公開課</span>
    </body>
</html>

 

教學4:

增加<div id=”ListName”>來讓邏輯更清楚(如右圖比左圖來得更容易理解)

div_id
div_id

教學5:

元素分類

  • 塊級元素:<div>、<p>、<h1>、<form>、<ul>、<li>
  • 內聯元素:<span>、<a>、<label>、<strong>、<em>
  • 內聯塊狀元素:<img>、<input>
node_tree
node_tree

 

延伸閱讀:

那 [學習筆記] 初識HTML+CSS入門教學 就到這邊,感謝收看,有關Max行銷誌的最新文章,都會發佈在Max的Facebook粉絲專頁,如果想看最新更新,還請您按讚或是追蹤唷!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *