《html学习笔记》之css样式-CFANZ编程社区

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>标签

《html学习笔记》之css样式_html

2.2外部样式表

就是单独建个css文件

《html学习笔记》之css样式_html_02

2.3行内样式表

就是例如：<p style="color: bule; ·····；“>

3.美化例子

以下是我做的注册界面

1.效果图

《html学习笔记》之css样式_css_03

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;  
}