Introduction to HTML / CSS (part 6)

Август 1, 2022

Главная
Информатика
Introduction to HTML / CSS (part 6)

Содержание

3. 1 HTML5 Features New Doctype
4. 1 2 HTML5 Features New Doctype Inputs
5. 1 2 HTML5 Features New Doctype Inputs input type: color date datetime datetime-local email month number
6. 1 2 HTML5 Features New Doctype Inputs input type: color date datetime datetime-local email month number
7. 1 2 HTML5 Features New Doctype Inputs input type: color date datetime datetime-local email month number
8. 1 2 4 HTML5 Features New Doctype Inputs input type: color date datetime datetime-local email month
9. 5 HTML5 Features Audio Support
10. HTML5 Features Audio Support Download this file. 5
11. 5 6 HTML5 Features Audio Support Video Support Download this file.
12. 5 6 HTML5 Features Audio Support Video Support Download this file. Your browser is old. Download
13. 5 6 HTML5 Features Audio Support Video Support Download this file. 7 Data Attribute Your browser
14. HTML5 Features Data Attribute: Don't Touch Me h1 { position: relative; } h1:hover { color: transparent;
16. http://css3generator.com/
17. New Features in CSS 3 [attr^=val] value starting with val [attr$=val] value ending with the suffix
18. New Features in CSS 3 [attr^=val] value starting with val [attr$=val] value ending with the suffix
19. New Features in CSS 3 [attr^=val] value starting with val [attr$=val] value ending with the suffix
20. New Features in CSS 3 [attr^=val] value starting with val [attr$=val] value ending with the suffix
21. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; }
22. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; }
23. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; } .bg-transparent{ background-color: rgba(33, 44,
24. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; } .bg-transparent{ background-color: rgba(33, 44,
25. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; } .bg-transparent{ background-color: rgba(33, 44,
26. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; } .bg-transparent{ background-color: rgba(33, 44,
27. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; } .bg-transparent{ background-color: rgba(33, 44,
28. New Features in CSS 3 .shady-text{ text-shadow: 2px 3px 3px #0a0a0a; } .bg-transparent{ background-color: rgba(33, 44,
30. Twitter Bootstrap
31. Save time Customizable Consistency Docs talk! Bootstrap allows for immediate quality work, which makes it great
32. Browser and device support
33. Browser and device support Bootstrap is released under the MIT license. It requires you to include
34. bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├──
35. Bootstrap Template Hello, world! Basic template
36. HTML5 doctype Global settings
37. HTML5 doctype Mobile first Global settings
38. 3 HTML5 doctype Mobile first Normalize.css Global settings
39. 3 4 HTML5 doctype Mobile first Normalize.css Global settings Containers
40. 3 4 HTML5 doctype Mobile first Normalize.css ... ... Global settings Containers
41. 3 4 HTML5 doctype Mobile first Normalize.css ... ... Global settings Containers LESS
42. Grid system (12 columns)
43. Grid system (12 columns)
44. Grid system (12 columns) /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) {
45. Example: Mobile, tablet, desktop
46. Example: Mobile, tablet, desktop .col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4
47. Offsetting columns
48. Offsetting columns .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3
49. Glyphicons
50. Glyphicons Star
51. Glyphicons Star
52. Components Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page
53. Java Script solutions Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel
54. Java Script solutions Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Plugins can
56. Скачать презентацию

Слайд 2

Слайд 3

1
HTML5 Features
New Doctype

Слайд 4

1
2
HTML5 Features
New Doctype

Inputs

Слайд 5

1
2
HTML5 Features
New Doctype

Inputs

input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Слайд 6

1
2
HTML5 Features
New Doctype

Inputs

input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
3
Local

Storage

Слайд 7

1
2
HTML5 Features
New Doctype

Inputs

input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
3
Local

Storage

"localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage."

Слайд 8

1
2
4
HTML5 Features
New Doctype

Inputs

input type:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
3
Local

Storage

"localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage."

Semantic tags

Слайд 9

5
HTML5 Features
Audio Support

Слайд 10

HTML5 Features
Audio Support

Download this file.

Слайд 11

5
6
HTML5 Features
Audio Support
Video Support

/>
Download this file.

Слайд 12

5
6
HTML5 Features
Audio Support
Video Support

/>
Download this file.

Your browser is old. Download this video instead.

Слайд 13

5
6
HTML5 Features
Audio Support
Video Support

/>
Download this file.

Data Attribute

Your browser is old. Download this video instead.

Слайд 14

HTML5 Features
Data Attribute:
Don't Touch Me

h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}

Слайд 15

Слайд 16

http://css3generator.com/

Слайд 17

New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

Слайд 18

New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

.box-rounded{
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

Слайд 19

New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

.box-rounded{
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.box-border{
border-image:url(border-image.png) 100 100 round;
border:30px solid transparent;
}

Слайд 20

New Features in CSS 3
[attr^=val] value starting with val
[attr$=val] value ending

with the suffix val
[attr*=val] value containing the substring val

.box-rounded{
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.box-border{
border-image:url(border-image.png) 100 100 round;
border:30px solid transparent;
}

.shady-block{
-webkit-box-shadow: 5px 10px 5px 7px #444444;
box-shadow: 5px 10px 5px 7px #444444;
}

Слайд 21

New Features in CSS 3
.shady-text{
text-shadow: 2px 3px 3px #0a0a0a;
}

Слайд 22