zoukankan      html  css  js  c++  java
  • 样式表

         样式表主要有内联样式表、内嵌样式表、外部样式表。

    内联样式表和HTML联合显示,控制精确,但是可重用性差,冗余较多。

       例:<p style="font-size:14px;">内联样式表</p>

    内嵌样式表

      作为一个独立区域内嵌在网页里,必须写在head标签里面。

      <style type="text/css">

      p   //格式对p标签起作用

      {

      样式;

      }

      </style>

    外部样式表

      新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表附加样式表。一般用link连接方式。

     

     

    HTML练习代码

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    
    <link href="Untitled-2.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body><br />
    <br />
    <a href="http://www.baidu.com/" target="new">百度一哈</a><br />
    <br />
    
    <div style="background-color:#0F0">324322内联样式表</div>
    <p>春来了。</p>
    <p>春天花会开,鸟儿自由自在。</p>
    <div class="aa" id="a1">引用样式表,用class</div>
    <div class="aa" id="a2"><p>2</p></div>
    <div class="aa" id="a3">3</div>
    <div class="aa" id="a4">4</div>
    </body>
    </html>

     

    css样式表

    @charset "utf-8";
    /* CSS Document */
    p/*针对所有p标签*/
    {
         font-size:36px;/*字体大小*/
         color:#F00;/*文字颜色*/
         background-color:#FF0;}/*背景颜色*/
    .aa/*class选择器,以“.”开头,此样式表定义一个,可以被多次引用,花括号里可以设置div标签的宽度高度以及边框粗细及边框颜色,
    引用时需用class,如<div class="aa"></div>可以同时写多个这种样式*/
    {
        300px;
        height:200px;
        border:1px solid #F00;}
    .aa p/*此处p标签表示后代,表示p标签在.aa标签里面,引用时直接在div标签内部加入p标签*/
    {
        font-size:36px;
        color:#FF0}         
    #a1/*ID选择器。以“#”开头,定义不同的div标签,花括号里可以定义格式,颜色等,引用时用class, <div class id="a1"></a>;*/
    {
        background-color:#0F0;}    
    #a2
    {
        background-color:#00F;}    
    #a3
    {
        background-color:#F0F;}    
    #a4
    {
        background-color:#FF0;}    
    a/*给a标签链接的文字调整字体*/
    {
        font-size:24px}    
    a:link/*超链接被点前的状态,下一步是表示没有下划线,字体颜色是黑色*/
    {
        text-decoration:none;
        color:black;}
    a:visited/*超链接点击后的状态,下一步表示没有下划线,点击后字体颜色是黑色*/
    {
        text-decoration:none;
        color:black;}        
    a:hover/*鼠标悬停在超链接时的状态,下一步表示有下划线,字体颜色是红色*/
    {
        text-decoration:underline;
        color:red;}
    a:active/*鼠标点击超链接时的状态,下一步表示有下划线,字体颜色是橙色。  在定义这些状态时,有一个顺序l v h a,这四个顺序不能弄错*/
    {
        text-decoration:underline;
        color:orange;}    

    效果图

     

       

  • 相关阅读:
    002 下载文件
    001 okhttp3的POST使用
    000 okhttp3的Get使用
    008 webpack的其他使用方式
    007 webpack基本的用法
    three.js 3d三维网页代码加密的实现方法
    物联网开发技术栈
    9个顶级开发IoT项目的开源物联网平台
    hibernate缓存机制详细分析
    机器学习大牛最常用的5个回归损失函数,你知道几个?
  • 原文地址:https://www.cnblogs.com/zyg316/p/5515356.html
Copyright © 2011-2022 走看看