文字 CSS 樣式. 文字的屬性 text-decoration none | underline | overline | line-through | blink text-transform none | capitalize | uppercase | lowercase line-height.

Slides:

Advertisements

Similar presentations

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Advertisements

CSS 應用設計. 網頁排版規劃 1. 使用 div 規劃區域 * 或使用 HTML5 Semantic Elements:

Building a Website: Cascading Style Sheets (CSS) Fall 2013.

Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //

Session Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances.

方框的CSS樣式.

Cascading Style Sheets (Formatting. Slide 2 Lecture Overview At this point, you have learned how and where to create styles You have not learned much.

國立高雄大學 - 圖書資訊館楊國棟 CSS 串接式樣式表講師：楊國棟.

Tutorial 4 Formatting Text. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a spread heading Indent text Change the line spacing.

CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.

INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.

Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!

第一章變數、常數及資料型態. 變數 C 程式語言的變數名稱第一個字必須是英文字母或底線 (_) 之後可以是數字, 英文字母或底線 (_) 不可以是保留字例： Num (Ο) _score (Ο) C&C (X) 8num (X)

成本效能：教師的供求、編制與薪級黃炳文香港教育學院教育政策與行政系. 成本效能 (Cost Effectiveness) 目標 (Goals) 目標 (Goals) 方法 (Methods, Strategies) 方法 (Methods, Strategies) 評估 (Evaluation)

Lecture CSS: Cascading Style Sheets. What are Styles? Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics.

+ Text & Font Styles Unit 3 Lesson Different Font Categories Sans Serif – block style fonts Example - Rockwell Easy to read and good to use when.

CSS The Definitive Guide Chapter 6.  Text is the content, and fonts are used to display that content. By using text properties you can affect the position.

Formatting Text (Plus More Selectors) Learning Web Design: Chapter 12.

Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.

CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu

HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).

Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.

CSS Dvijesh Bhatt.

HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.

Chapter 7 Web Typography Principles of Web Design, 4 th Edition.

Principles of Web Design 6 th Edition Chapter 5 – Web Typography.

1.NET Web Forms CSS: Style Sheets © 2002 by Jerry Post.

Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.

Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.

Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:

WORKING WITH CASCADING

New Perspectives on XML, 2nd Edition Tutorial 5 1 TUTORIAL 5 WORKING WITH CASCADING STYLE SHEETS.

1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

XP New Perspectives on XML Tutorial 5 1 TUTORIAL 5 CSS Tutorial – Carey ISBN

Class three: CSS review, backgrounds, font formatting, the box model.

Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.

CSS -- TEXT.  Text Color  The color property is used to set the color of the text.  With CSS, a color is most often specified by:  a HEX value - like.

Basics of Web Design Chapter 6 More CSS Basics Key Concepts.

INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.

Cascading Style Sheets Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.

1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple.

Andover Pull List PULL LIST PROCEDURE Log on to Evergreen Open “Pull List for Hold Requests” Click the “Fetch more holds” button however many times it.

©SoftMoore ConsultingSlide 1 Introduction to HTML: Cascading Style Sheets.

CSS – Cascading Style Sheets

Cascading Style Sheets Web Design Fairport High School.

CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

Styling Fonts & Text CHAPTER 4 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)

Web Design (14) CSS Formatting Text. Formatting Text In Brackets, go to your ‘externalcss’ website and find the ‘formattingtext’ page. Use the ‘main’

JavaScript and CSS

CSS Text Text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between.

Cs332a_chapt04.ppt CS332A Advanced HTML Programming Text Controls Kerning (Code 4.1, Figure 4.1, Page 78) The amount of space between letters in a word.

第六讲列表样式及导航条. 基本列表样式 Read s Write chapter Go shopping Cook dinner Watch Lost.

Creating Layouts with CSS. Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.

ECA 228 Internet/Intranet Design I Cascading Style Sheets.

CSU - DCE Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Text Control Instructor: Joseph.

03 CSS (Cascading StyleSheet) Р.Жавхлан МОНГОЛ УЛСЫН ИХ СУРГУУЛЬ Мэдээллийн технологийн сургууль Интернэт технологийн үндэс 2015 Намар.

Chapter 11 & 12 CSS Style Sheets: Intro. Why CSS? Separate presentation from content – more accessible Less work – can change appearance of whole site.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.

1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)

Cascading Style Sheets (Formatting). Slide 2 Lecture Overview (1) At this point, you have learned how and where to create styles Internal, embedded, external.

CSS Details Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  To use CSS properties for fonts  Evaluate whether to use pts,

Formatting with Styles. Choosing a Font Family font-family property has a special characteristics: you can specify more than one font h1, h2 {font-family:”Arial.

CIS 4004: Web Based IT (CSS) Page 1 © Dr. Mark Llewellyn CIS 4004: Web Based Information Technology Fall 2012 Cascading Style Sheets (CSS) Department of.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 10: Formatting Text with Styles.

TYPEFACE TERMINOLOGY SERIFSANS-SERIFMONOSPACE BASELINE TYPEFACE TERMINOLOGY.

CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.

Cascading Style Sheets (Formatting)

Cascading Style Sheets Color and Font Properties

Cascading Style Sheets

Lesson 5 Topic B – Basic Text & Fonts

Presentation transcript:

文字 CSS 樣式

文字的屬性 text-decoration none | underline | overline | line-through | blink text-transform none | capitalize | uppercase | lowercase line-height text-indent text-align left | right | center | justify vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | | letter-spacing word-spacing white-space direction ltr | rtl

文字裝飾線 (text-decoration) Text Decoration - none Text Decoration - underline Text Decoration - overline Text Decoration - line-through Text Decoration - blink

英文字母大小轉換 (text-transform) text transform - none text transform - capitalize text transform - lowercase text transform - uppercase

文字行高 (line-height) Line height of paragraph is normal. Line height of paragraph is 2.5. Line height of paragraph is 2em. Line height of paragraph is 220%.

span {line-height: 2em; font-size: 28px; border: 1px solid blue;} #em3 {line-height: 3em; font-size: 16px; border: 1px solid blue;}... Line height is 2em. Font size is 28px. Line height is 3em. Font size is 16px.

第一行文字縮排 (text-indent)

文字水平對齊 (text-align)

垂直對齊 (vertical-align)  依據基準線 baseline | sub | super  依據文字高度 text-top | middle | text-bottom  依據行高 top | bottom

vertical-align Example 上一季倉本聰編劇的「風之花園」後，同樣為紀念富士電視台 (Fuji TV) 開台五十 … #preface {background-color:#cfc; line-height:2; font-size:18pt; } #fb1 {vertical-align: middle} #fb2 {vertical-align: text-bottom}

p {line-height: 60px;} img {width: 40px; height: 40px;} baseline. …

字元間距 (letter-spacing) Letter spacing is normal. Letter spacing is 6px. Letter spacing is 0.6em. Letter spacing is -0.1em.

單字間距 (word-spacing) Word spacing is normal. Word spacing is 16px. Word spacing is 1.6em. Word spacing is -0.8em.

White space is normal. White space is pre. White space is nowrap. White space is nowrap. White space is nowrap. White space is pre-wrap. White space is pre-wrap. White space is pre-wrap. White space is pre-line. White space is pre-line. White space is pre-line. 空白字元 (white-space)