CSS & HTML tips
Posted Updated tech3 minutes read (About 384 words)

CSS & HTML tips

CSS

Background

1
2
3
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

is the shorthand for:

1
2
3
4
5
6
body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

It does not matter if one of the property values is missing, as long as the other ones are in this order.

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

inline-block

Center text in div

Using flexbox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

<style>
.box
{
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
</style>

window.onload vs document.onload

  • window.onload：By default, it is fired when the entire page loads, including its content (images, CSS, scripts, etc.).
    In some browsers it now takes over the role of document.onload and fires when the DOM is ready as well.

  • document.onload: It is called when the DOM is ready which can be prior to images and other external content is loaded.

In chrome, console.log(document.onload) returns null. So just use window.onload.

Block formatting context

HTML

XHTML

  • A term that was historically used to desribe HTML documents written to conform with XML syntax rules.

HTML document:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Content-Type: text/html -->

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>HTML</title>
  </head>
  <body>
    <p>I am a HTML document</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
<!-- Content-Type: application/xhtml+xml -->

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
  <head>
    <title>XHTML</title>
  </head>
  <body>
    <p>I am a XHTML document</p>
  </body>
</html>
  • XHTML is stricter, must be ‘well-formed’
  • Was developed to make HTML more extensible and flexible with other.
  • XHTML is friendly to machine, so it is easier to parse and analyze, good for SEO and screen readers.
  • In comparison with XHTML, HTML is more ‘presentation based’.
  • Read this for further details.

CSS & HTML tips

https://blog-cdt1.vercel.app/2022/11/30/CSS-HTML-tips/

Author

Chendongtian

Posted on

2022-11-30

Updated on

2023-08-04

Licensed under

#

Like this article? Support the author with

Comments

Catalogue

×