HTML+CSS(第三天)

時間 2019-12-14

標籤 html+css html css 第三天欄目 CSS 简体版

原文原文鏈接

CSS字體樣式屬性
1. font-size(字號
  1. 屬性值能夠使用相對單位值也能夠使用絕對單位值
  2. 必須增長單位
2. font-family(字體)
  1. 網頁中常常使用的字體有宋體、微軟雅黑、黑體
  2. 瀏覽器設置裏面能夠設置默認的字體
  3. 語法規則：p{font-family:"微軟雅黑"},p{font-family:"Microsoft Yahei",Arial;}
  4. 能夠同時指定多個字體，中間以逗號隔開，表示若是瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。
  5. 使用技巧：
    1. 如今網頁使用的字體大可能是14px往上，且爲偶數像素,ie6不支持奇數像素
    2. 中文字體還有空格，#，$組成的字體名稱的字體須要加""或者'',
3. CSS unicode字體
  1. 在 CSS 中設置字體名稱，直接寫中文是能夠的。可是在文件編碼（GB23十二、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持相似微軟雅黑的中文。　　
    1. 解決方案一：使用英文代替
    2. 解決方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱能夠避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是能夠正確的解析的。
    3. 例子
      宋體 SimSun \5B8B\4F53css
      
      微軟雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1html
      
      黑體 SimHei \9ED1\4F53瀏覽器
4. font-weight字體粗細
  1. 標籤b 和strong能夠定義字體的粗細,另外css也能夠設置字體粗細可是CSS沒有語義
  2. font-weight:normal,blod,bloder,lighter,100-900
  3. 其中blod==700,normal==400
  4. 推薦使用數字這樣解析能夠更快
5. font-style 字體風格
  1. 標籤em和i能夠定義字體的傾斜，另外css也能夠設置字體的傾斜可是CSS沒有語義
  2. font-style:normal,italic(顯示斜體的字體樣式),oblique(顯示傾斜的字體樣式)
  3. 使用技巧
    1. 平時咱們不多給文字加斜體，反而喜歡給斜體標籤（em，i）改成普通模式。
6. font綜合樣式設置
  1. 選擇器{font:font-style font-weight font-size/line-height font-family;}
  2. 記住順序
  3. 使用連寫方式，必須按照規定的順序書寫，不能更換。
  4. 各個屬性之間必須使用空格分開
  5. 其中不須要設置的屬性能夠省略（取的默認值），可是必須保留font-size和font-family,不然font屬性不起做用
  6. 常常使用 font:{12px "微軟雅黑"}
CSS外觀屬性
1. Color文本顏色
  1. color:red,green,blue
  2. Color:#FF0000 Color:#F00
  3. Color:rgb(255,0,0) Color:rgb(100%,0%,0%)
  4. 紅綠藍
2. line-height行高
  1. line-height行高
  2. line-height通常取的屬性值單位有px,em,%實際中使用最多的是px
  3. 通常行高設置的比字體大小大7-8個像素點就能夠了
3. text-align設置文本內容水平對齊方式
  1. text-align:left|right|center
  2. 是讓盒子裏面的內容水平居中，而不是讓盒子居中對齊字體
4. text-indent屬性用於設置首行文本的縮進
  1. 其屬性值可爲不一樣單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，容許使用負值, 建議使用em做爲設置單位。
  2. 通常都是使用em做爲單位，1個em就是一個字的寬度，段落裏面就是一個漢字的寬度
  3. 例子:首行縮進 p{text-indent:2em}
5. text-decoration
  1. text-decoration:none|underline(下劃線)|overline(文本上方一條線)|line-through(穿過文本的一條線)
  2. 通常使用的是s標籤去下滑線 s{text-decoration:none}
6. 總結
  1. i 和 em 斜體 font-style:normal font-style:italic
  2. b 和 strong 加粗 font-weight:400 font-weight:700
  3. s 和 del 刪除 text-decoration:none text-decoration:underline
  4. u 和 ins 插入 text-decoration:none text-decoration:line-through
複雜選擇器
1. 複合選擇器
  1. 後代選擇器
    1. 選擇元素或元素組的後代
    2. 例子.class p { color:pink;}
  2. 子代選擇器
    1. 子元素選擇器只能選擇做爲某元素子元素的元素。只包含外層標籤的親兒子
    2. 例子 .class>p{color:pink;}
2. 並集選擇器
  1. 語法：.class,p{color:red;}
  2. 任何類型的選擇器均可以做爲並集選擇器中的一個子項
3. 交集選擇器
  1. 交集選擇器由兩個選擇器組成標籤選擇器+類選擇器
  2. 語法：p.class{color:red;font-size:12px;}
  3. 既。。又。。的條件下知足

僞類選擇器

語法規則:選擇器名{}

連接僞類選擇器

:link{} 未訪問的連接的樣子
:visted{} 已訪問過得連接的樣子
:hover{} 鼠標通過連接的樣子
:active{} 鼠標按下連接的樣子
lv hao 順序不能顛倒

實際開發中常常用到的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css" media="screen">
        a{
            font-size: 25px;
            text-decoration: none;
            font-weight: 700;
            color: #000;
        }

        a:hover{
            color: red;
        }
    </style>

</head>
<body>
    <a href="www.baidu.com">百度</a>
</body>
</html>

標籤顯示模式
1. 塊級元素block-level
  1. 塊級的元素是獨佔一行
  2. 寬度 ,高度,內外邊距均可以設置
  3. 寬度默認是容器的寬度
  4. 能夠容納其餘塊元素和內聯元素　
  5. 常見的塊元素:div p h1-h6 ul ol li
2. 行內元素
  1. 行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構
  2. 和相鄰的元素在一行上
  3. 高寬無效，可是水平方向的padding margin能夠設置，垂直的不能夠
  4. 行內元素只能容納其餘行內元素或者文本（a標籤特殊）
  5. 常見的行內元素有：span a strong b em i ins u del s
3. 行內塊元素
  1. 和相鄰的元素在一行上可是之間有空隙
  2. 能夠控制寬度和高度，外邊距和內邊距
  3. 默認的寬度就是自己內容的寬度
4. 注意事項
  1. 只有文字才能組成段落，因此p標籤內不能夠放塊級元素，同理還有h1-h6,dt
  2. 連接裏面不能再放連接
5. 標籤顯示模式相互轉換
  1. 塊轉行內：display:inline
  2. 塊或者行內轉行內塊:display:inline-block
  3. 行內轉塊:display:block

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。