Compare commits
3 Commits
7fca9806a3
...
d697894fa6
Author | SHA1 | Date |
---|---|---|
|
d697894fa6 | 10 months ago |
|
17f32d9809 | 10 months ago |
|
1cb357d5e9 | 10 months ago |
@ -0,0 +1,30 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<meta name="viewport" content="width=device-width"/> |
||||||
|
<style> |
||||||
|
#text1 { |
||||||
|
color: red; |
||||||
|
background-color: black; |
||||||
|
} |
||||||
|
|
||||||
|
#text2 { |
||||||
|
color: #ff0000; |
||||||
|
background-color: #000000; |
||||||
|
} |
||||||
|
|
||||||
|
#text3 { |
||||||
|
color: rgb(255, 0, 0); |
||||||
|
background-color: rgb(0, 0, 0); |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h2 id="text1">Color Name: red</h2> |
||||||
|
<hr> |
||||||
|
<h2 id="text2">Hex(#): #ff0000</h2> |
||||||
|
<hr> |
||||||
|
<h2 id="text3">RGB: rgb(255, 0, 0)</h3> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,35 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<meta name="viewport" content="width=device-width"/> |
||||||
|
<style> |
||||||
|
h1 { |
||||||
|
font-family: "Times New Roman"; |
||||||
|
color: blue; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.text1 { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.text2 { |
||||||
|
font-weight: bold; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.text3 { |
||||||
|
text-align: right; |
||||||
|
font-size: 2em; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h1>Times New Roman</h1> |
||||||
|
<hr> |
||||||
|
<p class="text1">Italic Text</p> |
||||||
|
<p class="text2">Bold 20px Text</p> |
||||||
|
<p class="text3">2em Right Align Text</p> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,38 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<meta name="viewport" content="width=device-width"/> |
||||||
|
<style> |
||||||
|
h2 { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.img-middle { |
||||||
|
vertical-align: middle; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.img-top { |
||||||
|
vertical-align: top; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.img-bottom { |
||||||
|
vertical-align: bottom; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h2>CSS text-image align</h2> |
||||||
|
vertical-align:top |
||||||
|
<img class="img-top" src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_total_commander-256.png"> |
||||||
|
<hr> |
||||||
|
vertical-align:middle |
||||||
|
<img class="img-middle" src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_total_commander-256.png"> |
||||||
|
<hr> |
||||||
|
vertical-align:bottom |
||||||
|
<img class="img-bottom" src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_total_commander-256.png"> |
||||||
|
</body> |
||||||
|
</html> |
Loading…
Reference in new issue