08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表

Slides:



Advertisements
Similar presentations
简历填写攻略. 简历投放  不要被招聘要求吓倒  不要海投,乱投  看清招聘要求再投,不要投能力相差过多的岗位,根 据招聘要求去填写简历:如需注明薪金要求  主要投放渠道:招聘会,人才网  尽量不要投同一公司的多个岗位  三大人才网站:前程无忧,中华英才网,智联招聘.
Advertisements

醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
第一章 餐饮服务程序 学习目的: 掌握餐饮服务四个基本环节的内容 正确表述和运用各种餐饮形式的服务程序 熟悉并利用所学知识灵活机动地为不同需求的 客人提供服务.
HyperText Markup Language
讲故事训练 授课人:田轶.
第十一課 菜園 6-11.
校园信息管理系统 河北科技大学网络中心 2000/4/10.
專題製作 許惠淑.
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
石家庄迅步网络科技有限公司 联系人:张会耀 电话:
徵收苗栗市福全段147、1588及文心段10、11地號等4筆土地之
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
讲 义 大家好!根据局领导的指示,在局会计科和各业务科室的安排下,我给各位简要介绍支付中心的工作职能和集中支付的业务流程。这样使我们之间沟通更融洽,便于我们为预算单位提供更优质的服务。 下面我主要从三方面介绍集中支付业务,一是网上支付系统,二是集中支付业务流程及规定等,
第五单元课1-3 层叠样式表.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
中国人民公安大学经费管理办法(试行) 第一章总则 第四条:“一支笔” “一支笔”--仅指单位主要负责人。负责对本 单位的经费进行审核审批。
浏览器工作原理浅析 TID Ghostzhang.
蘇軾詞的賞析
RWD網頁設計實務 李欣螢 以誠研發有限公司.
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第十五章 传播学调查研究方法.
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
CSS 徐于晉 陳政樺 陳郁蘋 黃麒錕 劉芳賓.
行動研究就是一種行動性的研究,由行動者來進行研究,而不是由外於行動領域的學者與與科學家來進行,研究的問題也取自行動。
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
第 11 章 讓版面更活潑 的 CSS.
XSL: Extensible Stylesheet Language
ASP.NET基本設計與操作 建國科技大學 資管系 饒瑞佶 2007年.
CSS - Cascading Style Sheets
認識我的故鄉_台中市.
主讲:陶建平 华中科技大学网络与计算中心
网站设计 前端 选择器(复习),表单.
CSS技术 蒋玉华.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
UI 软件 设计 页面布局(二).
大家所认为的电子商务行业有哪些途径来赚钱?
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
第4章 CSS基础 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
第 19 章 XML記憶體執行模式.
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
个人网站作业3 传媒学院.
武汉纺织大学传媒学院 cm.wtu.edu.cn
UI 软件 设计 页面布局(一).
《网页设计与制作》.
精忠报国  演唱:屠洪纲 作词:陈涛 作曲:张宏光  狼烟起 江山北望  龙起卷 马长嘶 剑气如霜  心似黄河水茫茫  二十年 纵横间 谁能相抗  恨欲狂 长刀所向  多少手足忠魂埋骨它乡  何惜百死报家国  忍叹惜 更无语 血泪满眶  马蹄南去 人北望  人北望 草青黄 尘飞扬  我愿守土复开疆  堂堂中国要让四方来贺.
6-1 認識超連結 超連結是網頁中少不了的元件,透過他才能將不同的網頁、網站相連,讓使用者可以在不同網站中瀏覽。而圖片、動畫等檔案,也是透過超連結的方式來呈現網頁中,所以底下讓我們來好好的認識超連結。
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
進階網頁設計 電算中心 – 何建義.
微信商城系统操作说明 色卡会智能门店.
95年度高屏醫療網 以病人為中心之醫療照護— 以弱勢族群為重點 期末報告
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
第7章 使用CSS设置链接与导航菜单 经济管理学院.
聽聽那冷雨---重點摘要 二愛 王煜榕.
Dreamweaver 進階網頁製作 B 許天彰.
網頁程式設計 袁福良 B B.
CSS基礎 靜宜大學 資管系 楊子青.
憲政與民主 應化3A 邱泓明.
大綱 一.受試者之禮券/禮品所得稅規範 二.範例介紹 三.自主管理 四.財務室提醒.
古蹟知性之旅 我和新港奉天宮有個約 報告人:陳 映 竹 傅 湘 甯.
CSS 一起來美化網頁吧!!.
Web前端开发 第7章:初识CSS3 阮晓龙 / 河南中医药大学管理科学与工程学科
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
知识点讲解 1、DOM节点树 DOM(Document Object Model)称为文档对象模型,是一个表示和处理文 档的应用程序接口(API),可用于动态访问、更新文档的内容、结构和样 式。DOM将网页中文档的对象关系规划为节点层级,构成它们之间的等级关 系,这种各对象间的层次结构被称为节点树。如下图所示。
Presentation transcript:

08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表 8-4 選擇器的類型

8-1 CSS 的演進 ™™ CSS Level 1 (CSS 1) ™™ CSS Level 2 (CSS 2) ™™ CSS Level 2 Revision 1 (CSS 2.1) ™™ CSS Level 3 (CSS 3) ™™ CSS Level 4 (CSS 4) 回首頁 P.8-2~3

8-2 CSS 樣式規則與選擇器 CSS 樣式表是由一條一條的樣式規則 (style rule) 所組成,而樣式規則包 含選擇器 (selector) 與宣告 (declaration) 兩個部分: 例如: 回首頁 P.8-4

下面是一個例子。 P.8-5

8-3 連結HTML 文件與CSS 樣式表 8-3-1 在 <head> 元素裡面嵌入樣式表 下面是一個例子。 回首頁 P.8-7

8-3-2 使用HTML 元素的style 屬性指定樣式表 前一節的例子可以改寫成如下。 P.8-8

8-3-3 將外部的樣式表匯入HTML 文件 下面是一個例子,它將 <\Ch08\linkcss1.html> 所定義的樣式表另外儲 存在純文字檔 <body.css>。 <\Ch08\body.css> <\Ch08\linkcss3.html> P.8-8~9

8-3-4 將外部的樣式表連結至HTML 文件 我們可以將樣式表連結至HTML 文件,下面是一個例子。 P.8-9

8-4 選擇器的類型 8-4-1 類型選擇器 例如: 8-4-2 後裔選擇器 8-4-3 萬用選擇器 回首頁 P.8-10

8-4-4 類別選擇器 使用類別選擇器定義樣式規則的語法如下: P.8-11~12

8-4-5 ID 選擇器 使用ID 選擇器定義樣式規則的語法如下: P.8-13~14

8-4-6 屬性選擇器 下面是一個例子。 P.8-16

8-4-7 虛擬類別選擇器(:link、 :visited、 :hover、 :focus、:active、:enabled、 :disabled...) CSS 提供了數個虛擬類別選擇器,如下所示: 連結虛擬類別 (link pseudo-classes):包括 :link 和 :visited。 ™使用者動作虛擬類別 (user action pseudo-classes):包 括 :hover、:focus 和 :active。 語言虛擬類別 (language pseudo-class):包括 :lang。 目標虛擬類別 (target pseudo-class) :包括 :target。 UI 元素狀態虛擬類別 (UI element states pseudo-classes) :包 括 :enabled、:disabled、:checked、:indeterminate。 ™結構化虛擬類別 (structural pseudo-classes) :包括 :root、:nth- child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first- child、:last-child、:first-of-type、:last-of-type、:only-child、:only- of-type、:empty。 ™否定虛擬類別 (negation pseudo-class) :包括 :not()。 P.8-17

下面是一個例子。 P.8-18