整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
體屬性可以把以上文字樣式綜合來寫，這樣可以更節約代碼。
一起來看下效果:
這里設定的整體樣式為:
<!--想要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屬性將不起作用。
我們來實驗一下:
斜體不展示了，正確
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選擇器和通配符選擇器四種。那么今天先簡單了解一下復合選擇器吧。
復合選擇器是指對兩個或多個基礎選擇器進行組合形成的。
作用：可以更準確高效地選擇目標元素。
分類：后代選擇器、子選擇器、并集選擇器、偽類選擇器。
又稱包含選擇器。也就是說兩個元素之間為包含關系，父元素和子元素。子元素就是父元素的后代。只需要使用標簽名來設置屬性，在目標元素中不需要調用。
語法：父標簽 子標簽 {樣式聲明}。
兩個標簽之間空格分開。
代碼示例：
<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對象的用戶管理系統
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
