CSS基本语法:
/* 与 java 中一种注释一样,可以跨行 */
CSS
样式主要由三部分组成:
. 选择器
. 属性名
. 属性值
. 选择器
. 属性名
. 属性值
例:
<html>
<head>
<title>CSS 基本语法 </title>
<style type="text/css">
p{color:#aa66cc}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;
color:#00ffff;text-align:center}
h1,h3,h4,h5,h6,p.mystyle3{text-align:center;color:green}
.mystyle{text-align:right;color:#ff00ff}
</style>
</head>
<body>
<h2>h2 标题文字 </h2>
<h5>h5 标题文字 </h5>
<p class="mystyle1"> 第一段文字 </p>
<p class="mystyle2"> 第二段文字 </p>
<p class="mystyle3"> 第三段文字 </p>
<p> 第四段文字 </p>
<p class="mystyle"> 第五段文字 </p>
<h4 class="mystyle">h4 标题文字 </h4>
<div class="mystyle">DIV 块内文字 </div>
</body>
</html>
CSS
注释:
<head>
<title>CSS 基本语法 </title>
<style type="text/css">
p{color:#aa66cc}
h2{text-align:center;color:red}
p.mystyle1{font-size:20px;color:blue}
p.mystyle2{font-style:italic;font-size:40px;
color:#00ffff;text-align:center}
h1,h3,h4,h5,h6,p.mystyle3{text-align:center;color:green}
.mystyle{text-align:right;color:#ff00ff}
</style>
</head>
<body>
<h2>h2 标题文字 </h2>
<h5>h5 标题文字 </h5>
<p class="mystyle1"> 第一段文字 </p>
<p class="mystyle2"> 第二段文字 </p>
<p class="mystyle3"> 第三段文字 </p>
<p> 第四段文字 </p>
<p class="mystyle"> 第五段文字 </p>
<h4 class="mystyle">h4 标题文字 </h4>
<div class="mystyle">DIV 块内文字 </div>
</body>
</html>
/* 与 java 中一种注释一样,可以跨行 */
CSS
字体属性
:
主要字体属性包括:
.font-family
设置字体类型,如 "Arial"," 宋体 " 等
.font-size
设置字体大小,常用度量单位 pt 和 px
.font-style
设置字体风格,可选值 normal,italic 和 oblique
.font-weight
设置字体“重量”,常用值为 normal 和 bold
.font
综合设置上述各种字体属性
例 :
主要字体属性包括:
.font-family
设置字体类型,如 "Arial"," 宋体 " 等
.font-size
设置字体大小,常用度量单位 pt 和 px
.font-style
设置字体风格,可选值 normal,italic 和 oblique
.font-weight
设置字体“重量”,常用值为 normal 和 bold
.font
综合设置上述各种字体属性
例 :
<html>
<head>
<title>CSS字体属性</title>
<style type="text/css">
p.mf1{fon-size:20px}/*courier等距*/
p.mf2{font:normal italic bold 20pt 黑体}
</style>
</head>
<body>
<p class="mf1">The first paragrah</p>
<p class="mf2">第二段文字</p>
</body>
</html>
<head>
<title>CSS字体属性</title>
<style type="text/css">
p.mf1{fon-size:20px}/*courier等距*/
p.mf2{font:normal italic bold 20pt 黑体}
</style>
</head>
<body>
<p class="mf1">The first paragrah</p>
<p class="mf2">第二段文字</p>
</body>
</html>
CSS
常用文本属性:
.text-align
设置文本对齐方式,可选值 left,center,right,justify( 两端对齐 )
.text-indent
设置首行缩进,其值可采用绝对或相对的长度单位及百分比
.line-height
设置行高,其值可采用绝对或相对的长度单位及百分比
.letter-spacing
设置字符间距,其值可采用绝对或相对的长度单位
.color
设置文字颜色
.text-align
设置文本对齐方式,可选值 left,center,right,justify( 两端对齐 )
.text-indent
设置首行缩进,其值可采用绝对或相对的长度单位及百分比
.line-height
设置行高,其值可采用绝对或相对的长度单位及百分比
.letter-spacing
设置字符间距,其值可采用绝对或相对的长度单位
.color
设置文字颜色
例:
<html>
<head>
<title>CSS常用文本属性</title>
<style type="text/css">
.t1{text-align:left;text-indent=1cm;line-height=20px;letter-spacing=150%;color=red}
.t2{text-align:center;text-indent=0;letter-spacing=1em;color=blue;font-weight:bold}
/*em为一个字符的距离*/
</style>
</head>
<body>
<p class="t1">古希腊有一句民谚说:“聪明的人,借助经验说话;而更聪明的人,根据经验不说话。”西方还有一句著名的话:雄辩是银,倾听是金。中国则流传着“言多必失”和“讷于言而敏于行”这样的济世名言。 </p>
<p class="t2">沉舟侧畔千帆过,病树前头万木春</p>
</body>
</html>
<html>
<head>
<title>CSS常用文本属性</title>
<style type="text/css">
.t1{text-align:left;text-indent=1cm;line-height=20px;letter-spacing=150%;color=red}
.t2{text-align:center;text-indent=0;letter-spacing=1em;color=blue;font-weight:bold}
/*em为一个字符的距离*/
</style>
</head>
<body>
<p class="t1">古希腊有一句民谚说:“聪明的人,借助经验说话;而更聪明的人,根据经验不说话。”西方还有一句著名的话:雄辩是银,倾听是金。中国则流传着“言多必失”和“讷于言而敏于行”这样的济世名言。 </p>
<p class="t2">沉舟侧畔千帆过,病树前头万木春</p>
</body>
</html>
CSS
的长度单位:
在 CSS 样式表中,长度单位分为两类 :
1). 绝对长度单位
绝对长度单位 说明
in 英寸 Inches(1 英寸 =2.54 厘米 )
cm 厘米 Centimeters
mm 毫米 Millimeters
pt 点 Points(1 点 =1/72 英寸 )
pc 皮卡 Picas(1 皮卡 =12 点 )
2). 相对长度单位:
相对长度单位 说明
em 元素的字体高度
ex 字母 x 的高度
px 像素 Pixels
% 百分比 Percentage
在 CSS 样式表中,长度单位分为两类 :
1). 绝对长度单位
绝对长度单位 说明
in 英寸 Inches(1 英寸 =2.54 厘米 )
cm 厘米 Centimeters
mm 毫米 Millimeters
pt 点 Points(1 点 =1/72 英寸 )
pc 皮卡 Picas(1 皮卡 =12 点 )
2). 相对长度单位:
相对长度单位 说明
em 元素的字体高度
ex 字母 x 的高度
px 像素 Pixels
% 百分比 Percentage