Home > Developer > Web Develop
Proficient in CSS + DIV webpage style and layout -- Preliminary Research on CSS and cssdiv
CSS (English name: Cascading Style Sheet) is a markup language used to control page styles and allow the separation of Style information from webpage content, DIV + CSS is the WEB design standard. It is a WEB page layout method. Unlike the traditional table layout Positioning method, the content and performance of webpage pages are separated. When talking about the DIV + CSS combination, we should also start with XHTML. XHTML is a new language optimized and improved based on HTML (a subset of standard General Markup Language). It is designed based on XML applications and powerful data conversion capabilities, adapt to more network applications in the future. "DIV + CSS" is actually an incorrect name, and the standard name should be XHTML + CSS. Because DIV and Table are both a tag in XHTML or HTML language, CSS is just a form of representation.
Next, let's take a look at the most basic CSS. DIV webpage style and layout. Then, let's take a look at it a little bit. Then, let's take a look at the examples and try to help you. When learning CSS, we should try our best to compile CSS with reference to her website. For example, Baidu, Google, etc. By learning the CSS code of her website, we can quickly feel different in the page design, making it easier to get started. This is called "standing on the shoulders of giants ." Today, I will briefly introduce the basic concepts of CSS and the basic syntax of CSS. First, let's take a look at the figure:
Next, the editor will follow the context of this figure to reduce the basic knowledge of CSS in turn.
Preliminary Research on CSS
Concept:CSS (Cascading Style Sheet) is a markup language used to control webpage styles and allow the separation of Style information from webpage content.
Use CSS to control the page:CSS controls pages in four ways: in-row style, embedded style, link style, and import style. Link styles are used for a slightly larger web page, because HTML and CSS are written separately for later maintenance and clarity.
Basic syntax
For the CSS selector, that is, the html object we select for CSS style Control, there are three types: Tag selector, category selector and ID selector. Next, the Editor gives a detailed introduction to these three selectors.
Tag selector:
Let's take a look at the code of an example and its display effect:
<! 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 the class selector: we often say. class.
Compared with the above tag selector, we can easily see that an h1 becomes. class; if nothing else can be seen, let's look at how the code is applied. Let's look at the code of an example and its display effect:
<Html> Analyze the code above. Each P Mark is controlled by a class, and a class = "one" corresponds to one. one {}, and then in. you can add attributes to one. The effect is as follows:As we can see, this h3 is different from. two, but the font is different, that is, the default h3 font is different from the class. The advantage of using class is that users can fully customize and use this class repeatedly. This is what our p Mark and h3 mark show.
ID Selector
Let's take a look at the code of an example and its display effect:
<Html> The comparison class selector has a "#" option. The difference between ID and class is that two identical IDs are not allowed for ID. The result is as follows:CSS Declaration
There are three types of CSS statements: collective declaration, global declaration, and nested declaration. See the following two examples:
<Html> The effect is as follows:The following example shows the nested declaration, which can help us precisely find the areas we want to control:
<Html> The effect is as follows:CSS inheritanceFor details, click here. Let's take a look at the code of an example and the running effect:
<Html> The effect is as follows:Note:In this blog post, I will introduce some basic knowledge about CSS. In general, I will introduce it in two parts: First, CSS, and then the basic syntax of CSS, A Preliminary Study of CSS includes concepts and the use of CSS to control pages. The basic syntax of CSS includes three aspects: CSS selector, CSS declaration, and CSS inheritance. With CSS, our interface is instantly active and dynamic, making our Internet world more colorful and beautiful. BS learning is not complete, to be continued ......
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
