chapter 3 css & css3 อ. ยืนยง กันทะเนตร...
TRANSCRIPT
CHAPTER 3CSS & CSS3
อ. ยื�นยืง กั�นทะเนตรคณะเทคโนโลยื�สารสนเทศและกัารส��อสาร
มหาวิ�ทยืาล�ยืพะเยืา
1
Content
• CSS Introduction• CSS Syntax• CSS Selectors• CSS How To...• CSS Background• CSS Text• CSS Font
2
Content
• CSS Links• CSS Tables• CSS Border• CSS Margin• CSS Padding• CSS Display and Visibility• CSS Float• CSS3
3
CSS Introduction
What is CSS?• CSS stands for Cascading Style Sheets• CSS defines how HTML elements are to be displayed• Styles were added to HTML 4.0 to solve a problem• CSS saves a lot of work• External Style Sheets are stored in CSS files
4
CSS Syntax
CSS Syntax
Examplep {
color: red;/* This is a single-line comment */
text-align: center;}
5
CSS Selectors
CSS SelectorsCSS selectors allow you to select and manipulate HTML
elements.CSS selectors are used to "find" (or select) HTML
elements based on their id, class, type, attribute, and more.
6
The element Selectorp {
text-align: center; color: red;
}
CSS Selectors (cont.)
The id Selector• The id selector uses the id attribute of an HTML element to
select a specific element.• An id should be unique within a page, so the id selector is
used if you want to select a single, unique element.
Example#para1 { text-align: center; color: red;} /*Do NOT start an ID name with a number!*/
7
CSS Selectors (cont.)
The class Selector• The class selector selects elements with a specific class
attribute.• To select elements with a specific class, write a period
character, followed by the name of the class:
Example.center { text-align: center; color: red;}/*Do NOT start an class name with a number!*/ 8
Or Examplep.center { text-align: center; color: red;}
CSS Selectors (cont.)
Grouping Selectors
h1 { text-align: center; color: red;}
h2 { text-align: center; color: red;}
p { text-align: center; color: red;} 9
Grouping Selectors
h1, h2, p { text-align: center; color: red;}
CSS How To...
Three Ways to Insert CSS• External style sheet• Internal style sheet• Inline style
10
External Style Sheet<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
CSS How To... (cont.)
Internal Style Sheet<head>
<style>body {
background-color: linen;}
h1 { color: maroon; margin-left: 40px;
} </style>
</head>11
CSS How To... (cont.)
Inline Styles
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
12
Multiple Styles Will Cascade into OneStyles can be specified:• in an external CSS file• inside the <head> section of an HTML page• inside an HTML element
CSS How To... (cont.)Multiple Styles Will Cascade into One (cont.)<head><link rel="stylesheet" type="text/css" href="mystyle.css"><style>body {background-color: linen;}</style></head><body style="background-color: lightcyan">
<h1>Multiple Styles Will Cascade into One</h1>
</body>13
?
CSS BackgroundBackground Color• The background-color property specifies the background color
of an element.
Examplebody { background-color: #b0c4de; }
With CSS, a color is most often specified by:• a HEX value - like "#ff0000"• an RGB value - like "rgb(255,0,0)"• a color name - like "red"
14
CSS BackgroundBackground ImageExamplebody { background-image: url("bgdesert.jpg"); }
15
Background Image - Repeat Horizontally or VerticallyExamplebody { background-image: url("gradient_bg.png"); background-repeat: repeat-x;}
CSS BackgroundBackground Image - Set position and no-repeatExamplebody { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top;}
16
Background - Shorthand propertyExamplebody { background: #ffffff url("img_tree.png") no-repeat right top;}
CSS TextText ColorWith CSS, a color is most often specified by:• a HEX value - like "#ff0000"• an RGB value - like "rgb(255,0,0)"• a color name - like "red“Example
h1 { color: #00ff00; }
17
Text AlignmentExample
h1 { text-align: center; }p { text-align: right; }p.test { text-align: justify; }
CSS FontFont FamilyNote: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".Examplep { font-family: "Times New Roman", Times, serif;}
18
Font Style• normal - The text is shown normally• italic - The text is shown in italics• oblique - The text is "leaning" (oblique is very similar to italic,
but less supported)
CSS Font (cont.)Font Style (cont.)Examplep.normal { font-style: normal;}
p.italic { font-style: italic;}
p.oblique { font-style: oblique;}
19
CSS Font (cont.)Font Size
- Set Font Size With Pixelsh1 {
font-size: 40px;}
- Set Font Size With Emh1 {
font-size: 2.5em; /* 40px/16=2.5em */}
Use a Combination of Percent and Embody { font-size: 100%; }h1 { font-size: 2.5em; }
20
CSS LinksStyling LinksThe four links states are:• a:link - a normal, unvisited link• a:visited - a link the user has visited• a:hover - a link when the user mouses over it• a:active - a link the moment it is clicked
Examplea:link { color: #FF0000; }a:visited { color: #00FF00; }a:hover { color: #FF00FF; }a:active { color: #0000FF; }
21
CSS Links (cont.)Text DecorationExample
a:link { text-decoration: none; }a:visited { text-decoration: none; }a:hover { text-decoration: underline; }a:active { text-decoration: underline; }
22
Background ColorExample
a:link { background-color: red; }a:visited { background-color: blue; }a:hover { background-color: green; }a:active { background-color: black; }
CSS TablesTable BordersExampletable, th, td { border: 1px solid black;}
23
Collapse BordersExampletable { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
CSS Tables (cont.)Table Width and HeightExampletable { width: 100%; }th { height: 50px; }
24
Horizontal Text AlignmentExampleth { text-align: left; }
Vertical Text AlignmentExampletd { height: 50px; vertical-align: bottom; }
CSS Tables (cont.)Table PaddingExampletd { padding: 15px; }
25
Table ColorExampletable, td, th { border: 1px solid green;}th { background-color: green; color: white;}
CSS BorderBorder WidthExamplep.one { border-style: solid; border-width: 5px;}
26
Border ColorExamplep.two { border-style: solid; border-color: #98bf21;}
Border - Individual sidesExamplep { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;}
Border - Shorthand propertyExamplep { border: 5px solid red;}
CSS MarginMargin - Individual sidesExamplep { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px;}
27
Margin - Shorthand propertyExamplep { margin: 100px 50px;}
CSS Margin (cont.)The margin property can have from one to four values.• margin: 25px 50px 75px 100px;
– top margin is 25px– right margin is 50px– bottom margin is 75px– left margin is 100px
• margin: 25px 50px 75px;– top margin is 25px– right and left margins are 50px– bottom margin is 75px
• margin: 25px 50px;– top and bottom margins are 25px– right and left margins are 50px
• margin: 25px;– all four margins are 25px
28
CSS PaddingPadding - Individual sidesExamplep { padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px;}
29
Padding - Shorthand propertyExamplep { padding: 25px 50px;}
CSS Padding (cont.)The padding property can have from one to four values.• padding: 25px 50px 75px 100px;
– top padding is 25px– right padding is 50px– bottom padding is 75px– left padding is 100px
• padding: 25px 50px 75px;– top padding is 25px– right and left paddings are 50px– bottom padding is 75px
• padding: 25px 50px;– top and bottom paddings are 25px– right and left paddings are 50px
• padding: 25px;– all four paddings are 25px
30
CSS Display and VisibilityHiding an Element - display:none or visibility:hiddenvisibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout:
Exampleh1.hidden { visibility: hidden;}
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:
Exampleh1.hidden { display: none;}
31
CSS FloatHow Elements FloatElements are floated horizontally, this means that an element can only be floated left or right, not up or down.
Exampleimg { float: right;}
32
Floating Elements Next to Each OtherExample.thumbnail { float: left; width: 110px; height: 90px; margin: 5px;}
Turning off Float - Using ClearExample.text_line { clear: both;}
CSS3CSS3 Modules• Selectors• Box Model• Backgrounds and Borders• Image Values and Replaced Content• Text Effects• 2D/3D Transformations• Animations• Multiple Column Layout• User Interface
33
CSS3 Rounded CornersCSS3 Rounded CornersExample• #rcorners1 {
border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; }
34
CSS3 Rounded Corners (cont.)CSS3 Rounded Corners1. Four values - border-radius: 15px 50px 30px 5px:
2. Three values - border-radius: 15px 50px 30px:
3. Two values - border-radius: 15px 50px:
35
CSS3 BackgroundsCSS3 Multiple Backgrounds#example1 { background-image: url(pic1.gif), url(pic2.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat;}OR#example1 { background: url(pic1.gif) right bottom no-repeat, url(pic2.gif) left top repeat;}
36
CSS3 BackgroundsCSS3 Multiple Backgrounds#example1 { background-image: url(pic1.gif), url(pic2.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat;}OR#example1 { background: url(pic1.gif) right bottom no-repeat, url(pic2.gif) left top repeat;}
37
CSS3 ColorsCSS3 ColorsCSS supports color names, hexadecimal and RGB colors.In addition, CSS3 also introduces:• RGBA colors• HSL colors• HSLA colors• opacity
38
CSS3 Colors (cont.)RGBA Colors#p1 { background-color: rgba(255, 0, 0, 0.3);}
39
HSL Colors#p1 { background-color: hsl(120, 100%, 50%); } /* green */
HSLA Colors#p1 { background-color: hsla(120, 100%, 50%, 0.3); } /* green with opacity */
Opacity#p1 { background-color: rgb(255,0,0); opacity:0.6;} /* red with opacity */
CSS3 GradientsCSS3 Linear GradientsSyntaxbackground: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Top to Bottom (this is default)Example#grad { background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, blue); /* Standard syntax */}
40
CSS3 Gradients (cont.)CSS3 Linear Gradients (cont.)
Linear Gradient - Left to RightExample#grad { background: linear-gradient(to right, red, blue); /* Standard syntax */}
Linear Gradient – Diagonal#grad { background: linear-gradient(to bottom right, red, blue); /* Standard syntax */} 41
CSS3 Shadow EffectsText shadow effect!h1 { text-shadow: 2px 2px; }
42
Text shadow effect!h1 { text-shadow: 2px 2px red; }
Text shadow effect!h1 { text-shadow: 2px 2px 5px red; }
Text shadow effect!h1 { color: white;text-shadow: 2px 2px 5px red; }
CSS3 Shadow Effects (cont.)CSS3 box-shadow Propertydiv { box-shadow: 10px 10px; }
43
Text shadow effect!h1 { box-shadow: 10px 10px grey; }
Text shadow effect!h1 { box-shadow: 10px 10px 5px grey; }
CSS3 TextCSS3 Text OverflowExamplep.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; }
p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } 44
CSS3 Text (cont.)CSS3 Word WrappingExamplep { word-wrap: break-word;}
45
CSS3 Word BreakingExamplep.test1 { word-break: keep-all;}
p.test2 { word-break: break-all;}
CSS3 Web FontsUsing The Font You WantExample@font-face { font-family: myFirstFont; src: url(sansation_light.woff);}
div { font-family: myFirstFont;}
46
CSS3 2D & 3D TransformsCSS3 2D Transforms• translate()• rotate()• scale()• skewX()• skewY()• matrix()
47
CSS3 3D Transforms• rotateX()• rotateY()• rotateZ()
CSS3 TransitionsCSS3 TransitionsCSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.
Example: Mouse over the element below to see a CSS3 transition effect
48
CSS3 AnimationsCSS3 AnimationsCSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
49
CSS3 Multiple ColumnsCSS3 Multi-column Layout
50
CSS3 User InterfaceCSS3 Resizing
51
CSS3 Box SizingCSS3 Box SizingThe CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.
52
53
THE END