CSS 文本样式:
通过文本属性,改变文字
*范围小的选择器生效优先级高于范围大的选择器
css样式属性之间没有先后顺序,有这条属性就行
如果对盒子没有指定宽高,那么盒子的宽高,由其子元素来撑开
选择器+声明叫做一条css描述
缩进文本
p {text-indent: -5em;}//负位移
p {text-indent: 20%;}//百分数要参考父元素的宽度。只影响第一行,举例,如果将缩进值设置为 20%,元素的第一行会缩进 20%(参考其父元素宽度的)。
水平对齐
text-align:center
line-height
字间隔
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
字母间隔
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
字符大小写转换
h1 {text-transform: uppercase}
h1 {text-transform: lowercase}
h1 {text-transform: capitalize}//首字母大写
h1 {text-transform: none}
文本装饰
a {text-decoration: none;}
a {text-decoration: underline;}//下划线
a {text-decoration: overline;}
a {text-decoration: line-through;}
处理空白符
p {white-space: normal;} //合并多余的空白符
p {white-space: pre;} // 不合并空白符,不忽略换行符
p {white-space: pre-wrap;} //不合并空白符,不忽略换行符,还允许自动换行。
p {white-space: pre-line;} /合并空白符,保留换行符, 还允许自动换行
段落间距
p.big{line-height: 200%}//参考其父元素的行高
p.big{line-height: 20px}
p.big{line-height: 0.5}//0.5是什么
CSS 字体
字体的属性:那种字体、大小、加粗、风格(如斜体)和变形(如小型大写字母)
body {font-family: sans-serif;}//字体系列
font-family 字体
font-family: "宋体";
font-family:"微软雅黑"
font-family:"微软雅黑","宋体";
font-family:"Microsoft Yahei","SimSun"
font-family:"Arial","Microsoft Yahei","SimSun"
font-family:arial,sans-serif;//字体系列至少2个字体,通用字体系列和特定字体系列
只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
font-style 设置斜体
p.normal {font-style:normal;}//字体样式,如斜体 italic; 让文字倾斜
oblique 与 italic区别:
italic会找到新的斜的字型替代
oblique是普通的倾斜
中文一律用italic
font-variant
设定小型大写字母
p {font-variant:small-caps;}
p.normal {font-variant: normal}
font-weight 设定字体粗细
p.thick {font-weight:bold;}//700或bold字体 加粗
p.thicker {font-weight:400;}//400或normal 表示正常
font-size 设置字体大小
h1 {font-size:3.75em;} //字体大小
h1 {font-size:60px;}
字体简写属性:
p.ex1{font:italic arial,sans-serif;}
font: italic bold 14px/28px arial,sans-serif;//无顺序书写,不同描述用空格隔开,一个描述用逗号隔开
em
W3C 推荐使用 em 尺寸单位
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:
文本阴影
CSS3 文本阴影
h1{
text-shadow: 5px 5px 5px #FF0000;
}
text-shadow: h-shadow v-shadow blur color;
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊的距离,值越大越模糊
color 阴影的颜色
自动换行
p {word-wrap:break-word;}//仅对一个英文单词过长没换行溢出的情况