版权声明:竹永康 https://blog.csdn.net/qq_41964425/article/details/82292353
目录
一、宽和高
- 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; :隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
苦 才是生活
累 才是工作
变 才是命运
忍 才是历练
容 才是智慧
静 才是修养
舍 才会得到
做 才会拥有