1.css选择器
1.1基本格式:
选择器 {样式内容} ,例如:div {
backgrondcolor: blue; }
。
可分为标签,类,id选择器
- 标签 : 某标签 { },例:
div {
backgrondcolor: blue; }
。 - 类 : .名称{ },例:
.box {text-align :center;}
用的时候用class="box",例:<div class="box">
- id: #名称{ },和类相似,但在使用时不是class而是id="box".
1.2 文字属性
font 是关于文字的,由此而诞生样式有很多,
<style>
div {
font-size :10px
/*size是用来改变文字大小的,px是像素,em是相对大小于网页文字的*/
font-family: Arial,xxx,xxx;
/*用来设置字体,可以多个,但系统只会读取你拥有的靠前的字体*/
font-weight: normal;
/*字体粗细,可以用数字来表示400相当于normal,700相当于bold*/
font-style: normal;
/*文字样式,italic为斜体*/
</style>
1.3文本属性
一般为text-,样式很多
div {
color: blue;
/*定义文本颜色*/
text-align: center;
/*水平对齐方式,可以left,right.*/
text-decoration: none;
/*装饰文本,添加下划线,上划线和删除线*/
text-indent: 2em;
/*文本缩进,文本的第一行缩进多少距离*/
line-height: normal;
/*行间距,上行距,下行距*/
}
2.样式表
2.1内部样式表
在头部<head> </head>中引入<style> </style>标签
2.2外部样式表
就是单独建个css文件
2.3行内样式表
就是例如:<p style="color: bule; ·····;“>
3.美化例子
以下是我做的注册界面
1.效果图
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>post.com</title>
<link rel="stylesheet" type="text/css" href="../Css/风格.css">
<style>
.read{
color: cadetblue;
}
.read1{
color: blue;
}
a{
text-align: center;
color: rgb(17, 16, 15);
text-shadow: 0ex;
text-decoration-style: initial;
border: chocolate;
margin: 0 auto;
}
div{
background-color: rgb(226, 192, 43);
border:1px solid #ccc;
margin:2em auto 1em;
max-height: 100px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:10px;
height: 50px;
width: 100px;
margin: 0 auto;
}
a {
text-decoration: none;
color:rgb(131, 120, 113)
}
</style>
</head>
<body>
<h1 >关爱智障协会</h1>
<form>
<table align="center">
<tr>
<td>
<label for="name" class="read">名字</label>
</td>
<td>
<input type="text" maxlength="10" id="name">
</td>
<td rowspan="2">
<img src="../image\d2253bd946c81ccbeda028bc0c6c8004.jpeg" width="50" height="50">
</td>
</tr>
<tr>
<td class="read">
密码
</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td class="read">验证码</td>
<td>
<input type="text">
</td>
<td>
<img src="../image\c75e32e6c5aaceaec5ad6938e9b38c13.jpeg" width="50" height="50">
</td>
</tr>
<tr>
<td><small class="read1">无法登陆</small></td><td></td><td></td><td><small><a href="注册.html" target="_blank" class="read1">注册</a></small></td>
</tr>
</table>
<div><p><a href="主页面.html">登陆</a></p></div>
</form>
</body>
</html>
3.Css
h1,h3,p{
color: brown;
text-align: center;word-wrap: initial;
border: 0mm;
}
body
{
width: 100%;
height: 100%;
background-repeat:no-repeat;
background: url("../image/img2.jpg");
background-attachment: fixed;
background-position: center;
background-size: cover;
}
table{
color: rgb(29, 27, 28);
background-color: rgb(251, 252, 240);
padding: 30px;
border:1px solid #ccc;
margin:2em auto 1em;
max-width:450px;
min-width:344px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}