【codecademy summary】html+css div

ID:

With the proper labels, we can style individual HTML elements.Specifically, we can label HTML elements with a unique idenitifier, or ID. We can then style that specific element in the stylesheet. IDs are intend to lablel uinque elements in an HTML file. No two HTML elements should ever share the same ID.

ID exmaple: we can use

　　<h1 id="exmaple">exmpale</h1>

　　or

　　<div id="exmaple">

　　　　<h1></h1>

　　　　<h2></h2>

　　</div>

to define a ID in HTML.

And we use

　　#exmaple{}

to define a ID selectors in CSS

 

-------------------------------------------------------------------------------------------------------------------

 CLASS:

For multiple elements that shoiuld share the same styling, class can be used to label them.

CLASS exmaple: 

　　<div class ="exmaple">

　　　　<h1></h1>

　　　　<h2></h2>

　　</div>

And we use 

　　.exmaple{}

to define a class selectors in CSS

 

-------------------------------------------------------------------------------------------------------------------

 

While some factors in class require a styling better suited, as in teh following exmaple:

We choose the paragraph:

　　.exmaple{

　　　　font-family: Georgia,Times,serif;

　　}

　　p.exmaple{

　　　　line-height: 1.3em;

　　} 

In the exmaple, the .exmaple selector targets all elements with class of exmaple. The p.exmaple selector targets only <p> in exmaple. So ,unless otherwise specified, the rest of this course will use the element.class selector syntax.

 

-------------------------------------------------------------------------------------------------------------------

 

The same syntax can be used to sytle multiple classes at once.

exmaple:

　　h1,p{

　　　　font-family:Garamond,serif;

　　}

or

　　.first, .last{

　　　　font-size:20px;

　　}

Using a multipe class selector is an efficient way of styling multiple HTML elements.

 

-------------------------------------------------------------------------------------------------------------------

 

When same elements must also be differentiated, labeling with an additional class is helpful.

exmaple:

In html

　　<h1 class="exmaple list1">exmaple1</h1>

　　<h1 class="exmaple list2">exmaple2</h1>

In CSS

　　.exmaple{

　　　　font-family: Georgia, serif;

　　}

　　.list{

　　　　font-color: #0902cc;

　　}

　　.foreign{

　　　　font-color:#b097dd;

　　}

 

-------------------------------------------------------------------------------------------------------------------

 

We need a way of organizing the contents of the HTML file. For example, a <div> can be used to group together all of the elements that make up the nacigation for a web page, or ant other section of a  page.

 

-------------------------------------------------------------------------------------------------------------------

 

DIV:

We can start labeling divs with classes instead, rather than labeling indicidual elements with class. But does not mean that labeling individual elements with classes is no longer useful. Even when divs are labeled with classes, there will be many other times when an individual elements will need to be labeled with a class.

exmaple:

In html:

　　<div class="container">

　　　　<h1 class="title">...</h1>

　　　　<p></p>

　　</div>

In css:

　　div.container{}

　　h1.title{}

　　.container p{}

-------------------------------------------------------------------------------------------------------------------

1. Code is a lot more readable when it is organized using IDs, classes, and divs.

2. IDs label HTML elements that are unique to the web page (an element that appears only once).

3.Classes label elements that will share the same styling. They make styling more efficient.

4. The <div> groups elements together. It makes the HTML file easier to read by organizing the web page into logical sections.

5. HTML elements can be labeled with multiple classes.

6. Divs are one of the most commonly used HTML elements. Understanding how they are used is a critical skill for web developers.

转载于:https://www.cnblogs.com/guangluwutu/p/6433712.html