图片和文字样式

来源：互联网发布：nodejs怎么运行js文件编辑：程序博客网时间：2024/04/29 00:40

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
#div{
width: 700px;
height: 700px;
/*设置一个背景颜色*/
background-color: red;
/*背景图*/
background-image: url("1.png");
/*水平平铺*/
background-repeat: no-repeat;
/*取值:repeat-x:延x轴方向平铺
repeat-y:延y轴方向平铺
no-repeat:延x y轴都不平铺*/
background-attachment: scroll;
/*取值: fixed 固定不同,不随着页面滚动条的滚动而发生的位置改变
scroll随着页面滚动而发生相应的改变*/

/*背景图在轴的位置*/
background-position-y: 100px;
/*y取值:具体数值 top,center,bottom*/
/*复合写法*/
/*background-position: 100px 100px;*/
background-position: 50% 50%;
}

#a{
width: 400px;
height: 100px;
border: 1px soilder red;
/*字体颜色*/
color: skyblue;
/*字体样式
italtic: 斜体
normal:(默认状态)*/
font-style: italtic;
/*
字体加粗
bold:粗体
bolder:更粗
199-900由细到粗
400==normal
700==blod*/
font-weight: bold;
/*文本对齐
left: 左对齐
center: 中心对齐
right:右对齐*/
text-align: center;
/*首行缩进
lem = 16px*/
text-indent: 2em;

/*文本修饰
underline:下划线
overline: 上划线
line-through: 删除线*/
text-decoration: line-through;
/*文字转换
capitalize:首字母大写
lowercase:首字母小写
uppercase:大写字母*/
text-transform: capitalize;
/*字体大小
默认字体大小:16px*/
font-size: 20px;
/*行高
行与行之间的距离
对于单行文本,设置行高==设置标签的高度
显示为垂直居中*/
line-height: 200px;
/*设置字体样式*/
font-family: '宋体';
/*字体族,优先选择
*/
/*强制换行*/
word-wrap: break-word;
/*行与行之间的距离*/
word-spacing: 1 px;

}
</style>
</head>
<body>
<div id="div">我是一个div哈哈哈哈哈</div>
<p id="a">
我是一个span洒洒水
我是一个span洒洒水
V我是一个span洒洒水
</p>
</body>
</html>

阅读全文

0 0