One, the relationship between Html and CSS
Learn the basic technologies of web front-end development: HTML, CSS, and JavaScript languages
1. HTML is the carrier of web content. Content is the information that webpage creators put on the page for users to browse. It can include text, pictures, videos, etc.
2. CSS style is performance. It's like the coat of the web. For example, the title font, color changes, or adding background images, borders, etc. to the title. All these things used to change the appearance of content are called performance.
3. JavaScript is used to achieve special effects on web pages. Such as: mouse over the pop-up drop-down menu. Or mouse over the background color of the table to change. There is also a rotation of focus news (news pictures). It can be understood that animations and interactions are generally implemented using JavaScript.
html tag
<html></html> is called the root tag, and all webpage tags are in <html></html>.
The <head> tag is used to define the head of the document. It is a container for all head elements. Head elements have tags such as <title>, <script>, <style>, <link>, <meta>, etc.
The content between the <body> and </body> tags is the main content of the web page, such as <h1>, <p>, <a>, <img> and other web content tags, where the content in the tags will be in Displayed in the browser.
<title> tag: The text between the <title> and </title> tags is the title information of the web page, which will appear in the title bar of the browser. The title tag of a webpage is used to tell users and search engines what the main content of this webpage is. Search engines can quickly determine the subject of the webpage through the title of the webpage. The content of each web page is different, and each web page should have a unique title.
<h1></h1> Title tag
<p></p> Paragraph tags
The syntax of code comments: <!--Comment text-->
CSS
The full name of CSS is "Cascading Style Sheets". It is mainly used to define the display style of HTML content in the browser, such as text size, color, and bold font.
The css style consists of selectors and declarations, and declarations consist of attributes and values
Selector: Also known as selector, it indicates the elements to be applied to the style rules in the webpage. For example, in this example, the text of all paragraphs (p) in the webpage will turn blue, while other elements (such as ol) will not be affected. influences.
Declaration: What is in the English braces "{}" is the declaration, and the attribute and value are separated by an English colon ":". When there are multiple declarations, they can be separated by an English semicolon ";"
Just like comments in Html, there are comment statements in CSS: use /*comment statements*/ to indicate (use <!--comment statements--> in Html).
Where can CSS styles be written? From the perspective of the form of CSS style code insertion, it can be basically divided into the following three types: inline, embedded and external. These three priorities follow the principle of proximity
Inline css style sheet is to write css code directly in existing HTML tags
External css style, written in a separate file
External css style (also called external style) is to write the css code in a separate external file. This css style file has ".css" as the extension, in the <head> (not in the <style> tag) Inside) Use the <link> tag to link the css style file to the HTML file
<link href="base.css" rel="stylesheet" type="text/css" />
Class selector is the most commonly used in css style coding
Syntax:. Class selector name {css style code;}
note:
1. Start with a dot in English
2. The name of the class selector can be named arbitrarily (but do not use Chinese)
Instructions:
The first step: Use appropriate tags to mark the content to be modified, as follows:
<span>Courage</span>
Step 2: Use class="class selector name" to set a class for the label, as follows:
<span class="stress">勇气</span>
Step 3: Set the CSS style of the class selector, as follows: .stress{color:red;}/*Add an English dot before the class*/
There is also a more useful selector sub-selector, the greater than symbol (>), which is used to select the first-generation sub-elements of the specified tag element. Such as the code in the code editor on the right: .food>li{border:1px solid red;}
This line of code will add a solid red border to the child element li (fruit, vegetable) under the class name food.
Include the selector, that is, add spaces to select the descendant elements under the specified label element. Such as the code in the code editor on the right:
.first span{color:red;}
This line of code will change the font color of "Timid as a Mouse" in the first paragraph of text to red.
Please pay attention to the difference between this selector and 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 is applied to all descendant elements. Descendant selectors use spaces to select, and sub-selectors use ">" to select.
Summary:> Acts on the first generation of descendants of an element, and spaces affect all descendants of the element.
Universal selector
The universal selector is the most powerful selector. It is specified by a (*) sign. Its function is to match all tag elements in html. Use the following code to set the font color of any tag element in html to red:
* {color:red;}
What are block-level elements? In html, <div>, <p>, <h1>, <form>, <ul> and <li> are block-level elements.
Features of block-level elements:
1. Each block-level element starts on a new line, and the following elements also start on a new line. (Really overbearing, a block-level element occupies a row)
2. The height, width, row height and top and bottom margins of elements can be set.
3. If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element), unless a width is set.
In html, <span>, <a>, <label>, <strong> and <em> are typical inline elements (inline) elements.
Features of inline elements:
1. All on one line with other elements;
2. The height, width and top and bottom margins of elements cannot be set;
3. The width of an element is the width of the text or picture it contains and cannot be changed.
Inline-block elements (inline-block) have the characteristics of both inline elements and block elements
Features of inline-block elements:
1. All on one line with other elements;
2. The height, width, row height and top and bottom margins of elements can be set.
css layout model
The layout model and the box model are the most basic and core concepts of CSS. But the layout model is based on the box model, which is different from the CSS layout styles or CSS layout templates we often say. If the layout model is the essence, then the CSS layout template is the end, an external form of expression.
In web pages, there are three layout models for elements:
1. Flow model (Flow)
2. Floating model (Float)
3. Layer model (Layer)
The flow layout model has 2 typical characteristics:
The first point is that the block elements will extend vertically in order from top to bottom within the containing element, because by default, the block elements are 100% wide. In fact, block elements will occupy positions in the form of rows. For example, the width of three block element tags (div, h1, p) in the code editor on the right is displayed as 100%.
The second point is that in the flow model, inline elements will be displayed horizontally from left to right within the contained element. (Inline elements are not as overbearing as block elements dominate their lines)
Floating model
The block element is so overbearing that it is on its own line. What if we want to display two block elements side by side? Don't worry, you can achieve this wish by setting the element to float.
Any element cannot be floated by default, but it can be defined as floating by CSS, such as div, p, table, img and other elements can be defined as floating.
What is the layer layout model?
The layer layout model is like a very popular layer editing function in the image software PhotoShop, each layer can be accurately positioned and operated
CSS defines a set of positioning properties to support the layer layout model.
The layer model has three forms:
1. Absolute positioning (position: absolute)
2. Position: relative
3. Fixed positioning (position: fixed)
To summarize the length unit, px (pixel), em, and% are more commonly used at present. Note that these three units are actually relative units.
1. Pixel
Why is the pixel a relative unit? Because the pixels refer to small dots on the display (the CSS specification assumes "90 pixels = 1 inch"). The actual situation is that the browser will use the actual pixel value of the display. At present, most designers tend to use the pixel (px) as the unit.
2 、 in
It is the font-size value of the given font of this element. If the element's font-size is 14px, then 1em = 14px; if the font-size is 18px, then 1em = 18px. The following code:
p{font-size:12px;text-indent:2em;}
The above code can achieve 24px indentation of the first line of the paragraph (that is, the distance between the two font sizes).
Pay attention to a special case below:
But when the unit of font-size is set to em, the calculation standard at this time is based on the font-size of the parent element of p. The following code:
html:
<p>Take this <span>example</span> as an example. </p>
css:
p{font-size:14px}
span{font-size:0.8em;}
As a result, the font size of the font "example" in the span is 11.2px (14 * 0.8 = 11.2px).
3. Percentage
p{font-size:12px;line-height:130%}
Set the line height (line spacing) to 130% of the font (12 * 1.3 = 15.6px).