CSS樣式 靜宜大學 資管系 楊子青.

Slides:



Advertisements
Similar presentations
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Advertisements

HyperText Markup Language
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
“走进三国” 读书汇报会 广州市玉岩中学 李玉明( ).
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
CSS – 進階 IDIC.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
说课.
税务认定 永州市国家税务局纳税人学校.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
CSS简介 WEB前端三剑客之二.
CSS的運用 講者:楊國棟 2006/06/12.
顏色與背景CSS樣式.
Web前端开发技术与实践 第12章 布局 阮晓龙 /
DreamWeaver MX (II) 林偉川.
CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
第 13 章 用CSS 設定 文字顏色與背景.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
訪視委員 蒞臨指導 熱烈歡迎 Chrome text with reflection (Advanced)
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
中文題目 (格式內文 字型樣式粗體 字型大小54pt 色彩黑色 英文題目(格式內文 字型樣式粗體 字型大小54pt 色彩黑色
CSS字型樣式.
CSS樣式 靜宜大學 資管系 楊子青.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
CSS - Cascading Style Sheets
CHAPTER 18 CSS樣式表的動態效果.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML & CSS.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
CSS技术 蒋玉华.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
Web前端开发技术与实践 第9章:文字样式 阮晓龙 /
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
主讲:陶建平 华中科技大学网络与计算中心
武汉纺织大学传媒学院 cm.wtu.edu.cn
Word – 排版 資訊教育.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
第6章 使用CSS修饰常见的网页元素 主讲人:刘泰然 经济管理学院.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
網路商店裝修之二 CSS樣式編輯.
第6章 使用CSS修饰常见的网页元素 经济管理学院.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
清單的CSS樣式.
第2章 块级标签 经济管理学院.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
Presentation transcript:

CSS樣式 靜宜大學 資管系 楊子青

大綱 字型 文字段落 文字效果 背景

1. 字型 color (字體顏色) font-family (指定字型樣式) 可用顏色名稱、16進位碼、RGB碼,例如: body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} http://www.w3schools.com/css/tryit.asp?filename=trycss_color font-family (指定字型樣式) 依序指定字型名稱,以逗號分開,例如: p{font-family:"Times New Roman", "標楷體";} http://www.w3schools.com/css/tryit.asp?filename=trycss_font-family

font-style: italic (斜體) font-weight: bold (粗體) 字型 font-size (字體大小) 數值+百分比(%) 數值+單位 px:以螢幕的像素(pixel)為單位 pt:以點數(point)為單位,如Word的大小 em:以目前字型大小為單位 假設目前字型10pt,則2em=20pt http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size_percent_em font-style: italic (斜體) font-weight: bold (粗體)

2. 文字段落 屬性 屬性名稱 設定值 text-align 設定文字水平對齊 Left center right justify text-indent 首行縮排 數值+百分比(%) 數值+單位 letter-spacing 設定字元間距 normal 數值+單位 (pt , px , em) line-height 設定行高

3. 文字效果 屬性 屬性名稱 設定值 vertical-align 垂直對齊 baseline (一般位置) super(上標字) sub(下標字) top(對齊頂端) middle(垂直置中) bottom(對齊底部) text-decoration 增加裝飾樣式 none underline(文字下方線) line-through(刪除線) overline(文字上方線) text-transform 轉換字母大小寫 none (不做改變) lowercase (全部小寫) uppercase (全部大寫) capitalize (首字大寫) text-shadow (IE不支援) 增加陰影效果

線上網站:文字效果CSS csstypeset 網址:http://csstypeset.com/

4. 背景 設定背景顏色 設定背景圖案 background-color:顏色值 background-image: url (圖檔相對路徑) background-repeat 設定背景圖案是否重複顯示 background-attachment 設定背景圖案是否跟捲軸一起捲動 background-position 設定背景圖案位置 background-size 設定背景尺寸 linear-gradient (漸層方向, 色彩1, 位置1,色彩2,位置2...)

Ultimate CSS Gradient Generator 網址:http://www.colorzilla.com/gradient-editor/

參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。 Chap 13: CSS基本語法 網路資源 http://www.w3schools.com/css/