HTML-CSS基础练习

<!-- Doctype:文档类型,用于指定dtd(说明当前这个html的版本) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>css1.html</title>

<!-- 告诉搜索引擎,搜索关键字,其实写的多没用,因为他就看前几个 -->
    <meta http-equiv="keywords" content="CSS,HTML,OBIEE">
    <meta http-equiv="description" content="this is my page">
    <!-- 告诉浏览器文件是什么编码 -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!-- 引入CSS文件 -->
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- css类选择器,需要点开头-->
    <!-- 
    .style1{
       font-weight:bold;
       font-size:20px;
       background-color:pink;
    }
    <span style="style1">类选择器</span>
     -->
    <!-- ID选择器,需要#开头,html中要引用id选择器,则 -->
    <!-- 
      #style2{
        font-size:30px;
        background-color:silver; 
      }
      <span id="style2">id选择器</span>
     -->
     <!-- html选择器 -->
     <!-- 
     body{
       color:orange;
     }
      -->




    <!-- 内部CSS ,将span中单独设置的很多style=“”更改为style统一格式。-->
    <style type="text/css">
    .style1{
       font-size:30px;
       color:maroon;
       font-style:oblique;
       font-weight:bolder;
      }
    
      /*使用滤镜*/
      img{
        filter:gray;
        width:500px;
      }
      /*超链接,默认图片给灰色*/
      a:link img{
        filter:gray;
      }
      /*超链接,鼠标到达的时候显示原来的颜色*/
      a:hover img{
        filter:""
      }
    </style>
    
    
  </head>
  <body>
<!--  <br/>*****DIV加CSS******<br/>
div元素是用来为HTML文档内大块block-level的内容提供结构和背景的元素<br/>
CSS层叠样式表单cascading style sheets,一种用来表现HTML或XML等文件式样的计算机语言<br/>
div+css是web标准中常用术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。<br/>
简单理解:<br/>
div是用来存放内容(文字、图片、元素)的容器;<br/>
css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观<br/>

使用ide来开发css(myeclipse),集成开发环境,因为有提示功能<br/>
使用span来编写<br/>
-->
     <!-- 注释在window-preference下,content assist的快捷键为alt+/ -->
     <span class="style1">栏目一</span><br/>
     <span class="style1">栏目二</span><br/>
     <span class="style1">栏目三</span><br/>
     <span style="font-size:30px;color:green;">栏目四</span><br/>
     <span style="font-size:30px;color:fuchsia;">栏目五</span><br/>
  
     <a href="#"><img src="images/1.jpg"/></a><br/>
     <a href="#"><img src="images/2.jpg"/></a>
     
     
     
  </body>
</html>
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值