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 |