Introduction to Div+css Layout (vi)--about IDs and class

Source: Internet
Author: User
Tags comments
css| Tutorials | Getting started This is the first day of the last half month, around 20:00 to work, thinking about this tutorial has not been completed, the feeling is very not practical. Just resigned two months ago, would like to complete the tutorial, but due to a misfortune, resulting in the hard disk of the majority of the data lost, the half of the tutorial has been written in the Ashes. But recently a lot of netizens through the blog, QQ, MSN, e-mail and other ways to contact me, I hope to continue to update this tutorial, and even netizens actually call my mobile phone (I do not know how everyone knows my number, ah ~ ~) was moved by everyone, although the time is very tight, But still take some time to complete this tutorial ~ ~ As the whale Uncle said, time is milk, the more crowded more ~ ~

First, there's something to explain. For the previous article, because in order to let everyone better distinguish between the relationship between the layers, many of the tutorials in the use of uppercase class or ID, in fact, this is not recommended, I recommend the method is to use words to increase the underline, or the word splicing method. Because CSS is case-sensitive. As you can see, all of the downloads I've provided to you are handled using lowercase.

Let's deal with the sidebar style, and after analysis, we can tell that there are four parts of sidebar, and we divide the four parts into four layers:


Here we have to ID and class, then some friends will ask, exactly what circumstances with the ID, under what circumstances with class?

ID, which represents uniqueness, and only once in this page, we use it to represent the structure of the layout;
Class, which represents a group (class) or an element of the same nature that can share styles, and will appear more than once in the page.

Because the user login, site information, page standards and the contents of these areas of the word style will be the same, so we put them in a group.

But sometimes, what do we do when we need to set different styles for the elements in these layers? For example, the user login to the text using 14px bold, the other is the use of 12px bold, how do we write CSS, look at the following code?
. bar_title {Font-size:12px;font-weight:bold}
#login. Bar_title {font-size:14px}

#login. Bar_title represents the style of the bar_title element in the class with ID login, so that it can be targeted to customize the style of some elements. #login. Bar_title the style of the font-size:14px, which is also inherited from the. Bar_title, which is font-weight:bold, bold.


title2


Here, I want to set the text style of Title1 to 14px, red, title2 text style 10px, green, title1 and title2 all need bold, div plus a red 1px border, span plus a green 1px border, style can write:
. title {border:1px Solid #f00}/* default to 1px red border * * *
Span.title {border-color: #0f0}
. Title A {Font-weight:bold}
Div.title a {font-size:14px;color: #f00}
Span.title a {font-size:12px;color: #0f0}

As you can see, the use of class can make many elements can share the same style, through the tagname of the elements of the different, but also for each element to customize a different style, I think we should be when the ID, when the class has been a profound understanding of it!

Well, this tutorial is here, I do not know when the next tutorial is updated, but I will as soon as possible, thank you for your support.

In addition, it took some time to rearrange the previous files and provide a downloadAnd added detailed comments, you can learn more by looking at the comments in the document.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.