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

This article mainly shows you "what are the basic selectors 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 what are the basic selectors of css.

CSS basic selector (style the specified tag, select the specified tag): element selector, class selector, id selector, composite selector, generic selector

1. Element selector (type selector or tag selector): declares which elements are in css style

two。 Class selector (class): an element that applies a style regardless of the specific design. In order to associate the style of the class selector with the element, you must specify an appropriate value for the class attribute in the element.

The class selector is represented by the class attribute in HTML, and in CSS, the class selector is represented by a dot "." The number shows. You can also specify that specific HTML elements use class.

In HTML, a class attribute may also contain multiple attribute values separated by spaces, indicating that multiple classes are applied to the same tag. Can be used multiple times to represent categories.

Document

P.special {

Color: red

}

3. Id selector (id):

The id selector can specify a specific style for HTML elements marked with a specific id.

The HTML element sets the id selector with the id attribute, and the id selector in CSS is defined with "#".

Unlike class selectors, id selectors cannot be combined, do not allow multiple values separated by spaces, and can be used only once.

# red {color:red;}

This paragraph is red.

4. Combination selector:

Multiple selectors (element selector, class selector, id selector, and so on) are connected by commas.

The same style can be combined.

Html5 semantics

Header, section, footer, aside, nav, article, figure

{

Display: block

}

Nav,header,p,article {

Width: 1200px

Margin:0 auto

}

Ul {

Height:40px

Background-color: # fff

List-style: none

Display: inline-block

Width: 1200px

Padding: 0px

}

Li {

Line-height: 40px

Text-align: center

Float: left

Width: 400px

Margin:0 auto

}

Li:hover {

Background: pink

}

A {

Text-decoration: none

}

. Post {

Border:1px dashed # 000

Padding: 0 0 20px 20px

Margin-bottom: 40px

Padding-top: 10px

Background-color: # fff

}

# content {

Border:1px solid # ccc

Padding:30px 40px

Background-color: rgb (247244255)

Margin-top: 20px

}

Page navigation

Check the relevant content and return to the home page to this page.

Author, junior programmer

Training, about half a year, js, jquery, bootstrap, angular, vue, Ajax, database, php, object-oriented, Web server, mobile

I think it's okay.

Author: Amy

There are still many jobs, and php is the best choice for lightweight website development.

Not bad.

Author: Keyboard Man

Bachelor degree, major in information, can be so many, will not be found, have a little confidence in yourself

I am in charge of my post.

About the landlord

User group: rookie beginner

Number of reads: 20

Release time: 2020-03-18

My logo

5.? Universal selector:? Asterisk (*)

The selector can match any element and set attributes and attribute values for all elements in the document.

Div layout

* {margin: 0

Padding: 0

Border: 0

}

# header {

Width: 100%

Height: 80px

Line-height: 80px

Background-color: rgb (255pr. 165pr 0)

}

# main {

Height:200px

}

# menu {

Float: left

Height:200px

Width: 10%

Background-color: yellow

}

Menu {

Height: 200px

}

B {

Display: inline-block

Margin-top: 10px

Font-size: 18px

Margin-left: 5px

}

Ul {

Margin-left: 46px

List-style: none

Margin-top: 10px

}

Ul li {

Line-height: 40px

}

# content {

Float: left

Height:200px

Background-color: pink

Width: 90%

}

# content p {

Text-align: center

Line-height: 200px

}

# footer {

Background-color: gray

Height:80px

Line-height: 80px

Text-align: center

}

The above is all the content of the article "what are the basic selectors for 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.