HTML (web design): A Required design model --------- CSS Web Programming
I introduced the basic web page design before, but the previous one is just a box with no appearance at all. Now I want to introduce how to modify and play tricks. For a brief introduction, click here to open the link.
Introduction to CSS: CSS is a Cascading Style Sheet used to define the Display Effect of a webpage. Html code can be used to repeatedly define styles, improve the maintainability of the later style codes, and enhance the display effect function of webpages. In a simple sentence, CSS separates the content of the webpage from the display style, improving the display function. How does CSS and HTML work together in Webpage code? There are four methods: style attribute, style label, import, and link. 1. directly use the style attribute:
This is my css web page technology.
2. style label mode:
3. Import Method
4. Link Mode
CSS syntax: CSS code format: Selector name {attribute name: attribute value ;.......} Separate attributes with semicolons
The attribute and attribute values are directly connected by a colon.
If a property has multiple values, multiple values are separated by spaces. Selector: Specifies the tag to be used by CSS. The name of the tag is the selector. Which container is selected (the tag itself is the container that encapsulates data ). 1. There are three selectors: 1) the html Tag name selector. The html Tag name is used.
2) class selector. Actually, the class attribute in the tag is used.
3) id selector. Actually, the id attribute in the tag is used. Each tag defines the class and id attributes. It is used to identify tags to facilitate tag operations.
In the definition, the class attribute values of Multiple labels can be the same, and the id value must be unique, because JavaScript is often used. 1. html tag selector:
Hello, this is a demonstration. This is div. Department > Points:
1. before clicking: a: link 2, move to this location: a: hover 3. When you click: a: active click the special pseudo element of the status when the hyperlink is clicked: the pseudo element in the section p label: p: the first line of text in the first-line section.
P: the first letter in the first-letter section. Custom pseudo element: focus element with focus
div:hover{ background-color:#f00; color:#fff; }The Box Model 1 border (border) of CSS is border-top
Bottom border-bottom
Left border-left
Right border-right inner patch (Paddings): top of padding
Bottom padding-bottom
Left padding-left
Right padding-right ◇ external patch (Margins): margin-top on the outer margin
Lower margin-bottom
Left margin-left
Right margin-rightCSS Box Model 2 ☆css layout -- float ◇ float: none | left | right none: default value. Objects are not float
Left: Right of the text flow object
Right: left ◇ clear: none | left | right | both none: Default Value of the text flow object. Allow floating objects on both sides
Left: Float objects on the left are not allowed.
Right: Float objects on the right are not allowed.
Both: Float objects are not allowed.
This is the first div. This is the second div. Add more vertices and check more. This is the third div.
Simply use border: padding and Margins
This is the text in a div. 1. This is the text in a div. 2. Add a few more words. Add a few more words ............. ........... this is text 3 in a div.
This is the text in a div. 1. This is the text in a div. 2. Add a few more words. Add a few more words ............. ........... this is text 3 in a div.
This is the text in a div. 1. This is the text in a div. 2. Add a few more words. Add a few more words ............. ........... this is text 3 in a div. This is the text in a div. 4. This is the text in a div. 5. Add a few more words. Add a few more words ............. ........... this is text 6 in a div.
CSS box model 3CSS layout -- positioning ◇ position: static | absolute | fixed | relative static: default value. No special positioning. Objects follow HTML positioning rules.
Absolute: drag an object out of the Document Stream and use left, right, top, bottom, and other attributes to absolutely locate the parent object with the most positioning settings relative to the object closest to it. If such a parent object does not exist, it is based on the body object. Its stack is defined by the z-index attribute.
Fixed: not supported. Object positioning follows the absolute (absolute) method. However, some rules must be followed.
Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.
