8.3 CSS style

8.3 CSS style

Reference link: http: //how2j.cn/k/css2/css2-border/249.html

A, CSS what role,

Css is not used to each cell plus a background color, it is necessary to each element plus td bgcolor attribute

Use css to every cell plus the background color, you only need to write a css code at the top, all cells have a background color

二、CSS的语法

2.1 css syntax selector {property: value} {i.e. selector attribute: value} 

2.2 Notes style style: / * style comment * / 

Third, the selector

The selector is divided into three kinds of 
3.1 element selector, select the element tag name 

<style>
p{
  color:red;
}
</style>
 
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>

3.2 id selector, id of an element should be unique. Another element should not be reused

<style>
p{
  color:red;
}
#p1{
  color:blue;
}
#p2{
  color:green;
}
</style>
 
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>

3.3 class selector, when multiple elements, css use the same time, it uses the class selector

<style>
.pre{
  color:blue;
}
.after{
  color:green;
}
</style>
 
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
 
<p class="after"></After 3p>
<p class="after">后3个</p>
<p class="after">后3个</p>

3.4 while at the same time according to element names and class to select p.blue

<style>
 p.blue{
  color:blue;
}
 </style>
 <p class="blue">class=blue的p</p>
 <span class="blue">class=blue的span</span>

Four, CSS style common

4.1 Background

Color style in three ways: 1, predefined color name 2, rgb format 3,16 hexadecimal representation

    background-image: url (/study/background.jpg); represents background FIG.

<style>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
<!--背景图-->
div#test
  {
    background-image:url(/study/background.jpg);
    width:200px;
    height:100px;
  }
 </style> 
 < P class = "Gray" > Gray </ P > 
< h1 of > transparent background, default i.e. transparent background </ h1 of > 
< H2 > Purple </ H2 > 
< H3 > green background </ H3 > 
< div ID = " Test " > 
  which is a background of the dIV 
</ div >

Fifth, the box model

.box{

width:70px;

padding:5px;

margin: 10px;

}

Blue box is the content
width: 70px represents the content of the size of the
red frame is the frame
content between the distance to the border, that is, padding 5px
gray box, is the distance between the border and the other elements, namely margins : 10px