- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Introduction to HTML / CSS (part 2) презентация
Содержание
- 1. Introduction to HTML / CSS (part 2)
- 2. Syntax coding standards
- 3. HTML formatting Indents tags in one row lowercase break
- 4. HTML formatting Indents tags in one row lowercase break
-
5.
HTML formatting link
text link
text - 6. HTML formatting link text
- 7. HTML formatting link text
- 8. HTML/CSS Comments
- 9. HTML/CSS Comments /*
- 10. HTML/CSS Comments Conditional
- 11. HTML Character Entities
- 12. CSS Syntax
- 13. Selector CSS Syntax
- 16. The Cascading Order
- 17. The Cascading Order
- 18. CSS - Priority rules
- 19. CSS - selectors weights The weight
- 20. CSS - selectors weights The weight
- 21. CSS - Priority div { background:red; } div { background:yellow; }
- 22. CSS - Priority div { background:red; } div { background:yellow; } /* Win */
- 23. CSS - Priority div { background:red; }
- 24. CSS - Priority div { background:red; }
- 25. CSS - Priority div { background:red; }
- 26. CSS - Priority div { background:red; }
- 27. CSS - Priority div { background:red; }
- 28. CSS - Priority div { background:red; }
- 29. CSS - Priority div { background:red; }
- 30. CSS - Priority div { background:red; }
- 32. Class naming
- 33. Class name (list)
- 34. Class name (list) .bar .navbar
- 35. Class name (list) .bar .navbar
- 36. Class name (form)
- 37. Class name (form) .login (.login-form) .search (.search-form)
- 38. Class name (blog) date entry-title entry-content comments category more
- 39. Class name (blog) .post .entry-title .entry-content
- 40. Class name (blog) .post .entry-title .entry-content
- 41. Class name (other) .box .block .container .section
- 42. Page layouts
- 43. Fixed Page Layout
- 44. Flexible Page Layout
- 45. Responsive Page Layout
- 46. Page Layout types
- 47. One column fixed width layout
- 48. One column fixed width layout
- 49. One column liquid layout
- 50. Two column fixed width
- 51. Two column fixed width
- 52. Two column liquid layout
- 53. Two column liquid layout
- 54. Content liquid and column fixed #container {
- 55. Vertical aligning
- 56. Vertical aligning
- 57. CSS length units
- 58. Using the Em Unit * {font-size: 100.01%;}
Слайд 10HTML/CSS Comments
///// -->
Conditional Comments
/* CSS comment here */
/*
multi-line
comment here
*/
Слайд 15
color:
blue;
Selector
Property
h1 {
color: blue;
text-align: center;
font-size: 20px;
}
CSS Syntax
Value
{
}
Declaration
Слайд 16The Cascading Order
CSS - Priority rules
Browser default
External style sheet
Internal style sheet
Inline
style
Слайд 17The Cascading Order
CSS - Priority rules
Internal Priorities
Browser default
External style sheet
Internal style
sheet
Inline style
Слайд 19CSS - selectors weights
The weight of a tag is 1
The weight
of a class is 10.
The weight of an ID is 100.
The weight of a style attribute is 1000.
The weight of an ID is 100.
The weight of a style attribute is 1000.
Слайд 20CSS - selectors weights
The weight of a tag is 1
The weight
of a class is 10.
The weight of an ID is 100.
The weight of a style attribute is 1000.
The weight of an ID is 100.
The weight of a style attribute is 1000.
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#list {...} /* a=1 b=0 c=0 -> specificity = 100 */
a represents the number of #id attributes in the selector
b represents the number of class attributes
c represents the number of tag names
Слайд 23CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; }
div { background:yellow; }
Слайд 24CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
Слайд 25CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
html body div { background:red; }
body div { background:yellow; }
Слайд 26CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
html body div { background:red; } /* Win */
body div { background:yellow; }
Слайд 27CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
html body div { background:red; } /* Win */
body div { background:yellow; }
.item { background:blue; }
body div { background:red; }
div { background:yellow; }
Слайд 28CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
html body div { background:red; } /* Win */
body div { background:yellow; }
.item { background:blue; } /* Win */
body div { background:red; }
div { background:yellow; }
Слайд 29CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
html body div { background:red; } /* Win */
body div { background:yellow; }
.item { background:blue; } /* Win */
body div { background:red; }
div { background:yellow; }
body div.item { background:blue; }
#item { background:red; }
html body div { background:yellow; }
Слайд 30CSS - Priority
div { background:red; }
div { background:yellow; } /* Win
*/
body div { background:red; } /* Win */
div { background:yellow; }
html body div { background:red; } /* Win */
body div { background:yellow; }
.item { background:blue; } /* Win */
body div { background:red; }
div { background:yellow; }
body div.item { background:blue; }
#item { background:red; } /* Win */
html body div { background:yellow; }
Слайд 34Class name (list)
.bar
.navbar
.navigation
.main-nav
.add-nav
.breadcrumbs
.tags
.paging
.tools
.social
.langs
Слайд 35Class name (list)
.bar
.navbar
.navigation
.main-nav
.add-nav
.breadcrumbs
.tags
.paging
.tools
.social
.langs
.topic-list
.item-list
.product-list
.article-list
.recent-articles
.news
.news-list
Слайд 37Class name (form)
.login (.login-form)
.search (.search-form)
.subscribe
.newsletter
.details-form
.profile-form
.information-form
.feedback-form
.vote
.comment-form
.some-form
Слайд 39Class name (blog)
.post
.entry-title
.entry-content
.meta
.updated
.published
.date
.discussion
.comments
.list-comments .add-comments
.more
.tags
.category
date
entry-title
entry-content
comments
category
more
Слайд 40Class name (blog)
.post
.entry-title
.entry-content
.meta
.updated
.published
.date
.discussion
.comments
.list-comments .add-comments
.more
.tags
.category
date
entry-title
entry-content
comments
category
more
Слайд 41Class name (other)
.box
.block
.container
.section
.item
.products
.items
.books
.calendar
.visual
.promobox
.banner
.photo
.align-left
.align-right
.align-center
.active
.selected
.logo
.slogan
.copyright
.by
.all
.more
.another .details
.warning
.error-msg
Слайд 51Two column fixed width
#container {
margin:
0 auto;
width: 960px;
}
#main { overflow: hidden;
}
#content { float: left;
width: 600px;
}
#sidebar { float: right;
width: 320px;
}
width: 960px;
}
#main { overflow: hidden;
}
#content { float: left;
width: 600px;
}
#sidebar { float: right;
width: 320px;
}
Слайд 52Two column liquid layout
#container {
margin:
0 30px;
}
#main { overflow: hidden;
}
#content { float: left;
width: 65%;
}
#sidebar { float: right;
width: 30%;
}
}
#main { overflow: hidden;
}
#content { float: left;
width: 65%;
}
#sidebar { float: right;
width: 30%;
}
Слайд 53Two column liquid layout
#container {
margin:
0 30px;
}
#main { overflow: hidden;
}
#content { float: left;
width: 65%;
}
#sidebar { float: right;
width: 30%;
}
}
#main { overflow: hidden;
}
#content { float: left;
width: 65%;
}
#sidebar { float: right;
width: 30%;
}
Слайд 54Content liquid and column fixed
#container {
margin: 0 30px;
}
#main {
overflow: hidden;
}
#content {
float:
left;
width: 100%;
}
.content-holder" {
margin-right: 360px;
}
#sidebar { float: right;
width: 320px;
margin-left: -320px;
}
width: 100%;
}
.content-holder" {
margin-right: 360px;
}
#sidebar { float: right;
width: 320px;
margin-left: -320px;
}
Слайд 56Vertical aligning
#container {
display: table;
}
.page-holder
{
display: table-cell;
vertical-align: middle;
}
vertical-align: middle;
}
Слайд 58Using the Em Unit
* {font-size: 100.01%;}
html {font-size: 62.5%;}
body {font:1em/1.2em Arial, sans-serif;}
1em
= 10px
* {font-size: 100.01%;}
html {font-size: 62.5%;}
body {font:1em Arial, sans-serif;}
.box{
fon-size: 1.2em; // 12px
}
.box p {
font-size: 1.166em; // 14px (14/12=1.666)
}
text
