【7.0】CSS之属性
【一】长度和宽度
- /* 块级标签无法设置长度和宽度，就算写了也不会生效 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
height: 200px;
width: 100px;
}
/* 块级标签无法设置长度和宽度，就算写了也不会生效 */
span {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<p>这是一个P标签</p>
<span>这是一个SPAN标签</span>
</body>
</html>
【二】字体属性
【1】概述
/*# 文字字体*/
font-family: "Microsoft Yahei"
/*# 字体大小*/
font-size: 24px
/*# 字体粗细*/
font-weight: lighter\bolder
/*# 字体颜色*/
/*方式1:*/
color: red;
/*方式2:*/
color: rgb(128, 128, 128);
/*方式3:*/
color: #4f4f4f;
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: "JetBrains Mono ExtraLight"; /* 可以跟多个，第一个不生效会依次判断 */
font-size: 24px; /* 字体大小 */
font-weight: inherit; /* 子重 (inherit : 继承父元素的粗细值) */
/*color: blue; !* 字体颜色，颜色英文 *!*/
/*color: #dddddd; !* 字体颜色，颜色编号 *!*/
/*color: rgb(122, 69, 36); !* 字体颜色，rgb(0~255) *!*/
color: rgb(122, 69, 36, 0.8); /* 第四个参数是透明度(0~1) */
/* 当你想用一些颜色的时候，可以使用相关的工具
1.pycharm自带取色器
2.微信/QQ截图，取色器
*/
}
</style>
</head>
<body>
<p>这是一个P标签</p>
</body>
</html>
【3】获取颜色的方式
（1）截图软件自带取色功能
- 微信、qq自带颜色编号 #4f4f4f
（2）pycharm提供的取色器
- 左侧颜色块点击即可
【三】文字属性
【1】概述
/*# 文字对齐*/
text-align:center/left/right
/*# 文字装饰(重点)*/
"""a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)"""
/*主要就是用于去除a标签的下划线*/
text-decoration: none;
/*删除线*/
text-decoration: line-through;
/*上边线*/
text-decoration: overline;
/*下划线*/
text-decoration: underline;
/*# 首行缩进*/
/*# 首行缩进32px*/
text-indent: 32px;
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*text-align: center; !* 文字居中 *!*/
/*text-align: left; !* 左居中 *!*/
text-align: justify; /* 两端对齐 */
/*text-decoration: underline; !* 下划线 *!*/
text-decoration: line-through; /* 删除线 */
/*text-decoration: overline; !* 删除线 *!*/
/* 在html中，很多标签的样式效果是一样的 */
font-size:16px; /* 先知道文字的具体长度 */
text-indent: 32px; /* 缩进32px */
}
a {
text-decoration: none; /* 取出a标签自带的下划线 */
}
</style>
</head>
<body>
<p>我是一个P标签</p>
<a href=""></a>
</body>
</html>
【3】补充
- 补充:可以使用浏览器做样式的动态调整
- 查找到标签的css 然后左键选中 通过方向键上下动态修改数值
【四】背景属性
【1】概述
/*# 1.背景颜色*/
background-color: red;
/*# 2.背景图片*/
background-image:url("111.png");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
/*是否平铺*/
background-repeat:no-repeat\repeat-x\repeat-y
/*图片位置*/
background-position:left top;
/*背景附着*/
background-attachment: fixed;
- 如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
background:#336699 url('1.png') no-repeat left top;
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*height: 400px;*/
/*width: 400px;*/
/*background-color: red;*/
/* 设置背景图片 */
/*background-image: url("url链接"); !* 默认全部铺满 *!*/
/*background-repeat: no-repeat; !* 不铺满 *!*/
/* 其实浏览器不是一个平幔，而是一个三维立体结构
Z 轴指向用户 ， Z 越大，离用户越近
*/
/*background-position:center center; !* 图片居中(第一个参数控制左边的距离，第二个参数是上距离) *!*/
/* 简写 */
/* 只需要填上想要加的参数即可，位置没有关系，参数对应就可以 */
background: red url("url") no-repeat center center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
【五】边框
【1】概述
/*# 1.自定义调整每个边的边框*/
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
/*# 2.统一调整每个边的边框*/
border: 5px solid black; 顺序无所谓 只要给了三个就行
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
/*# 3.画圆*/
border-radius: 50%
# 如果长宽一样那么就是圆 不一样就是椭圆
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
border-width: 20px;
border-style: solid;
border-color: green;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: green;*/
/*border-left-style: solid;*/
/*border-top-width: 5px;*/
/*border-top-color: green;*/
/*border-top-style: solid;*/
/*border-right-width: 5px;*/
/*border-right-color: green;*/
/*border-right-style: solid;*/
/*border-buttom-width: 5px;*/
/*border-buttom-color: green;*/
/*border-buttom-style: solid;*/
/* 支持简写 */
border: 3px solid red; /* 默认四个边一样，不区分三者的位置 */
}
/* 如何画圆 */
#d1 {
height: 600px;
width: 600px;
border-radius: 50% /* 正方形只写50%即可是园，两边不一致是椭圆 */
}
</style>
</head>
<body>
<dic>安得猛士兮走四方
<p>
大风起兮云飞扬
</p>
</dic>
<div id="d1"></div>
</body>
</html>
【六】display属性
【1】概述
"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
【2】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
/*display: none; !* 隐藏标签，不展示到前端页面且原来的位置也不再占有了，但是存在于文档上 *!*/
display: inline; /* 将标签设置成行内标签的特点 */
}
#d2 {
display: inline;
}
#s1 {
display: block; /* 将标签设置成块级标签的特点 */
}
#s2 {
display: block;
}
#d3 {
display: inline-block; /* 标签既在一行显示又是块级标签 */
}
#d4 {
display: inline-block;
}
</style>
</head>
<body>
<div id="d1"> 001</div>
<div id="d2"> 002</div>
<span id="s1">003</span>
<span id="s2">004</span>
<div id="d3">005</div>
<div id="d4">004</div>
<div id="d5" style="display: none">这是display ， 隐藏且不占位置</div>
<div id="d6" style="visibility: hidden">这是visibility ， 隐藏但是占位置</div>"
</body>
</html>
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/18036069
