php-css外边距

 

css 基本语法  selector{declaration1;declaration2;....delecrationN;} (选择器和一条或多条声明)  选择器为需要改变样式的html元素,每条声明由一个属性一个值组成。总结:selector{property:value;property:value;}

h1{color:red;size:14px;}

h1{color:red;font-size:14px;} 

p{color:#ff0000;} p{color:rgb(255,0,0);}

p{font-family:"one two";}

p{color:red;align="center";}

p{text-align:center;color:red;}

p{

 text-align="center";

 color:red;

  font-family:arial;(font-family:"lucky one";)

}

与html一起工作class 和id对大小写敏感。

margin声明设置中外边距属性 该属性有1-4个值 

margin:10px 4px 12px 24px; (上右下左)

margin:10px 5px;(上下边距为10 右左边距为5)

margin:10px(上下左右均为10)

eg:(背景颜色要在字体颜色前设置)

<html>

<head>

<style type="text/css">

p{

    background-color:green;

    color:red;   

    font-size:20px;

    margin:2cm 3cm 5cm 4cm;

</style>

</head>

<body>

<h1>一级标题</h1>

<p>本段修改了格式</p>

<h2>二级标题,并没有修改格式</h2>

</body>

</html>

eg2(指定某个class采用格式)

类选择器:元素可以基于它们的类而被选择:

在css中,类选择器用一个.表示

例如:.test

td.test{

color:red;

font-size:20px;

}

<td class="test">

实例

<html>
<head>
<style type="text/css">
p.first{
    background-color:green;
  color:red;
  font-size:30px;
  margin:2cm 3cm 4cm 3cm;

}
p.second{

color:yellow;
font-size:20px;
margin:2cm 2cm 2cm 2cm;

}
</style>
</head>
<body>
<h1>一级标题</h1>
<p class="first">此处设置格式</p>
<p>段落三未设置</p>
<p class="second">此处设置格式2</p>
</body>
</html>

属性选择器:(前提:只有规定了!DOCTYPE IE7 IE8才支持属性选择器)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

[title]{

background-color:green;

color=red;

font-size:20px

}

<style>

eg:(title可赋值可不赋值 赋值为指定某一title名的约束)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p.test{
background-color:red;
font-size:20px;
margin:2cm 2cm 2cm 2cm;
}
[title=JORDON]
{
background-color:green;
color:red;
font-size:30px;
}
</style>
</head>
<body>
<h1 title="Eason">Eason</h1>
<p title="JORDON">make another choice</p>
<p class="test">form表单的作用</p>
<h2 title="JORDON">JORDON</h2>
</body>

</html>

 

posted @ 2016-06-30 10:31  小野猪  阅读(853)  评论(0编辑  收藏  举报