Shulou(Shulou.com)06/02 Report--

Editor to share with you what the basic use of CSS, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Part one: basic use of CSS

(1) what is CSS?

CSS full name Cascading Style Sheets, translation: cascading (cascading) stylesheets.

If HTML is the structure of a web page, then CSS is a web makeup artist.

(2) where is the CSS written?

CSS can be written in three ways:

Write it directly in the tag.

Write it in the style tag

Use external .css files

(corresponding to the three ways of writing CSS, there are three ways to introduce CSS, see below:)

(3) the three major ways of introducing CSS: 1. Write directly in the tag (set directly in the tag) the introduction of CSS method 1 I am the paragraph tag

Small knowledge points:

When setting the property color property, as shown in the following figure, you can make a more intuitive and detailed selection of colors:

two。 Written in the style tag (in

Add to the label

Tag setting) introduction of CSS 2 p {color: # c481ff}

I'm the paragraph tag.

3. Use external .css files to set css text, such as 1.css the first: introduce the css file with @ import "1.css"; the second: through the

Bring in the css file.

The contents of the 1.css files used by the Department are as follows:

Introduction of CSS 3 @ import "1.css"

I'm paragraph tag 2.

Small knowledge points:

@ import Import is not recommended because of its drawbacks: loading the .CSS file after the entire page has been loaded, if the page file is too large, it will result in an unstyled page first, flashing and then a stylish web page.

It is recommended to use

Because it loads the .css file first and then the web page

Summary-the similarities and differences of the above three introduction methods: we do not use inline styles in actual development! The most frequently used is the external style. Generally use the internal style when writing demo-because when sending demo to others, only one file can be sent. Whether it is external style, internal style, or inline style, it takes effect, and together they add styles to the label. If a label passes through the external style and the internal style sets the same type of style (with different values), it will have an overlay effect-the principle of overwriting: the last style overrides the first one! Part two: selector

(1) selector weight:

In real life-whoever has the right to listen to, by the same token, the weight of the choice is the same, whose weight is high and who is applied. The weight here is judged by the accuracy, the higher the accuracy, the greater the weight.

(2) the use of the selector:

Used to accurately select elements (that is, HTML tags) and assign styles.

1. Tag selector: function: find the tag according to the name of the tag; note: it will find all tags with the same name. Tag selector / * tag selector. Directly use the tags in the page as a selector to select * / p {color: chartreuse;}

I am paragraph tag 1

I'm paragraph tag 2.

Note:

You can understand that the whole picture below is called a selector!

two。 Class selector (class selector) selects the corresponding element through the class attribute of the tag, with the help of the concept of a class, one definition, can be used in many places. Use the scene: its function is to style multiple tags (often requiring the same style). A tag can set multiple class values, separated by spaces, and the tag will have all the styles contained in class. Class selector / * class selector, also known as class selector. Pass. Select * / .p1 {color:red;} I am the paragraph tag

Little tip:

The class selector can select multiple because the class property is not unique

But the id selector can only select one, because id is unique.

The 3.id selector selects the corresponding element through the id attribute of the tag. Id selector / * third selector: id selector selects through # * / # p2 {color:cadetblue;} I am the paragraph tag

Little tip:

Weights of the above three selectors: id selector > class selector > tag selector

Extension: if a tag sets the same style through both the id selector and the class selector, and we want the style set by the class selector to take effect, but look at the selector weight above-the weight of the class selector is lower than that of the id selector, it should be the style set by the id selector that takes effect. But we can make it effective by adding! import after the specified style!

! important is the most weighted!

Note:! important can only act on the value of a single style, it is not a selector!

4. A group selector is a selector that can select multiple tags at the same time. Group selector / * the fourth selector: the group selector is separated by commas between different selectors. * / pdome span {color: # ff82c1;}

I'm the paragraph tag.

I am the text tag. I am the first-level label 5. Full selector, as the name implies, select all tags! Full selector / * fifth selector: full selector uses * to select all elements of this page for uniform styling * / * {color: # a3ff50}

I'm the paragraph tag.

I am the first-level title, I am the second-level label, I am the text label 6. Hierarchical selector (divided into four selectors: descendant, offspring, neighbor and sibling)

Note: block tags can nest inline tags and other block tags; inline tags can only nest text and other inline tags, but not block tags.

There is a special case: P tags and h tags can not nest block tags, can not nest themselves, can only nest inline tags!

(1) descendant selector descendant selector / * hierarchical selector first: descendant selector separates with spaces * / * descendants are all tags nested in it * / / * in this case, all ol tags in the p tag are descendants of p no matter how many ol are nested in the ol * / p ol {list-style: none;}

I'm ordered list 1. I'm ordered list 2. I'm ordered list 3. I'm ordered list 111. I'm ordered list 222.

(2) the descendant selector (which can be selected one layer down) the descendant selector / * hierarchical selector the second kind: the descendant selector can only select his son with the > separated * / / * descendant selector. Here, the selector in the above syntax format can be the id selector, which selects id as the son of the unordered list of ul1. The class selector can also be a signature selector * / # ul1 > li {list-style: none / * the function of this property is to remove the style of the list Represents the removal of the small circle in front of the unordered list * /} 1 2 3 11 22 33 (3) Brother selector brother selector / * hierarchical selector the third kind: brother selector uses ~ to select * / / * as long as it has the same father, it is called a brother * / * in this case. The father of id for p2 is body, so the body is full of his brothers, and because the code is executed from top to bottom, it will not be selected that I am the paragraph tag 1percent / # p2roomp {color:#ff8971}

I am paragraph tag 1

I'm paragraph tag 2.

I'm paragraph tag 3.

I'm paragraph tag 4.

(4) neighbor selector (neighbor brother selector) neighbor brother selector / * hierarchical selector fourth: neighbor selector (neighbor brother selector) select with + * / / * first find a brother, then select the adjacent * / / * in this case, because the code is executed from top to bottom So it will not be checked that I am the paragraph tag 1 paragraph / # p2roomp {color:#ff8971}

I am paragraph tag 1

I'm paragraph tag 2.

I'm paragraph tag 3.

I'm paragraph tag 4.

7. Attribute selector attribute selector / * attribute selector selects all commonly used Input with the name attribute in the p tag. If you only want to check that I am paragraph tag 1, then change it to p [name= "p1"] then * / p [name] {color: red;} I am paragraph tag 1

I'm paragraph tag 2.

I'm paragraph tag 3.

I'm paragraph tag 4.

A summary of the use of selectors:

Weight small comparison summed up a sentence: the more specific (that is, the accuracy said at the beginning), the greater the weight; the more fuzzy the weight, the smaller the weight!

8. Pseudo-class selector pseudo-class selector / * style when hyperlink address is not accessed (for a tag only) * / a:link {color: # ff25ec;} / * the style in mouse hover applies to all tags * / a:hover {color: # 3b29ff } / * when activated, that is, when clicked, it applies to all tags * / a:active {color: # ff9d47;} / * after clicking on the hyperlink (applicable to a tag only) * / a:visited {color:green } I am the hyperlink part 3: commonly used font style p {/ * font type (e.g. boldface, Song style, imitation Song.) * / font-family: boldface; / * font size (default font size is 16px) * / font-size: 30px / * style of font (italic italic or normal normal) * / font-style: italic; / * font weight (default weight is normal--400) bold is bold * / font-weight: bold / * the lowercase of the font changes lowercase letters into the same size of uppercase letters * / font-variant: small-caps; / * the composite style of the font, pay attention to the order, in fact, the total writing order of the above style is: style variant weight size/height family can write less! * / font:italic small-caps normal 50px boldface;}

I'm the paragraph tag.

HELLO

Hello

Part IV: common style of text p {/ * used to set the alignment of the text within the label-left (left alignment, default) Center (Center alignment); right (right alignment) * / text-align: left; / * used to set the height of the single line of text within the label * / line-height:40px / * the first line indent em is a Chinese kerning or you can use px units 1em=16px*/ text-indent:2em; / * text line underline is underlined Line-through is called delete line overline (underline) none is to remove the text line * / text-decoration: underline; / * the distance between words * / letter-spacing: 1mm; / * the word spacing is written in the p tag below, and the space is separated by a word * / word-spacing:50px / * Line height can be held up * / / * you can set the line height to prop up the height of the element to that high * / / * there is an application: single-line text is vertically centered (centered vertically): height = line height * / line-height: 50px / * it is used to set the newline mode-normal (by default, the line wraps normally when one line is full) Nowrap (no line wrapping) * / white-space: normal; / * is used to set the handling method for content exceeding the tag-hidden (hidden beyond); * / overflow: hidden / * what does the text do when it is used to set the text overflow tag-ellipsis (used to set the display ellipsis) * / text-overflow: ellipsis;} a {/ * to set the decoration mode of the text-underline (underscore) Line-through (underline); overline (underline) * / / * can be set to none to remove the underline under the hyperlink! * / text-decoration: none;}

I am a paragraph tag

Shanghai, Henan, China

one hundred and eleven

The application of line height to realize the vertical center of single-line text:

An application of line height p {/ * achieve vertical centering of single-line text by letting line height = height * / height: 200px; / * height * / line-height: 200px; / * line height * /}

I'm the paragraph tag.

Part V: common style of background Common style of background p {/ * set width and height of p * / / * Line elements cannot set width and height; block elements or row-level block elements can set width and height. If you do not set the width and height, the default width is used-the same width as the parent tag; if you do not set the height, then the default height is supported by the content! * / width:300px; height:300px; / * set the background color * / / * how to write the background color: 1. English words for color (e.g. red,yellow...); 2. # plus 6-digit hexadecimal numbers (the first two of the six digits are red, the middle two are green, and the last two are blue. The value range of red, green and blue is 00~FF/ff)-the most commonly used method of writing in development; the 3.rgb (red, green, blue) function gets a color-generally used in JS code The 4.rgba (red, green, blue, opacity) function gets a color-generally used for JS code * / background-color: # a3ff50; / * the path where the background image url writes the picture * / background-image: url ("") / * setting the size of the background can also be used as a percentage, which refers to its container * / background-size:100px 100px; / * background tiling means: if the background image is very small, you can put more than one on this p. Uneven tiling is to put only one * / background-repeat: no-repeat; / * background positioning can use percentage positioning (two percentage data, the first is relative to the left, the second is relative to the top) * / background-position: center / * compound styles should also be in order (separated by spaces, and if you do not want to locate and set the size, write the value of the located attribute as 0) the order of the attributes is: background-color bacfground-image background-repeat background-position/background-size * / background:red url ("");}

Small expansion: using CSS to achieve color gradient: (1) linear gradient of color gradient # p1 {width:300px; height: 300px / * the linear-gradient () function is used to realize the linear gradient * / / * Note: the color gradient is realized by the gradual image. You can put multiple colors in the function to achieve gradient * / / * by default, the color to right,to left,to top,to buttom right filled from top to bottom (from top left to bottom right) can also be graded in a certain angle, in the format of degree deg, such as 90deg * / background-image: linear-gradient (to left,skyblue,pink). }

(2) Radial gradient # p1 {width: 200px; height: 300px / * the radial-gradient () function is used to realize the radial gradient * / / * Note: the color gradient is realized by the gradual image * / / * the default is to diverge from the center to the outside (ellipse is the gradient of the elliptical shape) Circle (shape becomes round) * / background-image: radial-gradient (ellipse Skyblue,pink,white) }

(3) expand the implementation of a text gradient: span {/ * set a gradient to the background * / / * the default text gradient is to change the direction of the gradient from top to bottom, for example: to right*/ background-image: linear-gradient (to right,blue,black) / * stipulate that the area drawn by the gradual change of the background color is set here to the text area * /-webkit-background-clip: text; / * set the original text to transparent * / color: transparent;} I am the gradient text, I am super handsome! These are all the contents of this article entitled "what are the basic uses of CSS?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.