提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
本文主要是介绍一些CSS的知识,祝秀儿阿姨越来越漂亮越来越好看
一、CSS是什么?
样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
二、CSS的使用方法
1.行内式----HTML标签中使用CSS
代码如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>行内式</title>
</head>
<body>
<p style="color:red;font-size:20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p>
</body>
</html>
2.内嵌式---将CSS内容通过style标签写在head标签中
代码如下(示例):
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>内嵌式</title>
<style>
p{
background-color:#21B4BB;
color:#fff;
font-size:20px;
}
</style>
</head>
<body>
<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
</body>
</html>
3.外联式---通过link标签引入外部样式表(css样式文件)
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
4.导入式(@import)
<style type="text/css">
@import css路径;
</style>
三.利用div和外联CSS写一个页面的页头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一个正经的新闻页面</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<script src="js/menu.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="main">
<div class="header"><!-- 头部盒子 -->
<div class="header-head">
<div class="logo">
<img src="img/logo.png" >
</div>
<div class="nav">
<ul>
<li><a href="#">导航</a></li>
<li><a href="#">主页</a></li>
<li><a href="#">三个字</a></li>
</ul>
</div>
<div class="search" id="">
<input type="text" name="" id="" value="" />
<input type="button" value="search"/>
</div>
<div id="loginContainer"><a href="#" id="loginButton"><span>登录</span></a>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">用户名</label>
<input type="text" name="email" id="email">
</fieldset>
<fieldset>
<label for="password">密码</label>
<input type="password" name="password" id="password">
</fieldset>
<input type="submit" id="login" value="登录">
<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我的密码</i></label>
</fieldset>
<span><a href="zc1.html">注册</a></span>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
总结
以上就是今天要讲的内容