零基础学css
选择器：标签选择器、id选择器、类选择器
----------------------------------------------------------------------------
标签中：
<p style="color:blue；"></p>:修饰p标签的字体颜色
<p style="color:#BC8F8F"></p>
<p style="color:rgb(205,92,92)"></p>
----------------------------------------------------------------------------
<head>中：
<style type="text/css">
p{
color: red;
}
</style>
color: red; ：标签内字体颜色
background: green; ：背景色
------------------------------------------------------------------------------
单独的css文件：
html中引入css:<link rel="stylesheet" type="text/css" href="index.css">
html代码：
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti repellendus omnis, voluptatibus dicta quidem aliquam doloribus illum, ex a harum maiores. Sed quo deleniti debitis blanditiis itaque qui totam facilis?</p> <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde recusandae accusantium consequatur ex laboriosam tempora ipsa blanditiis, explicabo, quo aliquam temporibus enim natus sapiente provident eaque molestiae amet. Ut, molestiae.</p> <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, perferendis est, itaque, aut aliquid nisi iure soluta quisquam quibusdam sint cumque ducimus error, commodi aliquam. Quis culpa temporibus officia libero.</p>
css代码：
p{ color: lightblue; /*background: green;*/ } #p1{ color: red; } .p2{ color: blue; }
----------------------------------------------------------------------------------
div:
------------------------------------------------------------------------------------------------------------------------
登录界面
css代码：
#container{ height: 300px; width: 400px; border: 1px solid; margin-top: 300px; margin-left: 40%; background-image: url("../img/qq.jpg"); background-repeat: no-repeat; background-position: center center; } .input{ height: 40px; width: 280px; margin-top: 50px; margin-left: 50px; } .button{ margin-top: 10px; margin-left: 100px; } .btn{ margin-left: 30px; } #user{ background-image: url("../img/head.png"); background-repeat: no-repeat;/*图片背景取消平铺*/ padding-left: 30px; } #password{ background-image: url("../img/key.jpg"); background-repeat: no-repeat; padding-left: 30px; }
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ登录界面</title>
<link rel="stylesheet" type="text/css" href="css/index4.css">
</head>
<body>
<div id="container">
<div class="input">
用户名：<input type="text" id="user">
</div>
<div class="input">
密 码：<input type="password" id="password">
</div>
<div class="button">
<input type="button" class="btn" value="登录">
<input type="button" class="btn" value="注册">
</div>
</div>
</body>
</html>
