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>

最新文章

  1. Javascript学习笔记1
  2. 【跟着子迟品 underscore】Array Functions 相关源码拾遗 &amp; 小结
  3. Oracle--(Hierarchical Queries)层级查询
  4. 洛谷P2725 邮票 Stamps
  5. Redis 四:存储类型之有序集合
  6. XCode签名证书死活不能选
  7. VS2012 professional和VS2012 Ultimate的区别
  8. PostgreSQL的initdb 源代码分析之五
  9. 第 2 章 代理模式【Proxy Pattern】
  10. 炉石传说__multiset
  11. Poj 1002 487-3279(二叉搜索树)
  12. 和2018年年初做管理系统的不同(vuex)
  13. NIO &amp; Netty框架学习
  14. 配置多个数据源,spring profile 多环境配置管理
  15. Java利用hanlp完成语句相似度分析的案例详解
  16. linux中使用pip命令遇到的一些问题
  17. ubuntu 安装 sublime
  18. Ubuntu下VIM使用指南
  19. Mybatis常见问题
  20. Oracle变量的定义、赋值及使用

热门文章

  1. 前端之html
  2. 原生js实现jquery库中选择器的功能(jquery库封装一)
  3. hibernate单表junit测试
  4. 初识CDQ分治
  5. 面试中关于Java你所需知道的的一切
  6. 安装win7x64、x86总提示文件出错或安装大型软件出错或0x0000001a、0x0000003b蓝屏
  7. eclipse的几个快捷键
  8. jqgrid
  9. Java 理论与实践: 处理 InterruptedException
  10. @Autowired的使用