Change the apparence of the document easily without changing the HTML code Change style of a page easily environment... Link CSS with HTML HTML document contains content of a web p
Trang 1Chapter 4: CSS
Trang 3Style sheet
Style sheet describes how documents are
presented on screens, in print, or perhaps how they are pronounced
Separate structure and presentation
W3C has actively promoted the use of style
Trang 4Advantage of StyleSheet
content and simple structure
Change the apparence of the document easily without changing the HTML code
Change style of a page easily
environment
Trang 5Example of page using stylesheet
Trang 6A document with different style
Trang 7A document with different style
Trang 8A document with different style
Trang 9Document without style
Trang 10Link CSS with HTML
HTML document contains content of a web
page
CSS document contains the presentation style
3 ways for defining a style for a HTML
document
link it with the HTML document
Trang 11Link CSS with HTML: Inline
In-line styles are plonked straight into the
HTML tags using the style attribute.
<p style="color: red">text</p>
it
presentation dependant should be
avoided
Trang 12Link CSS with HTML: Internal
Internal styles are used for the whole page
Styles are defined inside the head section, surrounded by <style>
Better than in-line styles, the styles and HTML code are more
independent by still include in one document
Trang 13Link CSS with HTML: External
CSS document
HTML document
Trang 14Syntax of CSS
CSS contain rules that defines styles for HTML document
presentation of the content
It is recommended that the HTML tags serving for the presentation such as <font>, <b> , <i> should be not be used
Trang 20object that has the given class
Trang 21<h1 class="important> Tieu de quan trong </h1>
<p class="important> Vi du mot doan quan trong </p>
<p class=“brazil”> Mau co Brazil </p>
<p> Day la mot doan khac </p>
Trang 22for all objects
* {attribute: value; }
*{font-size: large;}
Trang 23Selector Pseudo-class
effects to a selector when there is user interaction
Syntax
Ex
Trang 25Selector Pseudo-class
a:link { color: red }
a:visited { color: green }
a:hover { background-color: yellow } a:active { background-color: pink }
Trang 26/*This is another comment */
color: black; font-family: arial }
Trang 27CSS attributes for text
Trang 28CSS attributes for background
Trang 29CSS attributes for font
Trang 30<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
Trang 31CSS attributes for list
Trang 33CSS attributes for table
Trang 34<html>
<head>
<style type="text/css">
table.coll { border-collapse: collapse }
table.sep { border-collapse: separate }
Trang 35Frame model
Some HTML elements
are displayed in a frame
Day la mot doan van ban nam trong khung No cach border cua khung cac doan padding Day la mot doan van ban nam trong khung No cach border cua khung cac doan padding.
Top margin
paddin g
bottom margin
Khung
Trang 36Frame model- Border
color and style
Width : width of the border
Trang 37Frame model- Border
Example
{ border: thick solid green;
}
width style color
Trang 38Frame model- Border
Characteristic of the border can be defined with different attribute:
Trang 39Frame model - Border
displayed differently
corresponding to 4 edges of the border
Ex:
p.four_borders
{
border-width: thick;
border-style: solid dashed dotted double;
border-color: green blue red yellow;
}
Trang 40Frame model- Margin
by %.
Trang 41Frame model- Margin
Trang 42Frame model - Padding
Padding define the distance between the
content and the border
Attributes of padding are defined similarly to
margin, howerverthe value cannot be
Trang 43Frame model - Alignment
Trang 44Frame model - Indentation
at the beginning of the line
Trang 45Frame model- line-height
line-height defines the height of a line including the height of its characters and the space with another line
Trang 46Frame model – width, height
height of a frame
Number of pixel: 300px
Cm : 5cm
%, relative values with the width or the height
of browser window Ex: 50%
Trang 48Frame model: Float
Float defines how a HTML element should be aligned in comparison with its parent.
#section2 { float: right;
width: 300px;
background-color: yellow;
}
Trang 49Frame model: Float