Html學習筆記8:初識CSS

標準格式:
 選擇符{
  屬性名:屬性值;
  屬性名:屬性值;
  ……
 }
css顏色
1.顏色的英文單詞
2.十六進制 #00 ff 00 紅,綠,藍 兩兩是一位,可以簡寫成三位
3.rgb 顏色
 格式1:rgb(0,0,255) 三位都放數值,取值範圍是0-255,紅,綠,藍
 格式2:rgb(0%,100%,0%) 三位都放百分數,取值範圍爲0%-100%,紅,綠,藍

html 中引入css的方式
1.內聯式使用 也就是將css代碼通過屬性名稱=屬性值的方式放到標籤裏面去使用
 格式:style=“屬性名:屬性值;屬性名:屬性值;。。。。”
2.內嵌入式的使用 通過html標籤去劃去一個範圍來寫css屬性
 格式:

<style>
    中間寫css內容
</style>

注意:1.一個頁面中可以寫有多個style標記出來的範圍
   2.style可以放在頁面中的任意位置,但是推薦放在head頭部使用

引入外部文件

<link rel="stylesheet" type="text/css" href="">

1.rel=”stylesheet” 告訴瀏覽器要引入樣式表
2.type=”text/css” 文件類型
3.href=”” 文件URL
css中的選擇器
html標籤選擇器,就是使用html標籤當做選擇器

1.class選擇器
(1)在標籤上面添加 class=“class名稱”
(2)css中使用 .class名稱{}去找

2.id選擇器
(1)在標籤上面 添加屬性 id=”id名稱”
(2)css中 使用 #id名稱{} 方式去找

3 * 通配符選擇器
格式: *{} 會選取所有html標籤

注意
使用不同選擇器有級別

id>class>標籤選擇>通配符選擇器

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
    <title>全局屬性和其它</title>  
    <!-- <meta charset="utf-8"> -->  
    <meta name="author" content="lzh"><!-- 作者 -->  
    <meta name="keywords" content="html5,lzh"><!-- 關鍵字 -->  
    <meta http-equiv="content-type" content="text/html charset=utf-8">  
    <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"><!-- 3秒鐘自動刷新到百度頁面 -->
    <style type="text/css">  
    #abc{  
        color: red;  
    }  
    .abc{  
        color: blue;  
    }  
    </style>  
</head>  

<body>  
<div>  
<music>  
我 你  
<b style="font-size: 100px;">&copy;</b>  
<br>  
<p id="abc">這是id</p>  
<p class="abc">這是class</p>  
<p class="abc">這是class</p>  
<p class="abc">這是class</p>  
<input type="text" name="user" accesskey="n">按下alt+n獲取光標  
<p contenteditable="true">修改這裏的文本</p>  
<p dir="rtl">文字到右邊了</p>  
<p hidden>隱藏這裏的文字</p>  
<p lang="en" title="這是HTML5提示" style="color: orange;">HTML5</p>  
<input type="text" name="user1" tabindex="2">  
<input type="text" name="user2" tabindex="1">  
<input type="text" name="user3" tabindex="3">  
</body>  
</html>

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章