CSS basic content-special dedication during the Mid-Autumn Festival

CSS Basics

 

1. Create HTML page 1

 

2. Create HTML page 2

 

3. View in the browser

 

4. webpage display

33218 in http: // localhost: 33218/desktop2/01.htm is the port number, which is not displayed if the default port number of the http://baidu.com.cn is 80.

There is another problem, we use vs built web pages, the default encoding is UTF-8 encoding, the browser will automatically identify, so no garbled.

There are also some notes for small usage

 

5. Modify the default browser

 

Vi. Design Mode

Next let's take a look: div layer (everything can be put), span (text)

The two labels are circled by a circle.

Let's take a look at the following case

 

VII. Div and Span

 

8. Let twoCodeInterchange

 

9. Change the length and width of span and Div.

DivThere are a lot of web page la S.When we were not very familiar with DIV in the past few years, we used tables for layout. However, if you do not do this now, a large amount of junk code will be generated. These tables are hidden and will not be displayed to users.

 

10. Query of elements in HTML

The following describes CSS:

What is CSS used?

CSS (Cascading Style Sheet) is used to beautify the page. You can set page elements in more detail, the style mainly describes the font color, background color, and border of the element.

For example, the skin replacement function in the QQ space.

 

Benefits of using CSS:

Exterior beautification layout and positioning

Style Sheets can separate content from styles,Convenient team development

It is convenient to define the format and modify the format.

The appearance style of HTML tags is relatively simple.

The page color is not vivid

Style modification is inconvenient

The role of a style sheet: Set the appearance of a webpage, which is equivalent to a gorgeous dress.

 

The following describes some common attributes of CSS:

For more information, see CSS.

 

11. Learn to view CSS-related e-books

Of course, we will write the CSS file and HTML code together during the demonstration here.

 

12. Set the CSS style in the layer.

 

13. Set the foreground color

Next we will set the height and width of the lower layer.

 

14. Set the width and height

Next, remove the background color,Set border operations:

 

15. How to set borders

 

16. Simple border writing

See how to set four border styles:

 

17. Set borders of the upper, lower, and left sides

If some browsers cannot be displayed after the settings are completed. The reason is the compatibility of the browser. At this time, you can only try to simulate it yourself.

 

18. Set borders in the table

Insert a small problem

 

19. Start the service

 

20. Display and hide

 

 

21. When the mouse moves into the transform icon

Next, it is related to the column label.

 

22. Different column object display

 

23. settings of margin

Margin: value 1; // the upper right bottom left is the value 1.

Margin: value 1 value 2; // the upper and lower values are 1, and the left and right values are 2.

Margin: value 1 value 2 value 3; // if the value is around 1, the value of 2 is 3;

Margin: value 1 value 2 value 3 value 4; // each value is: Top right bottom left; (clockwise direction)

 

Next let's talk about the style selector.

We mentioned a lot of styles just now, but they are all directly written in the labels. These styles can only be applied to the current tag. If there is another Div, I have to write it again. Let's make the body contain all HTML elements. First, extract CSS into the head and title labels. Let's see how I refine it.

 

24. Remove all CSS and paging drag buttons in HTML

Even if we write a border style above, how does it know which layer I want to give it? In this case, the selector is used to tell which element in CSS is used.

First selector:Tag selector.

 

25. 1. Tag Selector

 

26. Set the table tag Selector

Second selector:Id Selector

 

27. ID Selector

Note that the ID name cannot be the same. Otherwise, unexpected results may occur.

Requirements:

There is a style that can be used in div; it can be used in table TD; span may also use it; it is also used in button. This style may be used by a variety of different elements on the page. The ID selector can handle this problem, and the code has to be written many times. Use the class selector described below.

Third selector:Class Selector

 

Class Selector

 

19th. Two styles are referenced at the same time.

CSS selector priority: Id selector> class selector> label Selector

Note: the higher the specific priority.

It won't work when it comes to style.

CSS is higher than HTML Tag.

Fourth selector:Label + class selector

 

30. Tag-based class selector

Introduce some other selectors,Include selector:

 

Layer Selector

 

. Add a selector to the tag Selector

Combine selector and set a style for Multiple labels at the same time

H1, H2, input {background-color: Green}

<H1> nihao

<Input type = "text" value = "test"/>

(*) Other CSS selectors: div> P (sub-Selector), div + P (adjacent selector ),.... IE7 or earlier is not supported. You will also learn in jquery.

 

Back to start position

Author's recentArticleList:

C # intermediate advanced tutorial (completely free, the best gift for code lovers. Note: I have shared my carefully-organized C # intermediate advanced tutorial without any commercial purpose. I hope to share my experiences with more code lovers. Please give me more advice !!!)
Asp.net Project	Library mall project overview
Layer 3 and other content	Recursion
	Layer 3 (1)
	Layer-3 cases (and Common Errors)
	Layer-3 instances (SQL crud)
	Handwritten Code Generator
SQL database ado.net	Database Application diagram 1
	Database Application details 2
	Ado. Net (connotation efficiency problem)
	Ado. Net example tutorial 1
	Ado. Net example tutorial 2
	Database Application details 3
	Ado. Net (including stored procedures)
Process-oriented, object-oriented, and advanced	Process-oriented, object-oriented in-depth understanding 1
	Process-oriented, object-oriented in-depth understanding 2
	Object-oriented deep understanding 3
	Ubiquitous XML
Winform Basics	Winform Basics
	Commonly used controls in winform
Process-oriented	Comparison of three cycles
	Method (I) in C)
	Our common Array
Object-oriented	Thought Change
	C # super-class and easy-to-use classes
	The use of destructor and namespaces in C #
	C # super-class and easy-to-use strings
	How to quickly process strings in C #
	Value Type, reference type, and others
	Arraylist and hashtable
	Arraylist and hashtable
	File Management
	Polymorphism
	Section on other issues in C #
GDI +	The GDI + code I have collected over the years
	The GDI + Code 2 I collected over the years
HTML overview and CSS	HTML language that you cannot ignore
	You can't ignore HTML 2.
	HTML language 3 that you cannot ignore
	HTML-Comprehensive
	CSS basic content-special contribution to the Mid-Autumn Festival
	CSS basic content 2
Javascript Basics	Javascript basics 1
	Javascript basic 2 Javascript DOM Programming
Jquery	Jquery (connotation: jquery selector)
	Jquery Example 1