css 层叠样式表 cascading style sheets
• 一般说来所有样式有下面的规则(第四个最有优先性)
1. browser default
浏览器默认
2. external style sheet
外部样式表
3. internal style sheet (inside the <head> tag)
内嵌样式表(在<head>标签内)
4. inline style (inside an html element)
行内样式(在一html元素内)
外部样式表能够让你改变所有出现在你web中的外观和布局,而仅仅通过编辑一个单独的css文档.(原理就是一动多变)
css的语法由三部分组成: 一个选择器,一个属性和一个值,例如:
selector {property: value}
选择器是需要去定义的元素或标签
如: body{color:red} 把标签body的 color 属性 定义成 red
如果值为多个单词则用双引号括起来
如:p {font-family: "sans serif"}
如果指定多个属性 就必须将每个属性用分号隔开
如:p {text-align:center;color:red}
每个html元素只能有一个类属性
<p class="right">
可用p.right {text-align: right} 修饰左右class属性为right 的p元素或者标签
如果用.right{text-align: right} 则修饰所有class属性为right的元素或者标签,就没有特指一类标签或者元素的意思了。
id 选择器
<h1 id="属性">
css中可以用
#属性 {} 修饰所有 id 属性为 相同的元素或者标签 与class类似 一个是用 . 一个是用 #
class id 的 属性名字不能 以数字开头 不然无法在mozilla/firefox正常运作
css的注释/* */
三种方法可以插入样式表
• 外部样式表(external style sheet)
<link>标签在head区域使用
<head>
<link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
• 内嵌样式表(Internal Style Sheet)
使用<style>标签在head区域内定义样式,像这样
<head>
<style type="text/css">
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head
• 行内样式(Inline Styles)
在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red
Angel工作室企业网站管理系统全DIV+CSS模板,中英文显示,防注入sql关键字过滤,多浏览器适应,完美兼容IE6-IE8,火狐,谷歌等符合标准的浏览器,模板样式集中在一个CSS样式中,内容与样式完全分离,方便网站设计人员开发模板与管理。系统较为安全,以设计防注入,敏感字符屏蔽。新闻,产品,单页独立关键字设计,提高搜索引擎收录。内置IIS测试,双击打启动预览网站 Angel工作室企业网站
<p style="color: red; margin-left: 20px"> This
is a paragraph
</p>
立即学习“前端免费学习笔记(深入)”;









