Bootstrap Learning Notes (i) HTML &CSS basics

1. Features:

• Remove a margin statement from body
• Set body's background color to white
• Basic font, font size, and line height are set for typesetting
• Sets the global link color, and the underline style is displayed when the link is in the suspended: hover state

2. Title CSS

1, reset the value of Margin-top and Margin-bottom, h1~h3 after resetting the value is 20px;h4~h6 reset after the value is 10px.
2. All headings have a row height of 1.1 (that is, 1.1 times times the Font-size), and the text color and font inherit the parent element's color and font.
3, fixed different levels of title font size, h1=36px,h2=30px,h3=24px,h4=18px,h5=14px and h6=12px.

The {Derived selector allows you to determine the style of a label based on the context of the document.

li strong{font-style:italic; font-weight:normal;}

descendant selectors can select elements that are descendants of an element.

H1 em {color:red;}

Child selectors can only select elements that are child elements of an element.

> Strong {color:red;}
If you do not want to select any of the descendant elements, but want to narrow the range and select only the child elements of an element, use the child element selector (children selector).

the adjacent sibling selector (adjacent sibling selector) selects the element immediately following the other element, and both have the same parent element.

If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector (adjacent sibling selector).

For example, if you want to increase the top margin of a paragraph that appears immediately after the H1 element, you can write:

H1 + P {margin-top:50px;}

This selector reads: "Select the paragraph that appears immediately after the H1 element, and the H1 and P elements have a common parent element."

HTML > Body table + ul {margin-top:20px;}

This selector is interpreted as: Select all sibling ul elements that appear immediately after the table element, which is contained within a BODY element, and the body element itself is a child of the HTML element. }

3. Paragraph

If you want a paragraph p to be highlighted, you can do so by adding the class name ".lead", which is to increase the text size, bold text, and handle the line height and margin accordingly. Use the following:

Bootstrap also through element tags:<small>,<strong>,<em> and <cite> Give the text a prominent style handle.

bold; b,strong {font-weight:bold;/* Text bold */}

Italic:<em> <i>

Class of emphasis:

• . text-muted: Tip, use light grey (#999)
• . Text-primary: Main, using blue (#428bca)
• . text-success: Success, using light green (#3c763d)
• . TEXT-INFO: Notification information, using light blue (#31708f)
• . text-warning: Warning, using yellow (#8a6d3b)
• . Text-danger: Dangerous, using Brown (#a94442)
• Alignment:

• . Text-left: Left Justified

• . Text-center: Center Alignment

• . Text-right: Right-justified

• . Text-justify: Justify on both sides

4. List

Bootstrap provides a list of six forms based on the usual usage situation:

? General List

? Ordered list

? Go to Dot List

? Inline list

? Description List

? Horizontal Description List

You can remove the default list style style by adding a class name of ". list-unstyled" to the unordered list.

By adding the class name ". List-inline" To implement the inline list, the simple point is to change the vertical list to a horizontal list , and remove the Bullets (numbering)to maintain the horizontal display .

. list-inline {padding-left:0;margin-left: -5px;list-style:none;}. List-inline > li {display:inline-block;padding-right:5px;padding-left:5px;}
Horizontal definition lists like inline lists, bootstrap can add the class name ". Dl-horizontal" to the definition list for horizontal display.

Bootstrap Learning Notes (i) HTML &CSS basics