HTML and CSS. Site layout. Best practices

Июль 21, 2022

Главная
Информатика
HTML and CSS. Site layout. Best practices

Содержание

2. Agenda Knowledge base HTML / CSS basics HTML tags, their attributes CSS specification and possibilities rules
3. Knowledge base TextTextTextTextTextTextTextTextTextTextText TextText TextText Text Text Text TextText TextText
4. Knowledge base Difference between: .style1 .style2 {color: red;} .style1, .style2 {color: green;} .style1.style2 {color: blue;}
5. Knowledge base What does it mean: .style1 {background: url(gfx/logo.png) -20px 0px;}
6. HTML / CSS basics – HTML tags, their attributes Content , , ,… , , ,…
7. HTML / CSS basics – CSS specification and possibilities span {color: red;} .classname {color: blue;} a:hover
8. HTML / CSS basics – CSS rule dependencies div span {color: red;} div .c1 #c2 {color:
9. HTML / CSS basics – CSS rules weight !important; .class {color: #454545 !important;} Inline style; script
10. Best practices Use clean and clear HTML with CSS: avoid inline styling; try to avoid tag;
11. Best practices Set classes, nevertheless it looks unnecessary Browser specific content; using classes instead of hacks
12. Best practices Use multiple classes for one elements: Abstract classes {float: left;}, {position: relative;}, {display: none;}
13. References http://www.w3schools.com http://google.com
15. Скачать презентацию

Слайд 2

Agenda
Knowledge base
HTML / CSS basics
HTML tags, their attributes
CSS specification and possibilities
rules

for tags, classes, pseudoclasses
rule dependencies
‘elephant vs. whale’
Best practices
Wrapping elements
Setting classes
Using names
Classes tricks

Слайд 3

Knowledge base
TextTextTextTextTextTextTextTextTextTextText
TextText
TextText
Text
Text

Text
TextText

TextText

Слайд 4

Knowledge base
Difference between:
.style1 .style2 {color: red;}
.style1, .style2 {color: green;}
.style1.style2 {color: blue;}

Слайд 5

Knowledge base
What does it mean:
.style1 {background: url(gfx/logo.png) -20px 0px;}

Слайд 6

HTML / CSS basics – HTML tags, their attributes

Content

,
, ,…
,

,…
,

Block elements and inline elements
http://www.w3schools.com/html/html_elements.asp
http://www.w3schools.com/html/html_attributes.asp

HTML / CSS basics – CSS specification and possibilities
span {color: red;}
.classname {color: blue;}
a:hover

{color: orange;}
#id {color: yellow;}
http://www.w3schools.com/css/css_id_class.asp

HTML / CSS basics – CSS rule dependencies
div span {color: red;}
div .c1 #c2

{color: blue;}
div>span {color: yellow;}
#id1, #id2 {color: yellow;}
.c1.c2 {color: yellow;}
.c1.c2 a:hover {color: yellow;}
http://www.w3schools.com/css/css_grouping_nesting.asp

HTML / CSS basics – CSS rules weight
!important; .class {color: #454545 !important;}
Inline style; script

set style
CSS definitions comlination:
tagname = 1
classname = 10
id = 100
#id.class a span.i {font-style: italic;}
Browser/OS defaults

Best practices
Use clean and clear HTML with CSS:
avoid inline styling;
try to

tag;
use clear names for id’s and classes;
Wrap elements and functional parts in

for simple and clear styling:
Divide et impera!
Progressive JPEG method

Best practices
Set classes, nevertheless it looks unnecessary
Browser specific content; using classes

instead of hacks
Use JS for Browser determination
for ie.css
Easy restyling/rebranding
Easy access to abstractions and enhance styling possibilities

Best practices
Use multiple classes for one elements:
Abstract classes {float: left;}, {position: relative;},

{display: none;}
Similar elements styling
TextTextTextTextTextTextTextText example
form elements event-depended styling
Hover styling (a img {behavoir_1} / a:hover img {behavoir_2})
Menus, events, notifications, etc. – it’s web 2.0, man!

References
http://www.w3schools.com
http://google.com