DIV CSS learning summary_html/css_WEB-ITnose-HTML Tutorial-php.cn

DIV CSS learning summary_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:21

Original

1162 people have browsed it

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>

Copy after login

Inline style sheet

Insert styles directly into html tags

Example :

<h1 style=“color:red”>示例<h1>

Copy after login

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”/>

Copy after login

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>

Copy after login

Change the color of the content in the

tag through the CSS id selector.

#color{	font-color:red;}

Copy after login

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>

Copy after login

Change the color of the content in the

tag through the CSS class selector.

.color{	font-color:red;}

Copy after login

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>

Copy after login

Change the color of the text in the

tag through the tag selector

P{	color:red;}

Copy after login

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.