CSS3关于排版与文本样式标签基础知识速查
CSS描述了网页布局
引入CSS样式表
- 行内式 (在body标签内)（初学者常用）
<标记名 style=“属性值1:属性值;… ;属性值n：属性值”>内容
缺点:只能在某标签中使用一次，样式规则少
2.内嵌式(在head标签内)（初学者常用）
< head>
< style type=“text/css”>
选择器{ 属性1：属性值1；…；属性n：属性值n}
< /style>
< /head>
缺点：若网站只有一个页面，比较好用，否则不能发挥CSS重用的优势
3.链入式（开发常用）(在head标签内)
< head>
< link href="CSS文件路径"type="text/css"rel="stylesheet"/>
< /head>
优点：一个CSS样式可被若干个HTML页面使用，一个页面可以使用若干个CSS样式表
CSS基础选择器
选择器概念：
要想将CSS样式应用于特定的HTML元素，首先要找到该目标元素执行这一任务的样式规则部分称为选择器
-
标记选择器
标记名{属性n：属性值n；}
HTML所有标签都适用
优点：快速为页面中所有同类型的标记统一样式
缺点：无法差异化样式
-
类选择器
.类名{属性n：属性值n；}
类名为HTML元素的class属性值，大多数HTML元素都可以定义class属性
优点：可以为元素对象定义单独或者相同的样式
<head> <style type="text/css"> .green{color:green;} style> <body> <p class="green">文本p> body> head>(“文本” 为绿色字体)
提示：p中可以放入若干个class属性
-
id选择器
<head> <style type="text/css"> #+id名{属性n：属性值n；} style> <body> <标签 id="id名">文本标签> body> head>
-
通配选择器
作用到所有HTML标记，降低代码的执行速度，作用范围最广，但开发不常用
*{属性：属性值；}
-
标签指定式选择器
由两个选择器构成，第一个为标记选择器，第二个为class/id选择器
-
后代选择器
元素1 元素2{样式声明}
理解：选择元素1中的所有的元素2，修改元素1标签中的元素2标签(元素2可以嵌套别的标签)
<head>
<style type="text/css">
p strong{color:red;}
strong{color:blue;}
style>
<body>
<p>文本<strong>文本strong>p>
<strong> 文本 strong>
body>
head>
-
并集选择器 (重要)
(各个选择器通过逗号连接而成的集体声明)
如
<head> <style type="text/css"> h2,h3,p{color: red;font-size: 14px;} h3,special,#one{text-decoration: underline;} style> <body> <p class="special">段落文本1加下划线p> <p id="one">段落文本2加下划线p> body> head>
文本样式属性
字号大小
font-size：字号大小； (可用相对/绝对 长度单位)
| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素 |
| 绝对长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
字体
常用字体有：宋体，微软雅黑，黑体
font-family：字体；
特别的：1.各种字体之间需要用英文逗号隔开
2.中文字体需加英文引号，英文字体不用加，当要设置英文字体时，英文字体需在中文字体之前
例如
选择器{
font-family:Arial,"宋体"，"黑体";
}
（用户若没有安装Arial，则会选择宋体，若无则黑体）
3.若字体名中包含空格，#，￥等符号，该字体需加英文引号
4.系统有默认字体
字体粗细
font-weight：字体粗细；
| 属性值 | 说明 |
|---|---|
| normal | 默认值 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900(100的整数倍) | 定义由细到粗的字符（400=normal，700=bold） |
### 字体风格
normal：默认值
italic：斜体 (有倾斜属性则会倾斜)
oblique：倾斜 (有无倾斜属性都会倾斜)
综合设置字体样式
选择器{
font：font-style font-weight font-size/line-height font-family ;
}
如
选择器{
font: italic small-caps bold 30px/40px Arial ;
}
选择器{
font-style:italic;
font-variant: small-caps;
font-weight :bold;
font-size:30px;
line-height: 40px;
font-family: Arial ;
}
二者等价
定义服务器字体
通过该属性开发者可以在用户计算机未安装字体时使用任何喜欢的字体
@font-face{
font-family: 字体名称;
src:字体路径；
}
自动换行
用于实现长单词和url地址的自动换行
选择器{word-wrap: 属性值;}
| 属性值 | 说明 |
|---|---|
| normal | 只在允许的断字点换行(默认) |
| break-word | 在长单词或者url地址内部换行 |
解释：如果框内一行溢出了，可以用break-word 进行换行
颜色
color:文本颜色;
用于定义文本颜色
| 单词 | red，green |
|---|---|
| 十六进制 | #FF0000 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
推荐好用的软件：FastStone
可以用于找到颜色，测量像素
字/字母间距
letter-spacing:间距值;
允许用负值(重叠)
单词间距
word-spaceing：间距值
行间距
line-height:间距值
间距常用属性值：像素px，相对值em，百分比%
字符大小写转换
text-transform:属性值
| none | 不转换 |
|---|---|
| capitalize | 首字母大写 |
| uppercase | 全部字符转换为大写 |
| lowercase | 全部字符转换为小写 |
文本装饰
text-decoration:属性值
| none | 默认 |
|---|---|
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
对齐方式
text-align:属性值
| center | 居中对齐 |
|---|---|
| right | 右对齐 |
| left | 左对齐 |
首行缩进
text-indent:属性值
属性值为px或者em
(适用于块级元素，对行内元素无效)
空白符处理
white-space:属性值
| normal | 默认 |
|---|---|
| pre | 预格式化，按文档的书写格式保留空格、空行原样显示 |
| nowrap | 空格空行无效，强制文本不能换行，除非遇到换行标记 内容超出元素的边界也不能换行，若超出浏览器页面则会自动增加滚动条 |
阴影效果
text-shadow:属性值
选择器{text-shadow:h-shadow v-shadow blur color;}
| h-shadow | 水平,阴影距离(可为负值，em/px，必需) |
|---|---|
| v-shadow | 垂直阴影距离(可为负值，em/px，必需) |
| blur | 模糊半径(em/px，可选) |
| color | 阴影颜色(可选) |
如:text-shadow:2px 3px 3px red;
(当h-shadow，v-shadow为负值时改变阴影的投射方向)
同时如果想设置一个花里胡哨的叠加阴影可以这样
设置多组阴影参数
如：text-shadow:2px 3px 3px red,2px 3px 3px green;
这样的话，红色和绿色阴影叠加
标示对象内溢出文本
选择器:{text-overflow:属性值}
| clip | 修剪溢出文本，不显示省略标记 |
|---|---|
| ellipsls | 用省略标记“…”表示被修剪的文本 |
CSS的一些性质
选择器优先级
| 选择器 | 权重 |
|---|---|
| 标记选择器 | 1 |
| 类选择器 | 10 |
| id选择器 | 100 |
| 继承样式 | 0 |
(CSS自定义了一个 !important命令赋予其最大优先级)
CSS的层叠性
多个CSS样式可以叠加
如： 文本内容
CSS的继承性
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素(后代亦可)可以继承父元素的属性
如：p,div,h1,h2,h3,h4,ul,ol,dl{color: black;}
可以写成：body{color:black;}
但是并不是所有的样式都可以被继承
a标签的字体颜色、下划线不能被继承
<a href="http://baidu.com">超链接a>
<a href="#">回到最顶端a>
<a href="css">文件链接a>
h标签的文字大小不能被继承
h标签分为 h1-h6
此外还有：边框、外/内边距、背景、定义、布局、元素宽/高，这些属性不具备继承性