标签： CSS

发布于

CSS基本笔记（CSS Memo)

1. Reasons to use CSS: DRY, Clean

Examles: 1.

<h1 style="color: #98c7d4;"> Hellow World! </h1>
2.
<head>
<style>
h1 { color: #98c7d4; }
</style>
</head>

This two way maybe will repeat numerous times, so the paragraph of code will be large. The best way is making a External sheet in the following way：

<head>
<title>CSS Cross Country</title>
<link rel="stylesheet" href="styles.css" />
</head>

This will make your codes DRY(Don’t Repeat Yourself)



2.Cascade Order(something about the code priority)


 


Using !important < Inline style arttribute  < In the <head>  < External <link>


 




3.Primary DOM selectors


Example:


<h1 class="intro" id="header">Hello World!</h1>




-Element selector


h1{
 color:#aba4ac;
 margin-bottom:10px;
}


-Class selector


.intro{
  color:#abc4ac;
  margin-bottom:10px;
}


-ID selector


#header{
  color:#abc4ac;
  margin-bottom:10px;
}




4.Float <float: left/right/none;>


when we put pictures and paragraphs in a container, we could us Float to deal with their relation.


*Floated elements stack up to the parent edge, then move down to the next available edge. 


*Take care with elements that have differing heights-the first available edge isn’t always below.


 


Clearfix


/*Originally developed by Tony Aslett and Refined by Nicholas Gallagher */
.group:before
.group:after{
  content:"";
  display:table;
}
.group:after{
  clear:both;
}
.group{
  zoom:1;/*IE6&7*/
}


 


5. Inheritance & Specificity


Override parent properties: nested selector


    0      ,0     ,0     ,0


inline style     #if ID       #of class   #of element


 


 6.BOX


Total box width = content width + padding width +border width


 


Box overflow:


overflow: visible /auto/hidden /scroll


↑when content beyond the container boundaries;


 


Positioning:<position: static/relative/absolute/fixed;>


 


Z-index:


z-index:1;


↑Overlaping


Example:


<article>

  <img class="Green" src="Green.jpg" alt="Ski!"/>

  <img class="sled" src="sled.jpg" alt="Sled!"/>

</article>
.Green, .Brown{

  z-index:1;

}


.Brown{

  z-index:1;

}


In these case the Brown class should be above the Green class


 


7. Display Types:<display: block/inline/inline block;>


block:<div><p><ul><ol><li>


inline:<span><a><em><img>


 


8.Horizontal Centering


In block level:


margin: 0 auto;


in inline block level:


text-align:center;


 


9. Image Cropping


Solutions:


Overflow:hidden;


Or we could


.cropping img {

  height: 300px;

  width:auto;

}