其他的CSS属性
2018-08-17 本文已影响44人
她即我命
<!--1，。文字大小
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a{
/*一般开始都把所有a标签的下划线去掉 */
text-decoration: none;
}
/*-----------背景相关---------- */
#d1{
height: 300px;
/* 1.背景图
注意：如果背景图大于盒子的大小，背景图能显示多少就显示多少
如果背景图小于盒子的大小，就会平铺（重复显示）*/
background-image: url(img/bg.png);
/* 2.是否平铺（重复）*/
background-repeat:no-repeat ;
/* 3.背景图的固定*/
background-attachment: scroll;
/* 4.设置背景图的位置
background-position: x y
x: left/center/right/坐标值
y: top/cenetr/bottom/坐标值
*/
/* background-position: 100px 100px; */
background-position: center;
/* 5.同时设值
background: 图片地址 是否重复 x y
background: 图片地址 是否重复 x y 背景颜色*/
/* background: url(img/icon.ico) no-repeat 100px 100px ; */
}
/*-----------列表相关---------- */
/* 选择器为列表/li都可以*/
ui{
/* 1.设置符号样式
disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)*/
list-style-type: none;
/* 2.设置图片的符号*/
list-style-image: url(img/icon.ico);
/* 3.设置符号的位置
outside(li标签的外边)，inside(在li标签的里面)*/
list-style-position: outside;
}
/*。。。。。文字相关。。。。。 */
p{
/*1.文字大小 */
font-size: 20px;
/*2.字体颜色 */
color: bisque;
/*3.设置字体名 */
font-family: "book antiqua";
/* 4.设置字体的粗细*/
/* 取值100-900 normal*/
font-weight: normal;
/* 5.倾斜*/
font-style: italic;
/* 6.内容对齐方式*/
/* center left right*/
text-align: center;
/* 7.设置行高(一行的高速)
当文字只有一行的时候设置行高和标签的高度一样，可以让文字垂直居中
*/
background-color: darksalmon;
/* height: 100px; */
line-height: 40px;
/* 8.文本修饰*/
/*
none ：去掉修饰
underline ：添加下划线
line-through: 添加删除线
overline: 添加上划线
*/
text-decoration: none;
/* 9.首行缩进
注意单位是 em -空格*/
text-indent: 2em;
/* 10.字间距*/
letter-spacing: 10px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<Ui>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>c</li>
</Ui>
<p>
lalalalalal<br>allalalalalal<br>lalalalalallalal<br>allalallalallalalal
</p>
</body>
</html>
image.png
