1.1基本概念
CSS（Cascading Style Sheet） 层叠样式表，为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式，最后的结果是多次样式叠加的结果，如果有冲突，以后面的样式为准。
1.2 基本语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
……
}
选择器说明该样式施加于哪些元素；属性名和属性值说明是样式内容；
一般一行定义一条样式，当然也可以写在一行上，但每条样式都序号加上“；”
推荐用小写命名。
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
div {
width: 400px;
margin: 0 auto;
text-align: center;
}
p {
font-size: 24px;
}
#author {
font-size: 18px;
}
#comment {
font-size: 14px;
color: gray;
}
</style>
<body>
<div>
<h1>望月怀远</h1>
<p id="author">唐·张九龄</p>
<p>海上生明月，天涯共此时。</p>
<p>情人怨遥夜，竟夕起相思。</p>
<p>灭烛怜光满，披衣觉露滋。</p>
<p>不堪盈手赠，还寝梦佳期。</p>
<p id="comment">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p>
</div>
</body>
1.3 使用方式
内联形式
使用style属性，只对当前标签有效。页面内容和表现形式是高度耦合的，不利于维护和分工合作的。
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 400px;margin: 0 auto;text-align: center;">
<h1>望月怀远</h1>
<p style="font-size: 18px;">唐·张九龄</p>
<p style="font-size: 24px;">海上生明月，天涯共此时。</p>
<p style="font-size: 24px;">情人怨遥夜，竟夕起相思。</p>
<p style="font-size: 24px;">灭烛怜光满，披衣觉露滋。</p>
<p style="font-size: 24px;">不堪盈手赠，还寝梦佳期。</p>
<p style="font-size: 14px; color: gray;">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p>
</div>
</body>
内部样式
在head中使用
外部样式
准备css文件
在html文件中引用css文件，在head标签中增加引用说明
内容和表现形式完全分离，而且任何需要用到该样式表中样式的页面都可以通过链接该文件来实现。
my.css
div {
width: 400px;
margin: 0 auto;
text-align: center;
}
p {
font-size: 24px;
}
#author {
font-size: 18px;
}
#comment {
font-size: 14px;
color: gray;
}
引用外部css文件
rel 属性用于指定当前文档与被链接文档的关系
1.4 颜色
自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。
需要将连续的量（无穷）转化为离散的量（有限）的
颜色可以由三种基本颜色调和而成，即红色Red、绿色Green和蓝色Blue
每种颜色用8位表示，可以表示256（28）种颜色。那么每个颜色值有24位来表示，可以表示256256256种颜色（真彩色）
进制……
CSS中颜色的表示方法：
（1）十六进制形式：#ff0000（掌握）
（2）RGB：rgb(128,0,0) 等价于#800000（掌握）
（3）RGBA：在RGB颜色的基础上增加了表示透明度的分量Alpha
（4）HSL：用色调、饱和度和明度三个分量表示颜色
（5）HSLA：在HSL颜色的基础上增加了表示透明度的分量Alpha
（6）预定义颜色：Red、Yellow等（掌握）
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<h3>颜色演示</h3>
<p style="color: green;">预定义颜色(color:green)</p>
<p style="color: RGB(255,0,0);">RGB颜色(color:RGB(255,0,0))</p> 红
<p style="color: #ff00ff;">十六进制颜色(color: #ff00ff)</p> 粉
</div>
</body>
2 基础属性
2.1 字体相关属性
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>字体属性演示</h1>
<p>
<label>字体体系：</label>
<span style="font-family: 宋体;">宋体</span>
<span style="font-family: 楷体;">楷体</span>
</p>
<p>
<label>字体大小：</label>
<span style="font-size: 12px;">12像素</span>
<span style="font-size: 24px;">24像素</span>
</p>
<p>
<label>字形倾斜：</label>
<span style="font-style: normal;">正常</span>
<span style="font-style: italic;">倾斜</span>
</p>
<p>
<label>字母大写：</label>
<span style="font-variant: normal;">正常hello</span>
<span style="font-variant: small-caps;">小型大写hello</span>
</p>
<p>
<label>字体粗细：</label>
<span style="font-weight: normal;">正常(400)</span>
<span style="font-weight: bold;">粗体(700)</span>
<span style="font-weight: bolder;">加粗</span>
<span style="font-weight: lighter;">更细</span>
<span style="font-weight: 500;">500</span>
</p>
</body>
字体属性
属性
含义
取值
font-family
字体体系
字体名称，如宋体
font-size
字体大小
font-style
是否倾斜
normal/italic/oblique/inherit（继承）
font-variant
是否大写
normal/small-caps/inherit
font-weight
字体粗细
normal（400）/bold（700）/bolder/lighter
100/200/300……900
可以简写，书写顺序
font-style font-variant font-weight font-size font-family
前面三个可缺省，使用默认值，font-size和font-family必须指定值。
这种书写方式更加简洁
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
font-family: 宋体;
font-size: 24px;
font-weight: bold;
}
#p2{
30px 楷体;
}
</style>
</head>
<body>
<div>
<h1>字体属性演示</h1>
<p id="p1">分开书写：font-family: 宋体;font-size: 24px;font-weight: bold;</p>
<p id="p2">简写形式：30px 楷体;</p>
</div>
</body>
2.2 文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果等。
color：设置文本的颜色
text-decoration:
none：默认值，没有装饰效果
underline：加下划线
overline：加上划线
line-through：加删除线
direction：
ltr:自左至右；rtl:自右至左
text-align:文本对齐方式
left 左对齐
right 右对齐
center 居中对齐
text-indent:首行缩进
letter-spacing:字母之间的间距
word-spacing:字（单词）间距
line-height:设置行高，实际上是调整行间距
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 400px;">
<h1>文本属性演示</h1>
<p>
<label>文本颜色：</label>
<span style="color: red;">红色</span>
<span style="color: rgb(0,255,0);">绿色</span>
</p>
<p>
<label>文本修饰：</label>
<span style="text-decoration: none;">无</span>
<span style="text-decoration: underline;">下划线</span>
<span style="text-decoration: overline;">上划线</span>
<span style="text-decoration: line-through;">删除线</span>
</p>
<label>文本方向：</label>
<div style="direction: ltr;">1 2 3 4 5</div>
<div style="direction: rtl;">1 2 3 4 5</div>
<label>文本对齐：</label>
<div style="text-align: left;">左对齐</div>
<div style="text-align: right;">右对齐</div>
<div style="text-align: center;">居中对齐</div>
<label>大小写：</label>
<p style="text-transform: none;">不转换：welcome to Beijing</p>
<p style="text-transform: capitalize;">首字母大写：welcome to Beijing</p>
<p style="text-transform: uppercase;">全部大写：welcome to Beijing</p>
<p style="text-transform: lowercase;">全部小写：welcome to Beijing</p>
<p style="text-indent: 2cm;">首行缩进</p>
<p style="line-height: normal;">
正常行高<br>
正常行高<br>
正常行高
</p>
<p style="line-height: 30px;">
行高30px<br>
行高30px<br>
行高30px
</p>
<p>
<label>字符间距：</label>
<span style="letter-spacing:10px;">welcome</span>
<span style="letter-spacing:2px;">welcome</span>
</p>
<p>
<label>单词间距：</label>
<span style="word-spacing:10px;">welcome to</span>
<span style="word-spacing:2px;">welcome to</span>
</p>
</div>
</body>
扫一扫
8993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
