每个css样式都必须有两部分组成:选择符和声明
css属性:属性是指定选择符具有的属性,是css的核心
文本属性:(属性:属性值) 作用 :控制文本的样式
line-height:行高
数值(当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直方向的居中,小于时靠上,大于时靠下);
<systel>
#nh{
width: 400px;
height: 200px;
background: #F5F5DC;
line-height: 200px;
}
</systel>
<div id="nh">你好</div>
font-size:数值; 字体大小 注:设置时一般都是用偶数,数值最小最好别低于12px;
font-family:字体; 控制文字字体;注:有多个属性值的时候用,隔开
color:颜色值; 控制文字颜色
font-weight:字体是否加粗
bold--加粗
bolder--更粗
(100-900)--100-500常规,600-900加粗
font-style:字体是否倾斜
italic/oblique--倾斜 oblique的倾斜幅度更大
normal --默认的
font-variant:文本是否大小写
small-caps--小型的大写字母字体,字体变小
normal --默认的
text-align:文本对齐方式
center--居中
right--有对齐
left--左对齐
justify--对内容以两端边界线对齐显示
<style type="text/css">
*{
margin:0;
padding:0;
}
b,strong{
font-weight: normal;
font-style: normal;
}
#sub{
width: 400px;
height: 200px;
background: darkorchid;
}
.fon{
/*字体大小*/
font-size: 30px;
/*行高*/
line-height: 30px;
/*字体样式*/
font-family: "微软雅黑";
/*字体颜色*/
color: beige;
/*字体加粗*/
font-weight: bold;
/*字体倾斜*/
font-style: oblique;
}
</style>
<body>
<div id="sub">
<div class="fon">css的文字属性</div>
</div>
</body>
背景属性:控制网页的背景
1:background-color: 背景颜色
属性值:颜色值(最好使用16进制颜色值)
2:background-image: 背景图 (背景图不占据空间)
属性值:url(图片地址),;
注:a:背景图小于容器属性时默认显示平铺状态
b:当背景图等于容器尺寸时显示一张
c:当背景图大于容器尺寸时只显示容器区域
3:background-repeat:控制背景图是否平铺
属性值:repeat --平铺
no-repeat--不平铺
repeat-x--横向平铺
repeat-y--纵向平铺
4:background-position:控制图片位置
属性值:左右位置(left/right/center) 上下位置(top/bottom/center)
注:可以写固定的数值(如 100px,200px):
第一个正值:往右
第二个正直:往下
5:background-size:设置背景图片大小
属性值:100px 100px(宽度,高度)
注:页面平铺背景图片background-size:100%
<style>
*{
margin:0;
padding:0;
font-weight: normal;
font-style: normal;
}
.txt{
width: 1000px;
height: 1000px;
background-color: #9932CC;
background-image: url(img/yy.jpg);
background-repeat:no-repeat ;/*使背景图片不平铺*/
background-position: 10px 100px;
}
</style>
<body>
<p class="txt"></p>
</body>
5:复合式写法:background:
属性值:颜色 图片地址 是否平铺 左右位置 上下位置;
<style>
.fh{
width: 500px;
height: 500px;
background: #F5F5DC url(img/qxx.png) no-repeat right bottom;
}
</style>
<body>
<div class="fh">
</div>
</body>
例:背景图在页面铺面(通体背景图)
<head>
<title>居中</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.div1{
width: 100%;
height: 100%;
background: url("http://img4.imgtn.bdimg.com/it/u=3545561584,783374626&fm=26&gp=0.jpg") no-repeat center;
/*置背景图像是否固定或者随着页面的其余部分滚动*/
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>