原文: http://blog.gqylpy.com/gqy/255 " 目录 一、宽和高 二、字体属性 1. 文字字体 font-famlly 2. 字体大小 font-size 3. 字重(粗细) font-weight 4. 文本颜色 color 三、字符属性 1. 文字对齐 text-align 2. 文字
原文: http://blog.gqylpy.com/gqy/255
"
目录
一、宽和高
二、字体属性
1. 文字字体 font-famlly
2. 字体大小 font-size
3. 字重(粗细) font-weight
4. 文本颜色 color
三、字符属性
1. 文字对齐 text-align
2. 文字装饰 text-decoration
3. 首行缩进 text-indent
四、背景
五、边框
六、圆形 border-radius
七、display 属性
一、宽和高
- width：设置属性宽度，宽度向右填充空格，块级标签才可设置宽度，内联标签的宽度度由内容来决定.
- heigth：设置属性高度，高度向下填充空白.
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
#tag {
-
width:
20%;
-
height:
10px;
-
}
-
p {
-
width:
31px;
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<p id="tag">劫过九重
城关
</p>
-
<p>我座下马正酣
</p>
-
</div>
-
</body>
-
</html>
二、字体属性
1. 文字字体 font-famlly
可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，浏览器会使用它可识别的第一个值.
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
body {
-
/*font-family*/
-
font-family:
"Mircrosoft Yahei",
"微软雅黑",
"Arial",
"sans-serif";
-
color: yellowgreen;
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<p>看那轻飘飘的衣摆
</p>
-
<p>趁擦肩把裙掀
</p>
-
</div>
-
</body>
-
</html>
2. 字体大小 font-size
大小有px、%之分，16px与100%为默认字体大小.
如果值为 inherit 则继承父元素的字体大小.
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
div {
-
font-size:
16px;
/*font-size*/
-
color: darkcyan;
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<p>踏遍三江六岸
</p>
-
<p>借刀光做船帆
</p>
-
</div>
-
</body>
-
</html>
3. 字重(粗细) font-weight
值 描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100～900 设置具体粗细，400为normal，700为bold inherit 继承父元素字体的粗细值
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
/*font-weight*/
-
p {
-
font-weight: lighter;
-
}
-
#tag {
-
font-weight:
700;
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<p>任露水浸透了短衫
</p>
-
<p id="tag">大盗睥睨四野
</p>
-
</div>
-
</body>
-
</html>
4. 文本颜色 color
color属性用来设置字符的颜色，是CSS最常用的属性.
- 十六进制值（如：#FFFFFF，可简写为FFF）
- RGB值（如：rgb(255,0,0)）
- 颜色名称（如：blue）
- 还有rgba(255,0,0,0.5)，第四个值为alpha，用于指定色彩的透明/不透明度，范围在0.0-1.0之间
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
#tag1 {
color:
#A9A9A9;}
/*十六进制值，可简写*/
-
#tag2 {
color:
rgb(150,100,0);}
/*RGB值*/
-
#tag3 {
color: darkgrey;}
/*颜色名称*/
-
#tag4 {
color:
rgba(150,100,0,0.5);}
/*rgba*/
-
</style>
-
</head>
-
<body>
-
<div>
-
<p id="tag1">枕风宿雪多年
</p>
-
<p id="tag2">我与虎谋早餐
</p>
-
<p id="tag3">拎着钓叟的鱼弦
</p>
-
<p id="tag4">问卧龙几两钱
</p>
-
</div>
-
</body>
-
</html>
三、文字属性
1. 文字对齐 text-align
值 描述 left 左对齐，默认值 right 右对齐 center 居中对齐 justify 两端对齐
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
#tag1 {
text-align: left;}
/*左对齐*/
-
#tag2 {
text-align: right;}
/*右对齐*/
-
#tag3 {
text-align: center;}
/*居中对齐*/
-
#tag4 {
text-align: justify;}
/*两端对齐*/
-
</style>
-
</head>
-
<body>
-
<div>
-
<p id="tag1">蜀中大雨连绵
</p>
-
<p id="tag2">关外
横尸遍野
</p>
-
<p id="tag3">你的笑像一条恶犬
</p>
-
<p id="tag4">撞乱了我心弦
</p>
-
</div>
-
</body>
-
</html>
2. 文字装饰 text-decoration
值 描述 none 标准文本，默认值常用于去掉a标签默认的下划线 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本的一条线 inherit
继承父元素
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
#tag1 {
text-decoration: none;}
/*标准文本*/
-
#tag2 {
text-decoration: underline;}
/*下划线*/
-
#tag3 {
text-decoration: overline;}
/*上划线*/
-
#tag4 {
text-decoration: line-through;}
/*删除线*/
-
a {
text-decoration: none;}
/*去掉a标签默认的下划线*/
-
</style>
-
</head>
-
<body>
-
<div>
-
<p id="tag1">谈花饮月赋闲
</p>
-
<p id="tag2">这春宵艳阳天
</p>
-
<p id="tag3">待到梦醒时分睁眼
</p>
-
<p id="tag4">铁甲寒意凛冽
</p>
-
<a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN
</a>
-
</div>
-
</body>
-
</html>
3. 首行缩进 text-indent
常用的有像素(px)、百分比(%)，默认缩进值都为零.
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>CSS
</title>
-
<style>
-
#tag1 {
text-indent:
32px;}
/*将段落的第一行缩进32像素*/
-
#tag2 {
text-indent:
32%;}
/*将段落的第一行缩进32百分比*/
-
</style>
-
</head>
-
<body>
-
<div>
-
<P id="tag1">夙愿只隔一箭
</P>
-
<p id="tag2">故乡近似天边
</p>
-
</div>
-
</body>
-
</html>
四、背景
操作 解释 background-color: red; 将背景颜色设为红色 bsckground-image: url("test.jpg"); 将test.jpg图片设为网页背景 background-position: right top; 图片位置：右 上还可写成像素百分比等 background-position
背景重复，值如下：
repeat：平铺整个网页，默认值
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
no-repeat：背景图片不平铺
简写：background: green url("test.jpg") no-repeat center center;
很多网站会把一些小图标放在一张图片上，然后根据位置去显示图片，从而减少频繁的图片请求.
一个有趣的例子：鼠标滚动背景不动：
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>鼠标滚动背景不动
</title>
-
<style>
-
* {
-
margin:
0;
-
}
-
.tag1 {
-
width:
3%;
-
height:
200px;
-
background-color: antiquewhite;
-
}
-
.tag2 {
-
color: white;
-
width:
100%;
-
height:
300px;
-
background:
-
url(
"http://img3.imgtn.bdimg.com/it/u=1167730288,2455334783&fm=26&gp=0.jpg")
-
no-repeat center center;
-
background-attachment: fixed;
/*鼠标滚动背景不动*/
-
}
-
.tag3 {
-
height:
200px;
-
text-align: right;
-
background-color: aquamarine;
-
}
-
.tag4 {
-
height:
200px;
-
text-align: right;
-
background-color: steelblue;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="tag1">不知何人浅唱弄弦
</div>
-
<div class="tag2">我彷徨不可前
</div>
-
<div class="tag3">枕风宿雪多年
</div>
-
<div class="tag4">我与虎谋早餐
</div>
-
</body>
-
</html>
五、边框
简写：border: 2px dashed blue;
还可以单独为某一个边框设置样式：
简写：border-left: 2px dotted green;
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>边框
</title>
-
<style>
-
#tag1 {
-
border-width:
3px;
/*边框宽度*/
-
border-style: dotted;
/*边框类型*/
-
border-color: cornflowerblue;
/*边框颜色*/
-
}
-
#tag2 {
-
border:
2px dashed mediumspringgreen;
/*简写*/
-
}
-
/*单独为某个边框设置样式*/
-
#tag3 {
-
border-top-width:
2px;
-
border-top-style: dotted;
-
border-top-color: cornflowerblue;
-
border-bottom-width:
2px;
-
border-bottom-style: dashed;
-
border-bottom-color: cornflowerblue;
-
}
-
/*单独为某个边框设置样式. 简写*/
-
#tag4 {
-
border-left:
2px dotted lightseagreen;
-
border-right:
2px dotted lightseagreen;
-
border-bottom:
2px solid mediumaquamarine;
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<p id="tag1">拎着钓叟的鱼弦
</p>
-
<p id="tag2">问卧龙几两钱
</p>
-
<p id="tag3">蜀中大雨连绵
</p>
-
<p id="tag4">关外横尸遍野
</p>
-
</div>
-
</body>
-
</html>
六、圆形 border-radius
将其值设置为宽或高的一半即可得到一个圆形：
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>圆形
</title>
-
<style>
-
#tag1 {
-
text-align: center;
-
width:
200px;
-
border:
3px dotted darkviolet;
-
border-radius:
50%;
/*设置为宽或高的一半*/
-
}
-
#tag2 {
-
text-align: center;
-
width:
30px;
-
height:
110px;
-
border:
2px dashed hotpink;
-
border-radius:
50%;
/*设置为宽或高的一半*/
-
}
-
div {
-
width:
150px;
-
height:
150px;
-
border:
2px solid lawngreen;
-
border-radius:
50%;
/*设置为宽或高的一半*/
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<p id="tag1">你的笑像一条恶犬
</p>
-
<p id="tag2">撞乱我心弦
</p>
-
</div>
-
</body>
-
</html>
七、display 属性
值 描述 display: none; 使元素在网页中不显示，一般用于配合JavaScript代码使用 display: block; 默认占满整个页面宽度，如果指定了宽度，则会用margin填充剩下的部分 display: inline; 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom、float属性都不会有什么影响 display: inline-block; 使元素同时具有行内元素和块级元素的特点
-
<!DOCTYPE html>
-
<html lang="zh-CN">
-
<head>
-
<meta http-equiv="content-Type" charset="UTF-8">
-
<meta http-equiv="x-ua-compatible" content="IE=edge">
-
<meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
-
<title>display属性
</title>
-
<style>
-
#tag1 {
-
display: block;
/*占满整个页面宽度*/
-
}
-
#tag2 {
-
display: inline;
/*按行内元素显示*/
-
height:
100px;
/*此时无效*/
-
}
-
#tag3 {
-
visibility: hidden;
/*替换成空白*/
-
}
-
#tag4 {
-
display: none;
/*不显示*/
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<span id="tag1">烽烟万里如衔
</span>
-
<span>掷群雄下酒宴
</span>
<!--此时换行-->
-
<p id="tag2">谢绝策勋十二转
</p>
<!--此时不换行-->
-
<p id="tag3">想为你窃玉簪
</p>
<!--此时不显示（替换成空白）-->
-
<p>入巷间吃汤面
</p>
-
<p id="tag4">笑看窗边飞雪
</p>
<!--此时不显示-->
-
</div>
-
</body>
-
</html>
display: none;与visibility: hidden;的区别：
visibity: hidden; ：可以隐藏某个元素，但隐藏的元素仍会占用隐藏之前的空间。也就是说，虽然该元素被隐藏的，但是仍然会影响布局。
display：none; ：隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
苦 才是生活
累 才是工作
变 才是命运
忍 才是历练
容 才是智慧
静 才是修养
舍 才会得到
做 才会拥有
"