About the summary of CSS learning
W3C
Abbreviation for World Wide Web Consortium, Chinese is W3C organization or World Wide Web Consortium.
W3C standards or web standards web standards are a series of standards.
Structure layer: HTML is used to describe the display structure of web pages;
presentation layer: CSS is used to modify the aesthetics of decorated web pages;
behavior layer: JavaScript is used to complete the components of the page;
CSS
CSS is the abbreviation of Cascading Style Sheet, translated as "cascading style sheet", or "style sheet" for short.
Mainly used to modify html xhtml html5 xml to make web pages have this ever-changing form.
Syntax: selector {attribute: value}
body{font-size:12px;}
Four format selectors written in CSS
:
- HTML tag selector: If a tag used in an HTML page is defined in CSS, then all the tags on this page will be displayed in accordance with the style defined in CSS.
- Class selector: Use the class attribute of the HTML tag to introduce the name of the style rule defined in the CSS, which is called a class selector. The style name specified by the class attribute must start with ".".
- ID selector: ID attribute is used to define a specific HTML element, just the opposite of class attribute, class attribute is used to define a group of HTML elements with the same function or format. The CSS name defined by the ID selector must start with "#",
- Universal selector: It is the most powerful but least used of all selectors. The universal selector acts like a wildcard, it matches all available elements.
- Pseudo-class selector: refers to a way to define the various states of the same HTML element and the part of the content it contains.
Id has a higher priority than class
1. Inline introduction: nest the style tag in the head tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{font-size:36px;}
</style>
</head>
<body>
<p>一些老的<b>浏览器不支持 iframe。</b></p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
2. In- line style
<b style="font-size:56px;">浏览器不支持 iframe。</b>
3. The external link style regards css as a file and introduces it into html through the link tag
<link rel="stylesheet" type="text/css" href="css/main.css">
4. Embedded style. Embedded and external links are a comprehensive use, which is not commonly used
<style type="text/css">
@import url("css/style.css");
</style>
The display of the style depends on the distance, that is, the style closest to the target is displayed
You can connect multiple html applications to html
In-line style sheets, embedded style sheets, and external style sheets have their own advantages. In actual development, it is often
Need to mix use:
• The style code for the uniform style of the entire website is placed in a separate style file *.css
• For some pages with different styles, in addition to linking external style files, you also need to define embedded styles
• In a certain webpage, part of the content is "out of the ordinary", using inline style
Features of CSS:
1. Inheritance: The
child element in the web page will inherit the style of the parent element.
For example: To control the size of the text in the paragraph p, you can directly style the body tag.
2. Cascading: In the
web page, the child element defines the same style as the parent element, and the style of the child element will override the style of the parent element. The style
defined later will override the style previously defined.
Common style attributes:
| CSS | Description |
|---|---|
| colour | color |
| font size | font-size |
| Font | font-family: Arial,'Arial' |
| Text alignment | text-align |
| Text indent | text-indent: 2em can be negative |
| Row height | line-height：150% line-height：1.5em |
| Font weight | font-weight: normal[normal]bold[bold] |
| Border style | border-style |
| Border width | border-width |
| Border color | border-color |
| Top margin | top |
| Left margin | left |
| width | width |
| height | hight |
| background color | background-color |
| Background picture | background-image |
• Grammar description
You can choose any of the four attribute values in this grammar. Among them, left stands for left alignment; right stands for right alignment; center stands for center alignment;
Text-align It can only control whether the text is centered, but not whether the div is centered.
If you want the div to be centered, you must pass the box model margin: 0 auto;
All web pages must have hn tags to facilitate search engines to search
text-indent: -9999em; to hide the title of the page.
Text-transform for uppercase and lowercase letter conversion
Set the repeating background image-
background -repeat background-repeat:repeat|repeat-x|repeat-y|no-repeat
Set the background image position-background-position
Pseudo-class
| status | grammar |
|---|---|
| Link not visited | a:link{color:#ff0000} |
| Visited link | a:visited{color:#00ff00} |
| Mouse over the link | a:hover{color:#ff00ff} |
| Mouse down on the link | a:active{color:#0000ff} |
Box model The
inner margin padding is used to fill the inside of the content. The
outer margin margin is used to describe the distance from the edge of the browser to the content.
Border: 1px solid black
pixel value solid line color
Margin: 100px up and down, left and right are 100px distance.
Margin: 100px 200px; up and down 100px, left and right 200px
margin: 100px 200px 300px up 100px left and right 200px bottom 300px
margin: 100px 200px 300px 400px top, right, bottom, left
margin-top margin-left margin-right margin-bottom
The border also works in 4 directions
Block elements and inline elements
Block elements have the attributes of height and width, but it does not allow other elements to be displayed in the same line.
Representing tags div p, etc.
Default attributes of block elements: display:block;
Inline elements do not have width and height attributes to allow other elements to be displayed with their peers.
Represents
the default attribute of a span inline element display:inline;
The block element and the inline element can be converted between
Display: none can hide the element
Set the box
1. When using the border-color composite attribute border-color, if only one color is set, the colors of the four borders are the same; if two colors are set, the top and bottom of the border are one color, and the left and right sides are another color; set 3. Two colors, the color sequence of the border is top, left and right, and bottom; Set 4 colors, the color sequence of the border is top, right, bottom, and left.
2. The border-width property border-width is a compound property that can set the width of four borders at the same time.
3. Border-style is a composite attribute, the other 4 are style attributes of a single border and can only take one value, while the composite attribute border-style can take one to four values at the same time. The following describes the four value methods of the border-style attribute:
— Take one value: this value is used for all four borders. e:s
— Take two values: the first value is used for the upper and lower borders, the second value is used for the left and right borders, and the two values must be separated by a space.
— Take three values: use the first value for the top border, use the second value for the left and right borders, and use the third value for the bottom border. The values must be separated by spaces.
— Take 4 values: The four borders are called up, right, down, and left in the order of the values. Use spaces to separate the values.
Layout
1. Positioning layout:
Property: positon
Description: Set the positioning method of the object
Value:
static Static positioning: The default value of each object in the page.
absolute Absolute positioning: Separate the object from the document flow, and perform absolute positioning relative to the parent object by setting the four directions of left, right, top, and bottom. If there is no such parent object, it will be based on the body object.
relative relative positioning: the object is not separated from the document, by setting left, right, top. The bottom four directions are relatively positioned relative to its own position.
2. Floating layout:
Floating is a way of CSS to achieve layout. Any element including div can be displayed in a floating manner.
Basic syntax:
float:left|right|none
left means that the floating element is on the left and is left-aligned.
right means that the floating element is on the right and is aligned to the right.
none means no float and is the default value.
3. Clear floating.
When an element has a floating attribute, it will affect its parent element or the following elements, and there will be a layout disorder, which can be solved by eliminating the floating method. The impact of floating elements.
Clear: clear
The basic syntax
clear:left|right|both|none
left means that no floating element is allowed to the left of an element.
right means that no floating element is allowed to the right of an element.
Both means that no floating elements are allowed on either side of an element.
none means that floating elements are allowed on both the left and right sides of an element.
overflow
visible [default value. Do not cut the content or add scroll bars],
auto [the object content will be cropped or display scroll bars when necessary],
hidden [do not display content exceeding the size of the object],
scroll [always display scroll bars]
3 ways to hide elements:
- display：none
- width：0 height0
- overflow:hidden
zoom
zoom:
normal: default value. Use the actual size of the object
number: percentage | unsigned floating point real number. When the floating point real value is 1.0 or the percentage is 100%, it is equivalent to the normal value of this attribute
zoom: 1 Solve the problem of ie6 height adaptation