1.字体
font-family:字体
如果本地不存在使用默认字体
font-size
设置字体大小 单位(mm:绝对单位,px:相对单位)
font-weight:文字加粗
参数
normal:正常粗细
lighter:比正常要细
bold 粗体
bolder:加粗体
100~900:越大越粗
font-style:文字样式
itcalic:意大利体
normal:正常
oblique:正常
文字复合属性
font:bild italic 12px; 加粗 斜体 大小;
文字颜色:color
text-decoration:文字下划线
参数
none:正常
underline:为文字加下划线
overline:为文字加顶划线
line-through:为文字加删除线
blik:文字闪烁
text-transform:文字大小写转换
参数
capitalize:单词首字符全部大写
lowercase:全部小写
uppercase:全部大写
文字间距:
letter-spacing:控制字体距离
word-spacing:控制单词间距
文字对齐方式:text-align
参数
center:居中
left:左对齐
right:右对齐
justify:两端对齐
文字行高:line-height
首行缩进:text-indent:
段落距离:margin
2.图片样式
border:图片边框
width:宽度
height:高度
<img src="路径" width="" height="" border="1"/>
图片对齐通过父标签 使用text-align来实现对齐
vertical-align:只能用于行内元素 设置行内垂直对齐方式
参数:
baseline:默认,元素放在基线上
top:把元素顶端与行中最高元素的顶端对齐
middle:把此元素放在父元素的中部
bottom:把元素顶端与最低元素的顶端对齐
sub:垂直对齐文本下标
super:垂直对齐文本上标
text-bottom:把元素的低端与父元素的中文字的低端对齐
text-top:把元素的顶端与父元素的中文字的顶端对齐
3.背景样式
background-image:url();背景图片
background-color:背景颜色
背景图片的平铺:
background-repeat
参数:
repeat:沿水平方向
no-repeat:不平铺
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景图片的位置
background-position
参数 一般两个值,一个水平方向,一个垂直方向
水平方向:left,center,right
垂直方向:top,center,bottom
固定背景图片位置
backgound-attachment:
4.列表样式
list-style-list
属性
Disc:实心圆
Circle:空心圆
square:正方形
decimal:123456
upper-alpha:A,B,C
lower-alpha:a,b,c
upper-roman:I,II,III,Iv
lower-roman:i,ii,iii
None:不显示
list-style-image:图像符号
4.表格样式
border:大小 颜色 样式
border-spacing 单元格的间距
border-collaspe:边框相同,重合显示进行合并
border-width:边框粗细 若样式重合,看优先级显示 优先级为double,solid,dashed,dotted,ridge,outset,
groove,inset
border-style 优先级:hidden 优先级最高,none最低
color:设置文字颜色
backgound:设置表格背景颜色和图像
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS排版</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
padding-top: 25px;
background-color: chartreuse;
text-align: center;
width: 100%;
height:50px;
}
ul{
padding-top: 20px;
padding-left: 30%;
height: 30px;
background:rgb(78, 143, 13);
}
li{
text-align: center;
display: inline;
list-style: none;
}
a{
padding:5px 20px;
font-size: 30px;
color: #0c0c0c;
background:rgb(78, 143, 13);
text-decoration: none;
line-height: 10px;
}
a:hover{
}
</style>
</head>
<body>
<header>顶部</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">版面设计</a></li>
<li><a href="#">文章导读</a></li>
<li><a href="#">收藏资源</a></li>
<li><a href="#">休闲娱乐</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</body>
</html>
例2
<!DOCTYPE html>
<html>
<head>
<meta>
<title>申请表</title>
</head>
<body >
<div style="width: 500px; background:green;height: 300px;">
<p align="center"><b>申请表</b></p>
<span><hr></span>
<form>
姓名:<input><br>
感兴趣的职位:<br>
<input type="radio" name="gender" value="男">Web 设计人员
<input type="radio" name="gender" value="女">Web 管理人员
<input type="radio" name="gender" value="女">Web 开发人员
<br>
其他要求
<br>
<textarea placeholder="包括薪水待遇、工作地点等。"></textarea>
<br>
<input type="checkbox" name="hobbies1" value="篮球">发送确认信息
<br>
<select >
<option value="无经验">无经验</option>
<option>1年</option>
<option>2年</option>
<option>3年</option>
</select>
<br>
<div style="text-align: center">
<button>确认</button>
<input type="reset" value="重置">
</div>
</form>
</div>
</body>
</html>