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>

php-css外边距的更多相关文章

  1. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  2. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  3. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

  4. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

  5. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  6. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  7. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  8. CSS 外边距合并。

    <div id = "parent"> <div id = "child"> demo </div> </div> ...

  9. CSS外边距属性，深入理解margin

    margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...

  10. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

随机推荐

  1. BZOJ2595[WC2008]游览计划

    Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行, 每行有 M 个非负整数, 如果该整数为 0, 则该方块为一个景点:否则表示控制该方块至少需要的志愿者数 ...

  2. HTML和xhtml，CSS

    索引: 初学者入门书籍 高级进阶书籍 W3C官方手册 网站架构 移动平台网站开发 视频资源 开发工具 初学者入门书籍: 中文电子书    深入浅出html pdf中文版 魅丽的网页设计 JAVA WE ...

  3. GridView绑定Visible

    hyerLinkFiled的显示绑定方式 ,强制类型转换后再绑定! Visible='<%#Convert.ToBoolean(Eval("字段名")) %>'

  4. Python-03-基础

    一.集合 集合(set)是一个无序的.不重复的元素组合,它的主要作用如下: 去重:把一个列表变成集合,就会自动去重. 关系测试:测试两组数据之前的交集.差集.并集等关系. 常用操作 # 创建数值集合 ...

  5. SQL Left Join, Right Join, Inner Join, and Natural Join 各种Join小结

    在SQL语言中,存在着各种Join,有Left Join, Right Join, Inner Join, and Natural Join等,对于初学者来说肯定一头雾水,都是神马跟神马啊,它们之间到 ...

  6. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  7. Mysql索引PRIMARY、NORMAL、UNIQUE、FULLTEXT 区别和使用场合

    索引 数据库的索引就像一本书的目录,能够加快数据库的查询速度. MYSQL索引有四种PRIMARY.INDEX.UNIQUE.FULLTEXT, 其中PRIMARY.INDEX.UNIQUE是一类,F ...

  8. 如何让tableViewCell的分割线从边框顶端开始

    在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作 -(voi ...

  9. VS2010 MFC对Excel的操作

    这是帮别人做项目遇到的一个问题,的那个是纠结了老长时间,本以为是一件很轻松的事... 首先,这里采用了OLE来对Excel进行操作,网上其实有大把的例子,虽然都可以运行,但是并不能满足项目要求,其实我 ...

  10. WinNTSetup v3.8.7 正式版绿色增强版

    最强系统安装利器:WinNTSetup 现已更新至 v3.8.7 正式版!这次更新修复调整了诸多问题,新版非常好用接近完美!WinNTSetup 现在已经自带BCDBoot 选项,并且完全支持Wind ...