一.CSS中的长度单位
-
px和em
- px,像素
根据显示器分辨率的不同,像素的大小也是不同的 - em,以当前字符的高度为基准
如果当前字体的高度为12px,那么1em就是12px
注意: -般以font-size为准,如果没有定义font-size, 则以浏览器默认大小(16px) 为准
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{ background-color: #FF0000;}
.w1{ width: 100px;}
.w2{ text-indent: 2em;}
.w3{ width: 50%;}
/* 块级别元素默认是100%,高是自适应 */
</style>
</head>
<body>
<p class="w1">文字px像素</p>
<p class="w2">文字em 1个字符宽度 默认字符宽16px</p>
<p class="w3">文字% 百分比</p>
</body>
</html>
- 效果:
二.CSS中的颜色表达
网页中颜色采用RGB模式显示(显示器)
注意:很多浏览器不支持颜色的单词表示
注意:数值在0~255之间
注意:推荐使用这种方式,十六进制值前加#
<html>
<head>
<meta charset="utf-8">
<title>css中的颜色表示</title>
<style>
.color1{
background-color: gold;
}
.color2{
background-color: rgb(255,0,0);
/* 红,绿,蓝取值范围0-255 */
}
.color3{
background-color: rgb(0%,100%,0%);
/* 红,绿,蓝取值范围0%-100% */
}
.color4{
background-color: #0000FF;
/* 位数2 2分割 00红 00绿 ff蓝 */
/* 取值0-f 16进制 */
}
.color5{
background-color: #ff0;
}
</style>
</head>
<body>
<p>1. 英文单词表示</p>
<p class="color1">只要能写出的颜色单词都可以用</p>
<p class="color2">2. rgb颜色表示</p>
<p class="color3">3.通过0-255,百分比表示</p>
<p class="color4">4. 16进制颜色表示</p>
<p class="color5">5. 16进制简写</p>
</body>
</html>
- 效果:
三.CSS中字体相关样式
1. font 属性
1.1 font-family
- 字体
可以为文字指定多个字体,不同字体间用",”隔开
字体名字中间有空格的,要用双引号引起来
1.2 font-size
- 字体大小
多用px/em单位
<html>
<head>
<meta charset="utf-8">
<title>css文字属性</title>
<style>
.p1{ font-size: 48px;}
.p2{
font-size: 48px;
/* font-family: 宋体,微软雅黑;
1.建议用国际写法
2.中文正文建议用 宋体,微软雅黑,黑体
3.多个字体用逗号隔开,如果前面的字体和电脑字体匹配就是用前面的,如果都没有匹配用系统默认字体
5.字体的名称中间有空格用双引号包裹
*/
font-family: "simSun","microsoft Yahei","times new roman","arial";
}
</style>
</head>
<body>
<h1>css文字属性</h1>
<p class="p1">font-size 文字大小</p>
<p class="p2">font-family 字体</p>
</body>
</html>
- 效果:
1.3 font-style
- 字体倾斜效果
normalI正常、oblique和italic倾斜
Italic是使用文字的斜体,Oblique是让没有斜体属性的文字倾斜(强制倾斜)!
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.h1{font-style: normal;}
.h2{font-style: oblique;}
</style>
</head>
<body>
<h1 class="h1">文字样式-normol</h1>
<h1 class="h2">文字样式-italic</h1>
</body>
</html>
- 效果:
1.4 font-weight
- 字体粗细
大多浏览器可以实现:正常和加粗效果
normal | 正常 |
---|---|
bold | 粗体 |
bolder | 加粗体 |
light | 比正常粗体细 |
100~900 | 工9个层次,数字越大,字体越粗 |
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.w1{font-weight: 100;}
.w2{font-weight: 900;}
.w3{font-weight: normal;}
.w4{font-weight: lighter;}
.w5{font-weight: bold;}
.w6{font-weight: bolder;}
</style>
</head>
<body>
<h2 class="w1">文字粗细100</h2>
<h2 class="w2">文字粗细900</h2>
<h2 class="w3">文字粗细normol</h2>
<h2 class="w4">文字粗细lighter</h2>
<h2 class="w5">文字粗细bold</h2>
<h2 class="w6">文字粗细bolder</h2>
</body>
</html>
- 效果:
1.5 文字的简写
- font :样式 粗细 大小/行高 字体家族
- font:italic bold 48px/100px “simsun”
2. text 属性
2.1 text-transform
- 英文字母大小写转换
capitalize | 首字母大写 |
---|---|
uppercase | 全部大写 |
lowercase | 全部小写 |
2.2 text-decoration
- 文本的装饰效果
underline | 下划线 |
---|---|
overline | 上划线 |
line-through | 删除线 |
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p1{text-transform: capitalize;}
.p2{text-transform: lowercase;}
.p3{text-decoration: underline;}
.p4{text-decoration: overline;}
.p5{text-decoration: line-through;}
a{text-decoration: none;}
</style>
</head>
<body>
<a href="#">normal 正常</a>
<p class="p3">underline 下划线</p>
<p class="p4">overline 上划线</p>
<p class="p5">line-through 删除线</p>
<h1>文字转换</h1>
</body>
</html>
- 效果:
2.3 text-indent
- 段落内容首行缩进(悬挂缩进)
- 字词间距
letter-spacing | 字母间距(汉字间距) |
---|---|
word-spacing | 单词间距 |
line-height | 行间距 |
注:一般设行间距1.5 ;设置行高,文字有且只有一行文字会垂直居中
2.4 text-align
- 文本的水平位置
left | 左对齐(默认值) |
---|---|
right | 右对齐 |
center | 居中对齐 |
justify | 两端强制对齐,最后一行左对齐 |
2.4 内容溢出处理
- overflow:visible (默认) /hidden (超出部分隐藏) /scroll (出现滚动条) /auto (浏览器自动处理)
2.5 文本溢出处理
- white-space: nowrap 文字不换行
- overflow (内容溢出):visible可见| auto自动(超过出现滚动条)| scroll 不管是否超过都出现滚动条| hidden 超过隐藏
- text-overflow(文本溢出):clip 截断 | ellipsis 行尾三个点
<html>
<head>
<meta charset="utf-8">
<title>文本溢出</title>
<style>
.myp{
background-color: gold;
line-height: 100px;
width: 300px;
/* 文字不换行 */
white-space: nowrap;
/* 内容溢出 */
overflow: hidden;
/* 文本溢出 */
text-overflow:ellipsis
}
.myp img{
/* 行内元素垂直对齐 */
vertical-align: middle;
}
</style>
</head>
<body>
<p class="myp">
<img src="http://statics.qikuedu.com/qikux/logo.png" alt="" height="20">
我是一行很长很长的文本56个民族共同组成的统一的多民族国家。
</p>
</body>
</html>
- 效果:
2.6 垂直对齐方式
- vertical-align:top 顶| bottom 底| middle 居中| baseline文字基线
- 该属性定义行内元索的基线相对于该元素所在行的基线的垂直对齐。