css details (first day of internship)_html/css_WEB-ITnose

1. Introduce css files into the head tag

2. Syntax:

Note: The value in the for attribute of the label must be the same as the id attribute value of the related control.

Multiple selections in checkbox and single selection in radio.

3. CSS style priority: inline>embedded>external

inline: Super cool Internet< ;/span>

Embedded: span{ color:red; }

External:

4. Class selector syntax in css:

.Class selector name {css style code; }

Text

ID selector syntax:

#setGreen{ color:green; }

Open Class

Note: ID selector can only be used once in the document, while class selector can be used multiple times Second-rate. You can use the class selector word list method to set multiple styles for an element at the same time, but the ID selector cannot. Such as:

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

When it comes to third gradein the next semester, our class will have an open class...

5. There is also a more useful selector sub-selector, namely the greater than symbol (>), which is used to select the first-generation child elements of the specified label element. For example, the code in the code editor on the right: .food>li{border:1px solid red;}

This line of code will add red solid to the sub-element li (fruits and vegetables) under the class name food. line border.

6. Contain a selector, that is, add spaces, which are used to select descendant elements under the specified label element. For example, the code in the code editor on the right: .first span{color:red;}

This line of code will change the font color of "as timid as a mouse" in the first paragraph of text to red.

Please note the difference between this selector and a child selector. A child selector only refers to its direct descendants, or you can understand it as the first generation descendants that act on child elements. The descendant selector acts on all child descendant elements. Descendant selectors select with spaces, while child selectors select with ">".

Summary: > Acts on the first generation descendants of the element, and spaces act on all descendants of the element.

7. Pseudo-class selector

What is more interesting is the pseudo-class selector. Why is it called a pseudo-class selector? It allows tags that do not exist in html (tags (a certain state) to set the style. For example, we set the font color for the mouse-over state of a label element in HTML:

a:hover{color:red;}

above One line of code is to set the font color to red for the state of the a label when the mouse is rolled over. This will add a special effect to the text "as timid as a mouse" in the first paragraph of text and change the font color to red when the mouse is rolled over.

About pseudo-selectors:

Regarding pseudo-class selectors, so far, the "pseudo-class selector" that is compatible with all browsers is to use: hover on the a tag (actually There are many pseudo-class selectors, especially in CSS3, but because they are not compatible with all browsers, this tutorial only talks about this most commonly used one). In fact, :hover can be placed on any tag, such as p:hover, but their compatibility is also very poor, so the combination of a:hover is more commonly used now.

8. When we are making web page code, there are some special situations where we need to set the highest weight for certain styles. What should we do? At this time we can use !important to solve it.

The following code:

p{color:red!important;}

p{color:green;}

When I was in third grade, I was still atimid little girl.

At this time, the text in the p paragraph will be displayed in red. Note: !important must be written before the semicolon.

9. In Chinese text, it is customary to leave two spaces before a paragraph. This special style can be implemented with the following code:

p{text-indent:2em;}

In the spring of 1922, a writer named Nick Carraway (Tobey Maguire) who wanted to become famous left the Midwest of the United States and came to New York. It was an era when moral sense was fading, jazz was popular, smuggling was king, and stocks were soaring. In order to pursue his American dream, he moved to a bay near New York.

Note: 2em means twice the size of the text.

Paragraph layout--line spacing (line height) p{line-height:2em;}

10. Element classification--block-level elements

What are block-level elements? In HTML,

,

,

,

,

and
• are block-level elements. Setting display:block displays the element as a block-level element. The following code converts the inline element a into a block element, so that the a element has the characteristics of a block element.

  a{display:block;}

  Characteristics of block-level elements:

  1. Each block-level element starts on a new line, and subsequent elements also start on a new line. Start a line.

  2. The height, width, line height, top and bottom margins of the element can be set.

  3. If the width of an element is not set, it is 100% of its parent container (the same as the width of the parent element), unless a width is set.

  11. Element classification - inline elements

  In html, , , , , , and are typical inline elements (inline elements). Of course, block elements can also be set as inline elements through the code display:inline. The following code converts the block element div into an inline element. The div element used from the page has the characteristics of an inline element.

  Characteristics of inline elements:

  1) and other elements are on the same line;

  2) The height, width, line height, top and bottom margins of the element cannot be Settings;

  3) The width of an element is the width of the text or image it contains and cannot be changed.

  12. Box model - border

  The border of the box model is the line surrounding the content and filler. You can set the thickness, style and color of this line (the three attributes of the border ).

  For example, the following code is used to set the border thickness to 2px, the style to solid, and the color to red for a div:

  div{

  border:2px solid red;

  }

  The above is the abbreviation of the border code, which can be written separately:

  div{

  border-width:2px;

  border-style:solid;

  border-color:red;

  }

  Note:

  1. border-style (border style) common styles There are:

  dashed (dashed line) | dotted (dotted line) | solid (solid line).

  2. The color in border-color (border color) can be set to hexadecimal color, such as:

  border-color:#888;//Don’t forget the hash sign in front .

  3. The width in border-width (border width) can also be set to:

  thin | medium | thick (but not very commonly used), the most common is pixels (px) .

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn