Cascading Style Sheets

Cascading Style Sheets (CSS)
Cascading Style Sheets let you control the display characteristics of your web site. In
CSS, style rules express the style characteristics for an HTML element. A set of style
rules is called a style sheet. A style rule is composed of two part: a selector and a
declaration. The style rule expresses the style information for an element. The selector
determines the element to which the rule is applied. The declaration details the exact
property values.
Style rule syntax
h1{color:red;}
selector declaration value

property
The property is a quality or characteristic such as color, font, size or margin followed by a
colon. The value is the precise specification of the property such as red for color, 125%
for font size or 30 px (pixels) for margin followed by a semicolon
Combining CSS Style Rules with HTML

You can combine CSS rules with HTML code in 3 ways:
1. The style attribute
2. The <style> element
3. An external style sheet
1. Using the style attribute

Ex. <h1 style = color:blue>Sample text </h1>
You use the style attribute to override a style that was set at a higher level in the
document. This method only affects one instance of an element in the document.
2. Using the style element

The <style> element is always contained in the <head> section of the document. Style
rules contained in the <style> element only affect the document in which they reside.
Ex.
<head>
<title>Sample Text</title>
<style type =text/css>
h1{color:red;}
</style> </head>
The value text/css defines the style language as Cascading Style Sheets. Although not
required, the type attribute should always be included in all of your <style> elements for
future compatibility.
3. Using External Style Sheets

Placing style sheets in an external document lets you specify rules for multiple web
pages. Using external style sheets lets you control the styles for an entire web site with
one style sheet file. An external style sheet is simply a text document that contains the
style rules. External style sheets have an extension of .css. The style sheet file does not
contain any HTML code, just CSS style rules because the style sheet is not an HTML
document. It is not necessary to use the <style> element in an external style sheet. To
link to an external style sheet, add the <link> element. The <link> element lets you
establish document relationships. It can only be used within the <head> section of a
document.
Ex.
<head>
<title>Sample text></title>
<link href=styles.css rel=stylesheet type=text/css>
</head>
The <link> element in the example tells the browser to find the specified style sheet. The
href attribute states the relative URL of the style sheet. The rel attribute specifies the
relationship between the linked and current documents. The browser displays the web
pages based on the CSS display information. The advantage of the external style sheet is
that you can state the style rules in one document and affect all the pages on a web site.
When you want to update a style, you only have to change the style rule once in the
external style sheet.
Advanced Selection Techniques

1. class attribute
2. id attribute
3. <div> elements
4. pseudo-class and pseudo-element selectors
5. universal selector
1. The class attribute lets you write rules, give them a name and then supply that name to
any elements you choose. You can use class with any HTML element because it is a core
attribute. The core attributes are id, class, style and title and they apply to all HTML
elements. To apply a style rule to an element, you can add the class attribute to the
element and set it to the name you have specified. To create a class, declare a style rule.
The period (.) flag character indicates that the selector is a class selector
Ex. .test{color:blue; margin:30px;} //class name is test
The class attribute lets you select elements with a greater precision.
Ex. p{font-size:.85%;}
The example rule above set all <p> elements in the document to a font size of 85%. You
can then create a class that can be applied to a particular <p> element.
Ex.
.special{font-weight:bold; font-family:sans-serif;}
To apply the class to a <p> element:
<p class = special>This text is will have a different style compared to the next one</p>
<p> The text here has no class attribute defined and is therefore different compared to the
text where a class named special is applied</p>
2. Using the id attribute selector
The id attribute, like the class attribute is an HTML core attribute. The difference
between id and class is that id refers only to one instance of the id attribute value within
a document. This allows you to specify an id value and apply it to one unique element in
a document.
Ex.
#preface{font-weight:bold; font-size:125%;} //id name is preface
The id selector uses a # sign flag character instead of the period(.) used in the class
selector. You can then apply the id value to the appropriate element in the document
Ex.
<p id=preface>The text here is applied with the preface id attribute</p>
3. Using the <div> element

The <div> (division) let you specify logical divisions within a document that have their
own name and style properties. You can use the <div> with the class attribute to create
customized block-level attributes. Like other block-level elements, <div> contains a
leading and trailing line break. However, unlike other block-level elements, <div>
contains no additional white space around the element. You can set the margin or
padding to any value that you want.
Ex. To create a customized division, declare it with a class or a selector in the style rule.
div.column{width:200; height:auto; padding:15x; border:thin solid;} //class name is
column
To apply this rule, specify the <div> element in the document then use the class attribute
to specify the exact type of division.
<div class =column> This division displays as a column of text in the browser window.
This is one of the uses of the div element as a page layout tool with css.</div>
End of css lecture
Displaying Errors
PHP can be set to give you feedback if it encounters problem. Whether it does so is
based on the display_errors setting in PHPs configuration file(php.ini) In current
versions of PHP, this setting is disabled so errors generated by a script result in a blank
screen.
To have PHP display errors, you can turn display_errors back on for a particular script
Ex. ini_set(display_errors,1);
The ini_set() function allows a script to temporarily override a setting in PHPs

configuration file. In the above example, 1 sets the display_error setting to on.
Error Reporting
PHP Error types
Type Description Example
Notice Nonfatal problem that may or may not be Referring to a variable that
indicative of a problem has no value
Warning Nonfatal error that is most likely problematic Passing the wrong type of
parameter to a function
Parse Fatal error caused by a syntactical mistake Omission of a semicolon or
error an imbalance of quotation
marks, braces or parenthesis
Error A general fatal error Memory allocation problem
You can determine what errors PHP reports on using the error_reporting() function. The
function takes either a number or a constant(a nonquoted string with a predetermined
meaning) to adjust the levels
Ex. error_reporting(0); //turn off entirely
error_reporting(E_ALL); // Report everything
eror_reporting(E_ALL & ~E_NOTICE); //see all errors messages except notices
Using Constants
Constants are specific data type in PHP. Unlike variables, they retain their initial value
throughout the course of a script. You cant change the value of a constant once it has
been set. To create a constant, you use the define()
Ex. define(CONSTANT_NAME,constant_value)
define(TITLE,Welcome to My Home Page);
By convention, constant names are written using capital letters and they do not use $ like
ordinary variables. Constants cannot be printed using single or double quotation marks as
in : printTitle is TITLE ;
or print Title is TITLE;
instead, you use concatenation or multiple print statements like

print Title is . TITLE;
Using Date and Time

Character Meaning Example
Y Year as 4 digits 2010
y Year as 2 digits 10
n Month as 1 or 2 digits 8
m Month as 2 digits 08
F Month August
j Day of the month as 1 9
or 2 digit
d Day of the month as 2 09
digits
l Day of the week Monday
D Day of the week in 3 Mon
letters
t No. of days in a month 31
g Hour: 12-hour format 6
as 1 or 2 digits
G Hour: 24-hour format 18
as 1 or 2 digits
h Hour: 12-hour format 06
as 2 digits
H Hour: 24-hour format 21
as 2 digits
i Minutes 30
s Seconds 10
a Am or pm pm
A Am or pm PM
$today = date('F d, Y');

$now = date('h:i:s a');
print "Today is $today";
print "<br>It is now $now";
output
Today is August 09,2010
It is now 01:30:15 pm
Using isset()
To determine if the form has been submitted, you can check whether the submit variable
is set (which means the submit button has been clicked). To make a page both display
and handle a form, use a conditional:
if( isset($_POST[submit]))
{//handle the form }
else
//display the form

Cascading Style Sheets

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cascading Style Sheets

Hochgeladen von

Copyright:

Verfügbare Formate

Cascading Style Sheets (CSS)

selector declaration value

Combining CSS Style Rules with HTML

1. Using the style attribute

2. Using the style element

3. Using External Style Sheets

Advanced Selection Techniques

3. Using the <div> element

The ini_set() function allows a script to temporarily override a setting in PHPs

instead, you use concatenation or multiple print statements like

Using Date and Time

$today = date('F d, Y');

Das könnte Ihnen auch gefallen