[Beef Brisket News Release System]--CSS learning_html/css_WEB-ITnose

The 19th episode of Beef Brisket starts to talk about CSS related content, which is also a big step closer to real web page production. Here is a brief introduction to the basic content

and core content of CSS.

Du Niang’s statement

CSS is an application used to represent HTML (an application of Standard Universal Markup Language) or XML (a subset of Standard Universal Markup Language) and other file

style computer language. Compared with the performance of traditional HTML, CSS can perform pixel-level precise control over the position and layout of objects in web pages, supports

almost all font size styles, and has the ability to edit web page objects and model styles. , and can carry out preliminary interaction design. It is currently the best performance design language based on text display

. CSS can simplify or optimize the writing method according to the understanding ability of different users. It is highly readable

for all types of people.

My understanding

In the two episodes of learning CSS videos, the basic content and core content were introduced. Now I will focus on these two aspects. :

1. Basic content

Let’s first talk about the characteristics of CSS: realizing the separation of web content and style. The purpose is to write the main styles of the web page in CSS in large projects.

From the title to the content, you can set them separately to make the entire web page display consistent. The ITOO we are developing now is an obvious example. Because

the interface of each function is consistent. Of course, there is definitely more than one way to design content using CSS, but CSS also makes an important contribution.

Then there are the features of CSS: selectors. In order of priority: ID selector > Class selector > HTML tag selector. So what are they

respectively, and what rules do they have?

ID selector : By setting

#aaa {    border :1px solid #100;    padding :5px;}

in CSS, just call the id as aaa in the HTML page.

<span id="aaa"> 栏目一</span>

Class selector : Set in CSS

.title {    color :#00f;  /*新闻标题样式*/    clear:left; /*清除浮动*/}

Calling

<span class="title" > 栏目一</span>

HTML tag selector in an HTML web page: refers to content in HTML other than the ID selector and class selector settings, as follows:

<pre name="code" class="html"> <span id="aaa">栏目一</span> <span class="title" > 栏目二</span> 栏目三

In the above code, only "column three" does not have special selector settings, so it belongs to the tag selector , as long as it is in the body in CSS

Set the corresponding style to make column three also have a special style.

body {    color:#f0f;}

Note: Because of the priority relationship between the three, whenever there is a conflict, the content in the preferred selector will be

Accurate.

Core content

The core content of CSS is: standard flow, box model, floating and positioning. Expanded content includes block-level elements and inline elements.

Here are the meanings of the core content:

1. Standard flow: It is the order of tags in CSS.

body {    color:#f0f;}.menu {    color :#f00; /* 文字颜色*/}.title {    color :#00f;  /*新闻标题样式*/    clear:left; /*清除浮动*/}

For example, in the above content, the title content comes after the menu, so if

<span class="title class=menu" > 栏目二</span>

appears, then the content in the menu will appear first. content mainly.

2. Box model: has margins: top, bottom, left, right; inner margins; content area : Width, height; Frame: A page design of width.

A picture illustrates the box model:

So just set the values ​​for the relevant properties in CSS.

3. Floating and positioning: both adjust the position of the box.

Floating: can move the position of the box left or right.

Positioning: can change the relative and absolute position of the box.

4 (Extension), block-level elements and row-level elements.

Block-level elements will occupy their own line, and their width will automatically fill the width of their parent element.

Inline elements will not occupy an exclusive line. Adjacent inline elements will be arranged in the same line. They will not wrap until they cannot fit in one line. The width will depend on the element

changes according to the content of

And row-level elements can be transformed into block-level elements, which I won’t go into detail.

Summary

Through learning about CSS, I feel that its role is quite powerful. I will slowly experience its benefits in the next web page production~