CSS的学习笔记

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

 

 


前言


本文主要是介绍一些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>

总结


以上就是今天要讲的内容

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值