原文: http://blog.gqylpy.com/gqy/255
目录
一、宽和高
- 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-y：垂直方向平铺 |
简写：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; ：隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
苦 才是生活
累 才是工作
变 才是命运
忍 才是历练
容 才是智慧
静 才是修养
舍 才会得到
做 才会拥有