美化网页元素
1.字体样式
font-family: "arial black";/* 字体 */
font-size: 20px;/* 字体大小 */
font-weight: bold;/* 字体加粗 */
color: red;/* 字体颜色*/
font: bold 42px "楷体" ;/* 一般用这种方式来写
2.文本样式
text-align: center;/* 排版居中 用于文本居中 */
text-indent: 2em;/* 首行缩进 em表示字 */
line-height: 200px;/* 行高 用于单行文字上下居中 */
text-decoration: underline;/* 下划线 去除下划线是none */
3.文本阴影和超链接伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a {
text-decoration: none;
color: yellow;
}
/* 鼠标悬浮变色 */
a:hover{
color: red;
}
/*鼠标点击变色 */
a:active{
color: blue;
}
/* 文本阴影 */
#author{
text-shadow: darkgray 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="img/360.png">
</a>
<p>
<a href="#">码出高效，Java开发手册</a>
</p>
<p id="author">
<a href="#">作者：古井老师</a>
</p>
</body>
</html>
4.列表
ul li{
/* none:去掉黑点
circle:空心圆
decimal:数字
square:正方形 */
list-style: decimal;
}
5.背景
body{
background-image: url(img/360.png);/* 默认是铺满 */
background-repeat:no-repeat;/* 不平铺 常用 */
/* 常用写法 颜色 图片 位置 平铺方式 */
background: red url(img/360.png) 200px 10px no-repeat;
}
6.盒子模型
- border：边框
- margin：外边距
- padding：内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 好多标签有一个默认的外边距 margin:0 去掉外边距 */
#app{
width: 300px;
/*边框：粗细 颜色 样式 soild实线 dashed 虚线 */
border:1px black solid ;
/* 外边距 */
margin: 0 auto;/*上下为0 左右居中 */
}
form{
/* 内边距 */
padding: 20px 45px;/* 上下为20 左右为40 */
}
</style>
</head>
<body>
<div id="app">
<form action="#" method="get">
<div>
<span>姓名:</span>
<input type="text" value="" />
</div>
<div>
<span>密码:</span>
<input type="password" value="" />
</div>
</form>
</div>
</body>
</html>
我们在设计元素样式的时候，就需要考虑：
元素的大小=margin+padding+border+内容宽度
7.浮动
块极元素：独占一行
h1-h6 ，p，div，列表…
行内元素：可以并排放在一行
span，a，img，strong
块元素与行元素的转换
display: block;/* 将行标签转换为块标签 */
display: inline;/* 将块元素转为行标签 */ display: inline-block;/* 保持块元素但可以写在一行 */
display: none;/* 消失 */
使用浮动和清除
float: left;/* 左浮 */
float: right;/* 右浮 */
/* 使用完浮动时候，都需要清除浮动 */
clear: both;/* 左右浮动都清除 */
clear: left;/* 清除左浮动 */
clear: right;/* 清除右浮动 */
8.定位
相对定位
相对定位：position：relative
相对于原来的位置，进行指定的偏移，它任然在标准文档流中，原来的位置会被保留
#first {
background: #FF0000;
position: relative;/* 相对定位 */
top: -20px;/* 向上移动20px */
left: 20px;/* 向右移20px */
bottom: -10px;/* 向下移动10px */
}
绝对定位
position: absolute
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相当于父级元素进行偏移
相对于浏览器或父级的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
#father {
border: 2px black solid;
padding: 0;
position: relative;
}
#first {
background: #FF0000;
position: absolute;/* 绝对定位 */
left: 20px;/* 相对于父级定位 */
}
固定定位
position: fixed;
直接被定死，不会跟着滚动条而移动
