您的位置：首页 > Web前端 > CSS

css的常用属性

2020-06-10 04:41 645 查看

css背景相关属性：
1.背景颜色:background-color
（1）格式如：
body{ background-color:rgba(0,0,255,0.2) }
或body{ background-color:rgba(0,0,255,0.2) }
2.背景图片background-image
（1）格式：
body{ background-image:url(image/bg.gif) }
3.背景重复：background-repeat
（1）重复平铺满：repeat
（2）向x轴重复:repeat-x
（3）向y轴重复:repeat-y
（4）不重复：no-repeat
4.背景位置：background-position
（1）横向：left，center，right
（2）纵向：top，center，bottom
（3）格式：
正常情况：
bacskground-position:top center;
用数字来表示位置：
background-position：300px 20px;
（注意：无论哪种情况若只写一个，则另一个默认为center）
（4）简写：body{ background:#f2f2f2 url ( images/bg.gif) no-repeat center; }

<html>
<head>
<title>css常用属性（背景相关属性）</title>
<style type="text/css">
body{
width=200px;height=200px;
background-color:rgba(0,0,255,0.2);
background-images:url(images/Tom.gif);
bacskground-position:top center;
}
</style>
</head>
<body>

</body>
</html>

Css的文本属性
1.横向排列：text-align:left,right,center;
2.Line-height文本行高（1）基于字体大小的%（2）数值设定固定值
3.text-indent首行缩进（1）父元素的%（2）设置固定值（3）inherit继承
4.letter-spacing字符间距（1）normal（2）px设置固定值（3）inherit
5.word-spacing单词间距（1）normal（2）px设置固定值（3）inherit
6.direction文本方向（1）ltr从左到右（2）rtl从右到左（3）
7.text-transform文本大小写（1）none默认（2）:capitalize 每个单词第一个字母大写
（2）uppercase 仅有大写（4）lowercase仅有小写字母（5）inherit和父元素属性相同

<html>
<head>
<title>css常用属性（文本属性 ）</title>
<meta charset="uft-8">
<style type="text/css">
div{
width:100%;
height:300px
}
p{
/*text-align:left;*/
font-size：20px;<!--一个字的高度-->
line-height:20px;
text-indent:10%;
letter-spacing:3px;
word-spacing:20px;
direction:rtl;
text-transform:uppercase;
}
</style>
</head>
<body>
<div>
<p>麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院</p>
<p>mai zi xue yuan</p>
</div>
</body>
</html>

Css的边框属性
1.边框种类：
（1）none
（2）solid
（3）Dashed
（4）Dotted
（5）Double
（6）Groove
（7）Ridge
（8）Inset
（9）Outset
（10）inherit
2.边框宽度
（1）统一风格：border-width
（2）单独风格：border-top-width，border-left-width…
（3）属性值：thin；medium；thick…；设置px；inherit继承
3.边框颜色
（1）统一风格：border-color
（2）单独风格border-top-color，border-left-color…
（3）属性值：red,green等等
Rgb(0,0,255)
Rgba(0,255,0,0.8)
#ff6600
Inherit
（4）属性的四种情况：一个值：border-color：red;四条边都是red
两个值：border-color：blue pink；上下两条边是blue，左右是pink
三个值：（上，左右，下）
四个值：（上，右，下，左）
5.简写方式：border：solid 2px #f60…;

<html>
<head>
<title>css常用属性（边框属性）</title>
<meta charset="uft-8">
<style type="text/css">
div{
border-width:4px;<!--把4px换为thin为细边框，medium为中等，thick为粗-->
text-align:center;
width:60px;
height:60px;
float:left;
margin-right:10px;
background-color:#f60;
}
.div0{
border-top-style:none;
}
.div1{
border-top-style:solid;
}
.div2{
border-bottom-style:dashed;
}
.div3{
border-left-style:dotted;
}
.div4{
border-style:double;
borger-left-width:5px;
border-color:blue pink;
}
.div5,.div6,.div7,.div8{
border-width:20px;
width:40px; height:40px;
background:none;
border-color:#ccc;
}
.div5{
border-style:groove;
}
.div6{
border-style:ridge;
}
.div7{
border-style:inset;
}
.div8{
border-style:outset;
}
.div9{
border-style:inherit;
}
</style>
</head>
<body>
<div class="div0">none</div>
<div class="div1">solid</div>
<div class="div2">dashed</div>
<div class="div3">dotted</div>
<div class="div4">double</div>
<div class="div5">groove</div>
<div class="div6">ridge</div>
<div class="div7">inset</div>
<div class="div8">outset</div>
<div class="div9">inherit</div>
</body>
</html>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航