Podstawy tworzenia stron WWW
Download
Report
Transcript Podstawy tworzenia stron WWW
Cascading Style Sheets
(CSS)
Bartosz Sakowicz
CSS syntax
Basic CSS syntax:
selector { property:value }
E.g.:
P {font-family: Arial}
H1 {font-size: 20pt}
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
CSS syntax(2)
To separate properties and their values from other properties, you
use semicolon:
<p style="font-size: 20pt; font-weight: bold; background: green;
color: red">Red font 20pt, bolded, on the green background</p>
To define the same style for many elements, separate them using
comma:
H1, H2, H3 {font-family:Helvetica; color:yellow}
Inserting styles
Inline style
<p style="font-size: 12pt; font-weight: bold;">Some text</p>
Internal style
<head>
<style type="text/css"><!-body
{margin-left: 2cm; margin-right: 2cm}
P {font-size: 14pt; font-family: Arial, Helvetica; font-weight:
normal}
--></style></head>
Inserting styles(2)
External style sheet:
<head>
<link type="text/css" rel=”stylesheet” href="/style.css">
</head>
It is possible (and quite usual) to use multiple style sheets on the
same page.
Document tree
html
head
title
body
p
form img
input select textarea
•Document tree
•Child
•Descendant
•Parent
•Ascendant
Descendant selector
ul ul li {color:green}
Second list will be green.
H1 H2 B {color: blue}
Child and sibling selectors
Child selector
P>U {color: green}
Nested <u> will be green
Sibling selector
H1 + P{margin-left: +30 mm)
If <h1> and <p> has common parent ….
Attributes selectors
General syntax:
element [atrribute relation value] {style definition }
e.g.:
P [align=right] {color: blue}
Simple attribute selector:
H3 [title] {color: #000000 }
[title] {color: #000000 }
Attributes selectors(2)
Attribute selector with defined value
General syntax:
element [attribute="value"] { style definition } OR:
[attribute="value"] { style definition } OR:
[attribute~="value"] {style definition }
To match the criteria, the „value” can be only a substring of the real
value.
Classes
.class1 {font-family:Arial}
Example usage:
<p class=„class1"> Some text in Arial </p>
Different styles for the same tag:
P
{font-family:
Arial;
font-size:
12pt}
P.notice {font-family: Arial; font-size: 12pt; font-weight: bold}
P.exclamation {font-family: Verdana; font-size: 12pt; color: red}
P.adds {font-family: Arial; font-size: 8pt}
Question
What is the difference between following:
.menu li { properties }
li .menu { properties }
li,.menu { properties }
li.menu { properties }
ID selector
#[label ID] {style definition}
e.g.:
H1#title {color: red}
Example usage:
<h1 id="title">Some text</h1>
Hyperlinks special selectors (pseudo classes)
Hyperlink type
Example definition
Default
A:link {color:blue; background: red}
Visited
A:visited {color:yellow}
Hovered onto link
A:hover {background:yellow; color:red}
Active
A:active {background:blue; color:red}
Paragraph’s special selectors (pseudo elements)
Selector first-line
Ephasising first line of the paragraph:
P:first-line {text-transform: uppercase}
Selector first-letter
Ephasising first letter of the paragraph:
P:first-letter { font-size: 300%; color:blue }
Inheritance
CSS inheritance is based on the Parent-Child model: each Child
element inherits all of his Parent element's styles.
Attention: the child element will inherit all the parent element's
properties only if these properties are inheritable. Inheritance does
not work on all CSS properties (margin, padding and other block
properties).
<table class="arial_font"><tr>
<td>Some text in Arial</td>
<td class="courier_font">Some text in Courier</td>
</tr><tr>
<td> Some text in Arial </td>
<td> Some text in Arial </td>
</tr></table>
Cascading
If some properties have been set for the same selector in different
style sheets, the values will be inherited from the more specific style
sheet.
For example, an external style sheet has these properties for the h3
selector:
h3 { color: red; text-align: left;font-size: 8pt }
And an internal style sheet has these properties for the h3 selector:
h3 { text-align: right; font-size: 20pt}
If the page with the internal style sheet also links to the external
style sheet the properties for h3 will be:
color: red; text-align: right; font-size: 20pt
Fonts
Font families, eg.:
<p style="font-family: Times, serif">Some text</p>
<p style="font-family: Times, 'Times New Roman', 'Times New
Roman CE', serif">Some text</p>
Font styles, eg.:
<p style="font-style: normal">Some text</p>
Available keywords: italic, obligue.
Fonts(2)
Font size, eg.:
a) Defined as keywords:
<p style ="font-size: keyword">Some text</p>
Available keywords: xx-small, x-small, small, medium, large, xlarge, xx-large.
Relative values: larger, smaller
b) In metric units:
<p style ="font-size: 1cm"></p>
Available units: cm, in, mm, pt
c) In percents (relative):
<p style ="font-size: 150%"></p>
Fonts(3)
Font weight, eg.:
<p style ="font-weight: keyword">Some text </p>
Defines boldness.
Available keywords: normal, bold, bolder, lighter, 100, 200, 300,
400, 500, 600, 700, 800, 900
Fonts(4)
Putting many attributes into one definition
Eg.
<p style ="font: small-caps bold 14pt/18pt Times, 'Times New
Roman', serif"> Small caps, bold, 14pt font size, 18 pt space
between lines, Times.</p>
Attributes ordering:
font-style->font-variant->font-weight->font-size->line-height>font-family
Text
Letter spacing, eg.:
<p style="letter-spacing: 3mm">Some text.</p>
Text decoration, eg.:
<a style ="text-decoration: none" href="http://www.dmcs.
pl">Hyperlink not underlined.</a>
Available keywords: underline,overline,line-through.
Text(2)
Text transformation, np:
There are four posiible transformations:
•none,
•capitalize (first letter of each word will be big),
•uppercase (all letters will be big),
•lowercase (all letters will be small).
Eg.:
<p style ="text-transform: capitalize">This is some text.</p>
In the browser we could see:
This Is Some Text.
Text(3)
Text align, np:
<p style ="text-align: right">Right aligned line.</p>
Available keywords: left, right, center, justify
Text(4)
Text indent, eg.:
<p style ="text-indent: 10%">In this paragraph first line will be
indented by 10% according to the page width. In this paragraph
first line will be indented by 10% according to the page width.</p>
In the browser we could see :
In this paragraph first line will be indented by 10%
according to the page width. In this paragraph first line will be
indented by 10% according to the page width.
Colors and backgrounds
Text color, eg.:
<h3 style ="color: #00FF00">Green title </h3>
<table>
<tr>
<td style="color: #FF0000">Red text</td>
</tr>
</ table >
Background color, eg.:
<p style="background-color:
background</p>
blue">Paragraph
on
blue
Image as a background
Backround can be defined as an image:
<h3 style="background-image: url(image.gif)">Title on image
background</h3>
Background repeat (when background is smaller than object):
<h3 style ="background-image: url(image.gif); backgroundrepeat: repeat-x"> Title on image background </h3>
Available keywords: repeat-x (horizontally repeated), repeat-y
(vertically repeated), repeat (horizontally and vertically repeated),
no- repeat (not repeated).
Image as a background(2)
Background attachment
Background can be attached in two ways:
•It can be motionless according to the page (default)
•It can be motionless according to the screen (fixed)
Eg.:
body {background: url(image.gif); background-attachment: fixed}
Image as a background(3)
Background position
Useful, when image is smaller that real background:
background-position: keyword
Available keywords: top, bottom, center, left, right
Or their proper (logical) combination:
background-position: top right.
It is possible also to use measerments units or percentages (counted
from the left top corner of the area):
background-position: 2cm 3cm
background-position: 30% 50%
Toolbars
Attribute name
Description
Scrollbar-Base-Color
?
Scrollbar-Face-Color
?
Scrollbar-Arrow-Color
?
Scrollbar-Highlight-Color
?
Scrollbar-Shadow-Color
?
Scrollbar-Dark-ShadowColor
Scrollbar-3dLight-Color
?
?
Margins
It is possible to define following margins: margin-top, marginbottom, margin-left, margin-right e.g.:
<p style="margin-top: 1cm">Some text</p>
<p style="margin: 2cm"> 2 cm margin from each side</p>
<p style="margin: 2cm 3cm"> 2 cm margin from top and down and
3 cm margin from left and right </p>
<p style="margin: 2cm 3cm 1cm 4cm"> Different margins from
different sides</p>
It is possible to define inside margins (called padding) – by analogy
to margin:
padding-top, padding-bottom, padding-left, padding-right
Borders
border-x-width (x : top, bottom, left, right)
border-color: #ffffff
border-style: none, dotted, dashed, solid, double, groove, ridge,
inset, outset.
Lists
List style
list-style-type:
Available keywords: disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha, none eg.:
<ul style="list-style-type: disc">
<li>First type</li>
<li>Second type</li>
</ul>
Image instead of bullet, eg.:
<ul style="list-style-image: url(dot.gif)">
Width and height
a) width:
<p style="width: 150px"> Some text </p>
b) height:
<p style="height: 150px"> "> Some text. </p>
Absolute positioning
Eg:
Image placed in left top corner of the page:
<div style="position: absolute; left:0px; top:0px">
<img src="image.gif" border="0" alt="Description">
</div>
Relative positioning
Relative positioning moves an element RELATIVE to its original
position:
<SPAN style="position: relative; left: 200px; top: 300px; width:
100px"> Some text</SPAN>
Cursors
Eg:
<img src= "image.gif" border="0" style="cursor:help"
alt= " Description">
Available keywords:
crosshair
pointer
wait
text
default
auto
x-resize – (x: n,w,e,s or logical combination, eg: ne)
Printing web pages
Two possibilities of breaking pages:
page-break-before: always
page-break-after: always
Eg.:
<h1 style="page-break-before: always">Chapter 7</h1>