-
Notifications
You must be signed in to change notification settings - Fork 13
/
03-css-selectors.html
104 lines (94 loc) · 5.65 KB
/
03-css-selectors.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
p { /*styly pro všechny odstavce*/
text-align: justify;
text-align-last: left;
color: navy;
}
.zvyrazneni { /*třída bez ohledu na element*/
color: #f00;
}
p.zvyrazneni2 {
border: 2px dotted red;
}
p.zvyrazneni2::first-letter {
font-size: 200%;
color: maroon;
}
p:last-of-type {
color: fuchsia;
}
a { /*všechny odkazy*/
text-decoration: none;
font-weight: bold;
color: black !important; /*vlastnost s !important lze překrýt jen další vlastností s !important*/
}
a:hover { /*odkazy při najetí myši*/
text-decoration: underline;
}
a#vse {
color: green;
text-decoration: underline;
}
p a { /*odkazy umístěné v odstavcích*/
color: red !important;
text-decoration: underline;
font-style: italic;
}
p:hover {
background: rgba(200, 200, 200, 0.1);
cursor: default;
}
</style>
</head>
<body>
<h1>CSS Selectors</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="zvyrazneni">Fusce tellus odio, dapibus id fermentum quis</span>,
suscipit id erat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed convallis magna eu sem. Integer
imperdiet lectus quis justo. Integer vulputate sem a nibh rutrum consequat. Aenean placerat. Etiam neque. Mauris
suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Etiam
dictum tincidunt diam. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Fusce aliquam vestibulum ipsum. Nullam
lectus justo, vulputate eget mollis sed, tempor sed magna. Aliquam erat volutpat. In convallis. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="zvyrazneni zvyrazneni2">Integer lacinia. Temporibus autem quibusdam <a href="http://google.com">et aut
officiis debitis</a> aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
recusandae. Mauris metus. Vestibulum fermentum tortor id mi. Morbi scelerisque luctus velit. Vivamus luctus
egestas leo. Integer lacinia. Ut tempus purus at lorem. Pellentesque pretium lectus id turpis. Sed elit dui,
pellentesque a, faucibus vel, interdum nec, diam.</p>
<p class="zvyrazneni2">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Curabitur ligula sapien,
pulvinar a vestibulum quis, facilisis vel sapien. Fusce consectetuer risus a nunc. Fusce suscipit libero eget
elit. Integer pellentesque quam vel velit. Aliquam erat volutpat. Praesent vitae arcu tempor neque lacinia
pretium. Nulla non lectus sed nisl molestie malesuada. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Duis pulvinar. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum
in, elit. Nulla pulvinar eleifend sem. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nullam
feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante.
Maecenas sollicitudin. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est.</p>
<p>Nullam dapibus fermentum ipsum. Fusce consectetuer risus a nunc. Donec quis nibh at felis congue commodo. In
rutrum. In dapibus augue non sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor
suscipit diam nulla vel leo. In rutrum. Etiam posuere lacus quis dolor. Donec vitae arcu. Nullam lectus justo,
vulputate eget mollis sed, tempor sed magna. Quisque tincidunt scelerisque libero. Cras elementum. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Mauris tincidunt
sem sed arcu. Mauris dictum facilisis augue. Et harum quidem rerum facilis est et expedita distinctio. Aliquam in
lorem sit amet leo accumsan lacinia. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit
amet enim. Duis risus. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Aliquam ante. Nam sed
tellus id magna elementum tincidunt. Integer pellentesque quam vel velit. Nunc dapibus tortor vel mi dapibus
sollicitudin. Nullam faucibus mi quis velit. Curabitur vitae diam non enim vestibulum interdum. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc auctor. Itaque earum rerum
hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat. Etiam egestas wisi a erat. Nullam dapibus fermentum ipsum. Fusce tellus. Nulla
pulvinar eleifend sem.</p>
<a href="http://vse.cz" id="vse">vse.cz</a> | <a href="http://google.com">google.com</a>
</body>
</html>