CSS分类与语法
来源:互联网 发布:北京大兴火灾 知乎 编辑:程序博客网 时间:2024/05/22 18:24
CSS按其位置可以分成三种:
1)内嵌样式(Inline Style)
Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。
<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体,字体颜色是红色。</p>
2)内部样式表(Internal Style Sheet)
内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>
3)外部样式表(External Style Sheet)
将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
比如可以用文本编辑器(NotePad)建立一个叫home的文件,文件后缀不要用.txt,改成.css。文件内容如下:
H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一个网页,代码如下:
<HTML>
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>
CSS的语法:
一个样式(Style)的语法由三部分构成:Selector,属性(Property),属性值(Value)。
格式:selector {property: value}
p {color:blue}
HTML中所有的Tag都可以作为selector。
注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。
p {text-align:center;color:red}
组合(Grouping)
你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。
h1,h2,h3,h4,h5,h6
{
color: red
}
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。
Class Selector
利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落<p>有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:
p.right {text-align:right}
p.center {text-align:center}
中right和center就是两个class。然后你就可以引用这两个class
<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>
你也可以不用HTML Tag,直接用.加上Class名称作为一个Selector
.center {text-align: center}
这种通用的Class Selector就没有Tag的局限性,可以用于不同的Tag。比如:
<h1 class = "center">这个标题居中显示。</h1>
<p class = "center">这个段落居中显示。</p>
- CSS分类与语法
- CSS语法手册(六)分类属性
- CSS语法手册(六)分类属性
- css 语法与js 语法属性 区别
- CSS属性定义与语法
- css与js语法对照
- CSS预处理与SASS语法
- 初步学习CSS之定义、分类和基本语法
- CSS基础之CSS概述 、CSS语法 、尺寸与边框
- CSS元素分类与布局模型
- CSS-----选择器分类、层叠、特殊性与继承
- 与表格边框有关的CSS语法
- 与表格边框有关的css语法
- 与表格边框有关的CSS语法
- CSS学习笔记:语法与规则
- CSS分类
- css 分类
- CSS分类
- symbian编程第一步,搭建编译环境(转自Yuelongr)
- C++Primer学习:第1章 快速入门
- 推荐个很Q的原型设计工具Balsamiq Mockups,值得一看。
- a^b%c(蒙格马利快速幂模算法)
- 使用flash+fms录制视频时遇到NetStream.Record.NoAccess错误
- CSS分类与语法
- 做单
- server2008/vista 自动登陆设置方法
- 做单:第1章:秘密的培训
- 做单:第2章 没戏的项目
- 做单:第3章 骂人的客户
- ASP网站打开慢的解决办法
- 箴言
- 为什么选用PostgreSQL,而不是Oracle?