Home >Web Front-end >HTML Tutorial >DIV CSS learning summary_html/css_WEB-ITnose
DIV CSS learning summary_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:211165browse
DIV CSS is a WEB design standard, it is a web page layout method. Different from the traditional way of positioning through table layout, it can realize the separation of web page and presentation.
Because I have a lot of exposure to CSS in Beef and JS, now when I learn DIV CSS, it no longer feels strange, it is all resonance~~
No matter how you set it up CSS styles are indispensable for selector and style sheet.
Style Sheet
There are three main types of style sheets. They are embedded style sheets, external style sheets and inline style sheets respectively.
Embedded style sheet
Add a style sheet between the
tags in html.Example:
<head> <title>示例</title> <style type=”text/css”> #color{ font-color:red;}</style></head> Inline style sheet
Insert styles directly into html tags
Example :
<h1 style=“color:red”>示例<h1>
External style sheet
Create a new CSS file and insert it into the HTML code through the link statement.
Example:
<link type=”text/css” rel=”stylesheet” href=”css/示例.css”/>
Selector
There are three most commonly used selectors, namely ID selector, class selector and Tag selector.
ID selector
In HTML, you can add an ID to an element to determine the position of the element. At the same time, this ID must be unique and non-repeatable. You can set styles for tags by ID
Example:
Set an id called color for the p tag.
<p id=”color”>示例 </p>
Change the color of the content in the
tag through the CSS id selector.
#color{ font-color:red;} Class Selector
In HTML, you can add class attributes to tags and set attributes for tags through class.
Example:
Set a class called color for the p tag.
<p class=”color”>示例 </p>
Change the color of the content in the
tag through the CSS class selector.
.color{ font-color:red;} Tag selector
can change the style of the content in the tag according to the HTML tag.
Example:
Change the color of the text in the
tag
<p>示例</p>
Change the color of the text in the
tag through the tag selector
P{ color:red;} Summary
Selectors and style sheets are the most basic elements in CSS. Once you master these, you will be more comfortable when learning other things.
During the video learning, I also learned the comprehensive application of CSS and JavaScript, CSS and XML, and CSS and Ajax, but my mastery is not very good and more practice is needed to further deepen my understanding.