整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「測試開發全棧-HTML」(11)css字體復合屬性

          「測試開發全棧-HTML」(11)css字體復合屬性和小結

          體屬性可以把以上文字樣式綜合來寫,這樣可以更節約代碼。

          一起來看下效果:

          這里設定的整體樣式為:

          <!--想要div恩子變傾斜,加粗,字號設置為16元素,并且是微軟雅黑-->

          具體的代碼為:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS樣式之復合屬性和總結</title>

          <style>

          div {

          font-style: italic;

          font-weight: bold;

          font-size: 16px;

          font-family: "Microsoft YaHei";

          }

          </style>

          </head>

          <body>

          <!--想要div恩子變傾斜,加粗,字號設置為16元素,并且是微軟雅黑-->

          <div>今天風真大,還需要去上課,我們一起去看看吧</div>

          </body>

          </html>

          一個屬性一行代碼,為了節約,可以使用一行將所有屬性都展示,具體語法為:

          body {

          font: font-style font-weight font-size/line-height font-family;

          }


          按照上面的語法規則,我們重新寫下代碼,看下效果:

          對應的代碼為:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS樣式之復合屬性和總結</title>

          <style>

          .font {

          font-style: italic;

          font-weight: bold;

          font-size: 16px;

          font-family: "Microsoft YaHei";

          }


          .font-new {

          font: italic bold 16px "Microsoft YaHei";

          }

          </style>

          </head>

          <body>

          <!--想要div恩子變傾斜,加粗,字號設置為16元素,并且是微軟雅黑-->

          <div class="font">今天風真大,還需要去上課,我們一起去看看吧</div>

          <div class="font-new">都是你的錯,輕易愛上我,讓我不知不覺滿足被愛的虛榮</div>

          </body>

          </html>


          下面的代碼就是按照規則新寫的

          .font-new {

          font: italic bold 16px "Microsoft YaHei";

          }

          可以看到是可以使用的。復合屬性,簡寫的要求

          使用font屬性時,必須按照語法格式中的順序去書寫,不能更換順序,并且各個屬性之間以空格隔開,最后需要有分號結尾。不需要設置的屬性值可以忽略(取默認值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。

          我們來實驗一下:

          1. 去掉font-style

          斜體不展示了,正確

          2.去掉font-weight

          可以看到粗體沒有了,剩余的顯示正常

          3.如果去掉font-size

          發現不僅font-size沒有起作用,所有的屬性都沒起作用

          4.如果去掉font-family

          同樣也是都沒有起作用

          5.如果只有font-size和font-family

          可以看到樣式被修改了,這里為了方便查看,將16px修改為30px了

          .font-new {

          font: 30px "Microsoft YaHei";

          }


          接下來對字體屬性做個總結:

          font-size 字號 單位是px像素,必須要加上單位

          font-style 字體樣式 讓字體傾斜是italic,正常顯示是normal,一般用normal多

          font-weight 字體粗細 一般用數字來展示,如400是normal, 700是bold,不需要單位

          font-family 字體 按照約定來寫字體,比如微軟雅黑,宋體等

          font 字體連寫 字體連寫是有順序的,不能隨便更換順序;其中字號和字體必須同時出現


          好的,今天上午先到這里,下午我們再聊

          初識CSS第一天的時候學到了css選擇器,知道了大體分為基礎和復合兩種選擇器。當時詳細了解并掌握了基礎選擇器中的標簽選擇器、類選擇器、ID選擇器和通配符選擇器四種。那么今天先簡單了解一下復合選擇器吧。

          CSS復合選擇器

          復合選擇器是指對兩個或多個基礎選擇器進行組合形成的。

          作用:可以更準確高效地選擇目標元素。

          分類:后代選擇器子選擇器并集選擇器偽類選擇器

          • 后代選擇器

          又稱包含選擇器。也就是說兩個元素之間為包含關系,父元素和子元素。子元素就是父元素的后代。只需要使用標簽名來設置屬性,在目標元素中不需要調用。

          語法:父標簽 子標簽 {樣式聲明}。

          兩個標簽之間空格分開。

          代碼示例:

          <html>
          	<head>
            	<title>后代選擇器</title>
            	<style>
            			ol li {
                      color: red;
                  }
                  ol li a {
                      text-decoration: none;
                  }
            	</style>
            </head>  
          	<body>
            	<ol>
                  <li>這組標簽就是非常好的復合選擇器示例。ol標簽是父標簽,li標簽是子標簽。</li>
                  <li>這組標簽就是非常好的復合選擇器示例。ol標簽是父標簽,li標簽是子標簽。</li>
                  <li>這組標簽就是非常好的復合選擇器示例。ol標簽是父標簽,li標簽是子標簽。</li>
                  <li>
                      <a href="#">我是第三層元素,孫子元素。</a>
                  </li>
              </ol>
            </body>
          </html>

          運行界面:

          • 子選擇器

          又稱子元素選擇器,他只能選擇作為某元素的最近一級子元素

          語法:父元素>子元素 {樣式聲明}

          兩個標簽之間使用>隔開。

          代碼示例:

          <html>
          	<head>
            	<title>子選擇器</title>
            	<style>
            			div>a {
                      text-decoration: none;
                      color: red;
                  }
            	</style>
            </head>  
          	<body>
            	<div>
                  <a href="#">div子元素1</a>
                  <p>
                      <a href="#">p元素的子元素,div的孫子元素。</a>
                  </p>
              </div>
            </body>
          </html>

          運行界面:

          • 并集選擇器

          可以選擇多組標簽,同時為他們定義相同的樣式。通常用于集體聲明

          語法:元素1,元素2,,元素3 {樣式聲明}。

          標簽之間使用英文逗號隔開,最后一個元素后不需要加英文逗號。

          代碼示例:

          <html>
          	<head>
            	<title>并集選擇器</title>
            	<style>
            			.Bj,
                  p {
                      color: purple;
                  }
            	</style>
            </head>  
          	<body>
            	<div class="Bj">并集選擇器1</div>
              <p>并集選擇器2</p>
              <p>并集選擇器3</p>
            </body>
          </html>

          運行界面:

          • 偽類選擇器

          為元素添加特殊效果。

          鏈接偽類

          語法:

          “a:link”:設置沒有被點擊跳轉的鏈接,默認顯示的狀態。

          “a:visited”:設置已經被點擊跳轉的鏈接。

          “a:hover”:設置鼠標懸停在鏈接上所顯示的樣式。

          “a:active”:設置鼠標已經按下但還未彈起跳轉的鏈接樣式。

          代碼示例:

          <html>
          	<head>
            	<title>鏈接偽類選擇器</title>
            	<style>
            			/* 還沒有被點擊跳轉的鏈接狀態 */
                  a:link {
                      color: black;
                  }
                  /* 已經點擊且跳轉的鏈接狀態 */
                  a:visited {
                      color: red;
                  }
                  /* 鼠標懸停還沒有點擊的鏈接狀態 ,實際開發中常用鏈接狀態*/
                  a:hover {
                      color: aqua;
                  }
                  /* 正在點擊還沒有彈起跳轉的鏈接狀態 */
                  a:active {
                      color: green;
                  }
            	</style>
            </head>  
          	<body>
            	<!-- 偽類選擇器 -->
              <!-- 鏈接偽類 -->
              <a href="#">鏈接偽類的鏈接</a><br>
            </body>
          </html>

          表單焦點偽類:

          用于選取獲得焦點的表單元素。這個選擇器主要針對表單元素。

          語法:

          input:focus {樣式聲明}

          代碼示例:

          <html>
          	<head>
            	<title>表單焦點偽類選擇器</title>
            	<style>
            			 /* 表單焦點偽類 */
                  /* 獲取表單元素的光標指向,光標在哪個表單元素上,那個表單元素就出現設置的樣式 */
                  input:focus {
                      background-color: pink;
                  }
            	</style>
            </head>  
          	<body>
            	<input type="text">
              <input type="text">
              <input type="text">
            </body>
          </html>

          運行界面:

          今天學習的內容就到這里了,明天繼續,加油加油!

          1)HTML基礎與加強

          HTML語言,HTML語言背景知識,HTML全局標簽,HTML格式標簽,HTML文件標簽,HTML超鏈接標簽,HTML圖像標簽,HTML框架標簽,HTML客戶端圖像地圖,HTML表格標簽,HTML幀標簽,HTML表單標簽,HTML頭元素,HTML分區標簽

          (2)XHTML基礎與加強

          XHTML與 HTML的差異,XHTML語法,XHTML DTD,XHTML驗證,XHTML模塊,XHTML屬性,XHTML事件,XTHML結構化

          (3)HTML5設計與應用

          HTML5介紹,HTML5多媒體處理,HTML5畫布,HTML5 Web存儲技術,HTML5表單,HTML5 屬性和事件HTML5的常用標簽(比如:applet標簽、article標簽、aside標簽、audio標簽、canvas標簽、datalist標簽、details標簽等)

          (4)CSS基礎與加強

          CSS 簡介,CSS基礎語法,CSS 派生選擇器,id 選擇器,CSS類選擇器,CSS盒子模型

          CSS背景 、文本 、字體 、邊框 、外邊距 、內邊距 、列表 、表格CSS 高級: CSS 尺寸、分類 、定位 、偽類 、偽元素 、媒介類型

          編輯

          請點擊輸入圖片描述

          (5)DIV+CSS設計與應用

          使用知名網站的首頁深入剖析DIV+CSS的WEB標準:盒子模型經典案例-優酷首頁面、仿sohu首頁面布局、可愛屋網站首頁面。涉及知識點包括: (CSS定位的四種方式、左浮動、右浮動、清除浮動、標準流和非標準流、設置對象的層疊順序、塊元素和行元素的轉換等)

          (6)Javascript基礎語法:

          Javascript基本介紹、Javascript的發展史、Javascript運行原理剖析、Javascript特點、

          Javascript的標識符、Javascript基本數據類型(數值類型、布爾類型、字符串類型)、

          Javascript復合數據類型簡介(數組、對象)、Javascript特殊數據類型(NULL、undefine)、

          定義變量、初始化、賦值、數據類型轉換的兩種方式(自動轉換、強制轉換)、Javascript的運算符(算術運算符、關系運算符、邏輯運算符)、Javascript的位運算和移位運算

          (7)Javascript三大流程控制

          順序控制、分支控制(單分支: if語句、雙分支: if-else語句、多分支 if-else if-else 語句, switch-case-default語句)、循環控制(for語句、while語句、do-while語句)、在ie和firefox如何調式Javascript

          (8)Javascript函數

          函數基本概念、函數的定義、函數的調用方式及調用過程深度剖析、函數使用細節討論、使用Function類創建函數、函數實際運用(打印金字塔、九九乘法表)、函數的遞歸調用、

          Javascript常用系統函數使用(encodeURI、decodeURI、eval、parseInt、parseFloat、isNaN等)

          (9)Javascript數組

          數組的基本使用、使用for/while遍歷數組、數組實際運用(計算班級平均分)、二維數組的基本使用、使用for遍歷二維數組、對二維數組轉置處理、數組排序介紹、冒泡排序、順序查找和二分查詢法

          (10)事件驅動

          Javascript的Event-Driven機制、事件源、事件處理程序、事件名稱、事件對象是什么、

          事件類型(鼠標事件、鍵盤事件、HTML事件、其它事件)、Javascript訪問CSS技術、

          事件驅動的瀏覽器兼容性處理、常用的18個事件(onblur、onchange、onfocus、onkeydown、onmousedown等) 綜合案例(Javascript版計算器)

          (11)DOM編程

          DOM編程介紹(HTML DOM與XML DOM)、DOM編程實例入門、BOM介紹、DOM對象介紹、window對象詳解、history對象詳解、location對象詳解、navigator對象詳解、screen對象詳解、event對象詳解、document對象詳解、body對象詳解、style對象詳解、WEB版坦克大戰游戲、forms對象(集合)、from對象、images對象(集合) 、img對象、links對象(集合)、link對象、all對象(集合)、table對象詳解、tableRow對象和tableCell對象、基于table對象的用戶管理系統


          主站蜘蛛池模板: 成人丝袜激情一区二区| 国产拳头交一区二区| 国产一区二区三区不卡在线观看| 国产一区二区精品久久凹凸| 美日韩一区二区三区| 中文字幕精品一区二区2021年| 久久se精品一区二区| 亚洲AV成人精品日韩一区18p| 无码国产精品久久一区免费| 久久无码人妻一区二区三区| 国产精品va无码一区二区| 精品国产AⅤ一区二区三区4区| 国产成人精品一区二三区| 精品无码国产一区二区三区麻豆| 亚洲日韩AV一区二区三区四区| 少妇激情av一区二区| 麻豆一区二区三区精品视频| 搡老熟女老女人一区二区| 99久久精品国产一区二区成人| 性色A码一区二区三区天美传媒| 国产另类TS人妖一区二区| 亚洲日韩精品无码一区二区三区| 大屁股熟女一区二区三区| 99精品久久精品一区二区| 日韩制服国产精品一区| 亚洲熟妇av一区二区三区漫画| 精品一区二区久久| 久久精品黄AA片一区二区三区 | 日韩视频一区二区| 国产亚洲综合一区二区三区| 日本一区二区三区在线网 | 少妇无码一区二区三区免费| 一区二区三区四区视频| 亚洲精品国产suv一区88| 日韩精品久久一区二区三区| 无码精品人妻一区| 亚洲AV成人一区二区三区AV| 亚洲日本久久一区二区va| 日韩久久精品一区二区三区| 精品人妻一区二区三区毛片| 日韩精品无码一区二区三区不卡 |