01:CSS Foundation

Tag: img Font cannot insert medium color in list add height

One: Selector ☆

Element selector p {color: #ff0000;}

Derived selectors: For example, if you want the strong element in the list to become italic instead of the usual bold, you can define a derived selector, that is, Strong:li in Li strong {font-style:italic; Font-weight: Normal }

ID selector, the ID selector can be used with derivation with #red {color:red;} #green {color:green;} <p id= "Red" > This paragraph is red. </p> <p id= "Green" > This paragraph is greenish. </p>

Class selector, class selector can also be derived. Center {text-align:center}

Style sheet so inserted into HTML

Summary: The CSS selector seems to be very similar to jquery, with the basic ID, class, element three choices, namely the pound, point, direct element name, plus derivation and inheritance. Of course there are other things like, child element selectors and neighboring sibling selectors and so on.

Two: CSS style ☆

Background

Sets the background of the element to Gray: p {background-color:gray;}

Internal margin: p {background-color:gray; padding:20px;}

Background Image: Body {background-image:url (/i/eg_bg_04.gif);}

Background repetition: Body{background-image:url (/i/eg_bg_03.gif); background-repeat:repeat-y;}

Background positioning: body{background-image:url ('/i/eg_bg_03.gif '); background-repeat:no-repeat;background-position:center;}

Text

Indent text: p {text-indent:5em;}

Use negative value: p {text-indent: -5em;}

Use percent value: div {width:500px;}

Horizontal alignment: Text-align

Font

Use universal font family: body {font-family:sans-serif;}

Specify font family: h1 {Font-family:georgia;}

Font Size: h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}

Link

a:link {color: #FF0000,}/* The link not visited */a:visited {color: #00FF00;}/* The link that has been visited */a:hover {color: #FF00FF;}/* The mouse pointer moves to the link */A : Active {color: #0000FF;}/* The link being clicked */

List

List item flag set to BLOCK: ul {List-style-type:square}

List item Image: Ul li {list-style-image:url (xxx.gif)}

List Flag Location: Li {list-style:url (example.gif) square inside}

Form

Table border: Table, TH, td{border:1px solid blue;}

Collapsed border: Table {border-collapse:collapse;}/* The default border is a two-layer hollow, this property can be said to have */

Table width and Height: table {width:100%;} th {height:50px;}

Table text alignment: The Text-align property sets the horizontal alignment, such as left, right, or center: the Vertical-align property sets the vertical alignment, such as top, bottom, or center alignment: Table padding: td {padding:15px;}

Contour (outline)

is a line drawn around the element, at the periphery of the edge of the border, that acts as a prominent element.

The CSS outline property specifies the style, color, and width of the element outline. I never seem to use it.

Three: CSS box model ☆☆☆

The CSS box model specifies the element frame processing element content, Inner margin , Border and the outer margin the way.

* {margin:0; padding:0;}/* This is the padding and margin, respectively */

H1 {padding:10px 0.25em 2ex 20%;}/* Sets the padding for each edge in the top, right, bottom, and left order, with different units or percent values available for each edge */

p {padding:10%;}/* If there is only one, four weeks will be set to the same */

A:link img {border-style:outset;}/* This sets the border style with a total of 10 styles */

p {border-style:solid; border-width:5px;}

p {border-style:solid; border-width:15px 5px 15px 5px;}/* Follow top, right, bottom, left */

p {border-style:none; border-width:50px;}/* This will have no border */

h1 {margin:0.25in;}/* Set margin */

H1 {margin:10px 0px 15px 5px;}/* Follow top, right, bottom, left */

p {margin:10%;}

p {margin:0.5em 1em;}/* First value set up and down, second value set down left */

When an element appears on top of another element, the bottom margin of the first element merges with the top margin of the second element, which is annoying.

Three: CSS box model ☆☆☆

The CSS box model specifies the element frame processing element content, Inner margin , Border and the outer margin the way.

* {margin:0; padding:0;}/* This is the padding and margin, respectively */

H1 {padding:10px 0.25em 2ex 20%;}/* Sets the padding for each edge in the top, right, bottom, and left order, with different units or percent values available for each edge */

p {padding:10%;}/* If there is only one, four weeks will be set to the same */

A:link img {border-style:outset;}/* This sets the border style with a total of 10 styles */

p {border-style:solid; border-width:5px;}

p {border-style:solid; border-width:15px 5px 15px 5px;}/* Follow top, right, bottom, left */

p {border-style:none; border-width:50px;}/* This will have no border */

h1 {margin:0.25in;}/* Set margin */

H1 {margin:10px 0px 15px 5px;}/* Follow top, right, bottom, left */

p {margin:10%;}

p {margin:0.5em 1em;}/* First value set up and down, second value set down left */

When an element appears on top of another element, the bottom margin of the first element merges with the top margin of the second element, which is annoying.

Four: Positioning

The following statements are critical

Everything is a box, which is important, Div, H1, or p elements are often referred to as block-level elements. This means that these elements appear as a piece of content , the "Block box". In contrast, elements such as span and strong are called "inline elements," because their content is displayed in the row, which is the "inline box."

You can use the Display property to change the type of box that is generated. This means that by setting the display property to block, inline elements (such as the <a> element) behave like block-level elements. You can also set the display to none so that the generated elements do not have a box at all. In this case, the box and all its contents are no longer displayed and do not occupy space in the document.

CSS positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

CSS position properties are very, very critical, H5 positioning depends on this

The static element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element. the relative element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. the absolute element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. The fixed element box behaves like the position is set to absolute, but its containing block is the window itself.

Because the positioning is too critical, a special article to summarize:

Relative positioning

#box_relative {position:relative; left:30px; top:20px;} /* Follow top, right, bottom, left */

Absolute positioning

#box_relative {position:absolute; left:30px; top:20px;}

Floating

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

When you float box 1 to the right, it moves out of the document stream and shifts to the right until its right edge touches the right edge of the containing box:

If the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, then they may be "stuck" by other floating elements when they move down:

attached: CSS units

PX: pixels

EM: Relative value, default 1em = 16px

Ex: Relative value, default is half of the font height

%: Percent

In: Inch

01:CSS Foundation