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

This article mainly shows you "what are the basic knowledge points of CSS", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "what are the basic knowledge points of CSS?"

CSS3 selector

Selectors can be divided into the following categories:

Simple Simple selectors: matches one or more elements by element type, class, or id. Attribute selector (Attribute selectors): matches one or more elements by attribute / attribute value. Pseudo class (Pseudo-classes): matches one or more elements in a determined state, such as an element that is hovered by a mouse pointer, or a check box that is currently selected or unselected, or an element that is the first child of a parent node in the DOM tree. Pseudo element (Pseudo-elements): matches one or more elements in the relevant determined position, such as the first word of each paragraph, or the content generated before an element. Combinators: here is not just the selector itself, but also a way to combine two or more selectors in an efficient way for very specific selections. For example, you can select only the paragraphs of the immediate child of the divs, or follow the paragraphs directly after the headings. Multiple selectors (Multiple selectors): these are not separate selectors either; the idea is to put multiple selectors separated by commas under a CSS rule to apply a set of declarations to all elements selected by these selectors. Simple selector

Also known as type selector (also known as element selector)

This is HTML:

What color do you like?

I like blue.

I prefer red!

This is the style sheet:

/ * All p elements are red * / p {color: red;} / * All div elements are blue * / div {color: blue;}

We're going to get this:

Class selector

The class selector consists of a dot. And the class name after the class. The class name is any value that has no spaces in the HTML class document element properties. It's up to you to choose a name. It is also worth mentioning that multiple elements in a document can have the same class name, while a single element can have multiple class names (written in the form of multiple class names separated by spaces)

Here are some HTML:

Create an HTML document Create a CSS style sheet Link them all together

Here are some CSS styles:

/ * The element with the class "first" is bolded * / .first {font-weight: bold;} / * All the elements with the class "done" are strike through * / .done {text-decoration: line-through;}

We get this result:

ID selector

The ID selector consists of a hash / pound sign (#), followed by the ID name of the given element. Any element can use the id attribute to set a unique ID name. What is the ID of your choice. This is the most efficient way to select a single element.

Important: an ID name must be unique in the file. The behavior of repeating ID is unpredictable, for example, in some browsers only the first instance is calculated, and the rest will be ignored.

Let's look at a simple example-this is HTML:

"Good morning."

"Go away!"

This is the style sheet:

# polite {font-family: cursive;} # rude {font-family: monospace; text-transform: uppercase;}

And we get this as an output:

Universal selector

Universal choice (*) is the ultimate trump card. It allows you to select all the elements in a page. Since there is little practical value in applying the same rules to each element, it is more common to use it in conjunction with other selectors

Important: be careful when using general selections. Because it applies to all elements, using it on a large web page may have a significant impact on performance: the page may appear slower than expected. In most cases, you won't use this selector.

For example, this is HTML:

I think the containing box just needed a border or something, but this is getting out of hand!

This is the style sheet:

* {padding: 5px; border: 1px solid black; background: rgba

When you put it together, you get this result:

Attribute selector

An attribute selector is a special type of selector that matches an element based on its attributes and attribute values. Their general syntax consists of square brackets ([]), which contain the name of the attribute, followed by an optional condition to match the value of the attribute. Attribute selectors can be divided into two categories according to the way they match property values: existence and value attribute selectors and substring value attribute selectors.

Existence and value (Presence and value) property selector

These property selectors try to match precise property values:

[attr]: this selector selects all elements that contain the attr attribute, regardless of the value of attr. [attr=val]: this selector selects only all elements where the attr attribute is assigned to val. [attr~=val]: this selector selects only elements with the attr attribute and requires that the val value be one of the space-delimited lists of values contained in the attr value.

Let's look at a special example. Here is its HTML code:

My recipe ingredient: Poulet basquaise Tomatoes Onions Garlic Red pepper Chicken Bacon bits Olive oil White wine

And a simple stylesheet

/ * all elements with the "data-vegetable" attribute will be applied a green text color * / [data-vegetable] {color: green} / * all elements with the "data-vegetable" attribute and the attribute value exactly as "liquid" will be applied the golden background color * / [data-vegetable= "liquid"] {background-color: goldenrod } / * all elements that have a "data-vegetable" attribute and the attribute value contains "spicy", even if the element's attribute contains other attribute values, will be applied a red text color * / [data-vegetable~= "spicy"] {color: red;}

The results are as follows:

Substring value (Substring value) attribute selector

Property selectors in this case are also called "pseudo-regular selectors" because they provide flexible matching methods similar to regular expression (but note that these selectors are not really regular expressions):

[attr | = val]: select an element whose value of the attr attribute is val or whose value begins with val- (note that the "-" here is not an error, it is used to handle language coding). [attr^ = val]: select the element whose value of the attr attribute begins with val (including val). [attr$=val]: select an element whose value of the attr attribute ends with val (including val). [attr*=val]: select the element that contains the substring val in the value of the attr attribute (a substring is only part of a string, for example, "cat" is a substring of the string "caterpillar").

Let's continue with our previous example and add the following CSS rules:

/ * Classical usage of language selection * / [lang | = "fr"] {font-weight: bold;} / * all elements with the value "not spicy" in the "data-vegetable" attribute turn green * / [data-vegetable*= "not spicy"] {color: green;} / * all elements with the "data-quantity" attribute ending in "kg"] {font-weight: bold } / * all elements with attribute "data-quantity" whose value begins with "optional" * / [data- quantity^ = "optional"] {opacity: 0.5;}

With these new rules, we'll get this:

Pseudo class (Pseudo-class)

A CSS pseudo-class is a keyword prefixed with a colon (:) that is added to the end of a selector. When you want the style to be rendered to the specified element in a specific state, you can add the corresponding pseudo class (pseudo-class) to the element's selector. You may want an element to render another style in a certain state, such as when the mouse hovers over the element, or when a check box is disabled or checked, or when an element is the first child of its parent element in the DOM tree.

: active: any: checked: default: dir (): disabled: empty: enabled: first: first-child: first-of-type: fullscreen: focus: hover: indeterminate: in-range: invalid: lang (): last-child: last-of-type: left: link: not (): nth-child () : nth-last-child (): nth-last-of-type (): nth-of-type (): only-child: only-of-type: optional: out-of-range: read-only: read-write: required: right: root: scope: target: valid: visited

Now, let's look at a simple usage example. The first is a HTML fragment:

Mozilla Developer Network

Then, some CSS styles:

/ * these styles will be applied to our links in any case * / a {color: blue; font-weight: bold;} / * We want visited links to look the same as unvisited links * / a:visited {color: blue;} / * when the cursor hovers over the link, and the keyboard activates or locks the link, we make the link highlight * / avirtual hoverfield adisplay activedimentional focus {color: darkred Text-decoration: none;}

We get the following results

Pseudo element (Pseudo-element)

They are very similar to pseudo-classes, but they are different. They are all keywords, but this time the pseudo-element prefix is two colons (::), which are also added to the selector to select a part of an element.

:: after:: before:: first-letter:: first-line:: selection:: backdrop

We only show a simple example of CSS here, that is, how to add an arrow after all hyperlink elements:

CSS defined in the MDN glossary. HTML defined in the MDN glossary.

Let's add CSS rules:

/ * all elements that contain the "href" attribute and whose value begins with "http" will be followed by an arrow (to indicate that it is an external link) * / [href ^ = http]:: after {content: '⤴';}

We can get this effect:

Combiner and selector group

Combiner example

Product Qty. Price Total: 148.55 Lawnchair 1 137.00 Marshmallow rice bar 2 1.10 Book 1 10.45

Then apply the following stylesheet to the HTML document:

/ * basic table style * / table {font: 1em sans-serif; border-collapse: collapse; border-spacing: 0;} / * all td and th in table, where the comma is not a combiner, it just allows you to map several selectors to the same CSS rules. * / table td, table th {border: 1px solid black; padding: 0.5em 0.5em 0.4em } / * all thead in all table * / table thead th {color: white; background: black;} / * all td in tbody in all table (except the first one), each td is selected by the td above it * / table tbody td + td {text-align: center } / * the last of all tbody td in table * / table tbody td:last-child {text-align: right} / * th * / table tfoot th {text-align: right; border-top-width: 5px in all table tfoot; border-left: none; border-bottom: none;} / * in table, td * / table th + td {text-align: right; border-top-width: 5px; color: white in table Background: black;} / * is located in the element that has the attribute lang in the "with-currency" class and the value of this attribute is en-US, and the last (:: before) in front of the td (: last-child) node * / .with-currency [lang= "en-US"] td:last-child::before {content:'$' } / * located in the element that has the attribute lang in the "with-currency" class and the value of this attribute is fr, the last td (: last-child) node (:: after) * / .with-currency [lang= "fr"] td:last-child::after {content: 'attribute';}

We get the following results

Text style

The CSS attributes used for styling text can usually be divided into two categories, which we will look at separately in this article.

Font style: the properties that act on the font will be applied directly to the text, such as which font to use, what the font size is, whether the font is bold or italic, and so on. Text layout style: attributes that affect the spacing of the text and other layout functions, such as allowing you to manipulate the space between lines and words, and how the text is aligned in the content box.

CSS text attribute (Text)

2D/3D transform attribute (Transform)

Transition attribute (Transition)

User Interface Properties (User-interface)

You can also learn the content borders and background in https://developer.mozilla.org/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F.

The background of an element is the area below the content, inner margins, and boundaries of the element. This is the case by default-in the new browser, you can use the background-clip property to change the area occupied by the background (see CSS box model article background-clip coverage for more details).

The background is not below the outer margin-the outer margin is not part of the area of the element, but the area outside the element.

Basic content: color, image, position, repeat

Background color

You will often use the background-color attribute:

First of all, the default background color for most elements is not white (white, as you might expect) but transparent (transparent)-- so if you set the background color of an element to something interesting, but want its child elements to be white, you must explicitly set it. In addition, it is also important to set the background color as a backup. Background colors are supported everywhere, while more exotic features such as background gradients are only supported in newer browsers, plus the background image may not be loaded for some reason. Therefore, it is a good idea to set the basic background color and specify these properties, so the content of the element is readable anyway.

Let's start by building an example. Let's start with some simple HTML:

Exciting box!

We give it a background color:

P {font-family: sans-serif; padding: 20px; / * background properties * / background-color: yellow;}

The results are as follows:

Background image

The background-image attribute specifies the background image that is displayed in the background of the element. The simplest use of this property is to use the url () function-- which takes the path of a parameter as a parameter-- to get a still image file to insert.

Let's add a background image to the above example:

P {font-family: sans-serif; padding: 20px; / * background properties * / background-color: yellow; background-image: url (https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);}

The results are as follows:

Background location:

Background-position allows us to place background images anywhere in the background. Typically, this property uses two values separated by spaces that specify the horizontal (x) and vertical (y) coordinates of the image. The upper-left corner of the image is the origin (0pm 0). Think of the background as a figure, with x coordinates from left to right and y coordinates from top to bottom.

This property accepts many different value types, the most common of which are:

Absolute values like px-- such as background-position: 200px 25px. Relative values like rems-- such as background-position: 20rem 2.5rem. Percentage-for example, background-position: 90% 25%. Keywords-such as background-position: right center. These two values are intuitive, and you can take values such as left,center, right and top,center, bottom, respectively.

You should note that you can mix and match these values, such as background-position: 99% center. Also note that if you specify only one value, the value will be assumed to be horizontal, while the vertical value will default to center.

Let's revise our example:

P {font-family: sans-serif; padding: 20px; / * background properties * / background-color: yellow; background-image: url (https://mdn.mozillademos.org/files/13026/fire-ball-icon.png); background-repeat: no-repeat; background-position: 99% center;}

The results are as follows:

Background attachment

Another option to choose from is to specify how the content scrolls as it scrolls. This is controlled using the background-attachment property, which can use the following values:

Scroll: causes the background of the element to scroll as the page scrolls. If the content of the element scrolls, the background does not scroll. In fact, the background is fixed in the same place on the page, so it scrolls when the page scrolls. Fixed: makes the background of the element fixed relative to the viewport. So whether the page or the content of the element scrolls, it will not scroll, it will always remain in the same position on the screen. Local: this value was later added (it is only supported in Internet Explorer 9 +, while the rest is supported in IE4+) because the scrolls are quite confusing and in many cases don't really do what you want. The local value sets the background to the background of the element it sets, so when you scroll the element, the background scrolls with it.

Background-attachment properties only work when there is content to scroll through, so we did a demonstration to demonstrate the difference between these three values-you can look at background-attachment.html (or you can see the source here).

CSS background attribute (Background)

Frame

A border is also called a boundary, and an element has a boundary that lies between the inner margin (padding) and the outer margin (margin) of the element. By default, the size of the boundary is 0, making it invisible, but you can set the weight, style, and color of the boundary to make it appear.

Boundary abbreviation

The border shorthand property allows you to set all of these to four sides at a time, for example:

I have a red border!

P {padding: 10px; background: yellow; border: 2px solid red;}

CSS border properties (Border and Outline)

The above is all the contents of the article "what are the basic knowledge points 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.