Home > Developer > Web Develop
Next, the small series from the most basic Css.div Web page style and layout, began to introduce slowly, a little bit in-depth, and then combined with examples, slowly analysis, hope to help you. Usually when we are learning CSS, we should try to reference her website to write CSS. such as Baidu, Google, and so on, through the study of her website's CSS code, can be very quickly on the page design has a different heart feeling, easier to get started. This is what we call "standing on the shoulders of giants." "Today's small part of the main simple introduction of the basic concept of CSS and CSS basic syntax, first we look at a picture:
Then, the small series will follow the context of this diagram, in turn, reduce the basic knowledge of CSS.
Explore CSS
Concept: CSS (cascading style Sheet), Chinese as a cascading style sheet, is a markup language that controls the style of a Web page and allows the separation of style information from the content of the Web page.
Use the CSS control page: CSS There are four ways to control a page: inline style, embedded, linked, and imported styles. We use a link style for a slightly larger web page because it is written separately from HTML and CSS for later maintenance and clarity.
Basic Syntax
for css selector, which is what we choose html objects are css Style control, there are three kinds: Tag Selector, category selector and ID selector, next, the small series of these three selectors are described in detail.
Tag Selector:
Let's look at an example of the code and how it looks:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">The effect is as follows:
category selector: continue with category selector: That's what we always say. Class.
Compare the tag selector above, It 's easy to see that a H1 becomes a. class; otherwise, we can see how the code is applied, let's look at an example of the code and how it looks:
analysis of the above code, each of our P tags are controlled by a class, a class= "one" corresponding to a. one{}, and then add the properties in the. One, the effect is as follows:As we can see, this H3 with. Both is an effect, but the font is not the same, that is H3 the default font and class differences. The advantage of using class is that it allows the user to be fully customizable and the class can be reused, as shown by our P-Mark and H3 logo.
ID Selector
let's look at an example of the code and how it looks:
compared to the category selector a "#", the difference between the ID and class is: ID does not allow two of the same ID, the display effect is as follows:Declaration of CSS
for css There are three kinds, collective declarations, Global declarations and nested declarations, see below two examples:
The effect is as follows:
bottom This example is a nested declaration, can help us find the exact area we want to control:
Nested declarations for <HTML><HEAD><TITLE>CSS selectors </title><style type= "Text/css" ><!--p b{/* nested declarations */ color:maroon;/* color */text-decoration:underline;/* underline */}--></style>The effect is as follows:css , click for details, let's take a look at an example code and the effect of the run:
The effect is as follows:Small Series of words: The blog, the small part of the main introduction of the basic knowledge of CSS, generally divided into two parts to introduce, one is to explore CSS, one is the basic syntax of CSS, a preliminary discussion of CSS including concepts and the use of CSS control pages, CSS basic syntax including three aspects of the content, are CSS selectors, CSS declarations, CSS inheritance, respectively. With CSS let our interface instantly live up, moved up, let our internet world more colorful, beautiful unlimited, BS study, not finished, to be continued ...
Proficient in Css+div Web page style and layout--a tentative study of CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
