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>
?
轉載于:https://www.cnblogs.com/teyues/p/5629148.html
總結
以上是生活随笔為你收集整理的php-css外边距的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 设计模式(24)-----责任链模式
- 下一篇: 鱼眼镜头的坐标变换