zoukankan      html  css  js  c++  java
  • HTML与CSS笔记3

    1.设置段落的blackground-color属性

       p{blackground-color:red;

       }

       设置border(边框)属性

       p{blackground-color:red;

           border:1px solid gray;    宽度为一个像素,实线,灰色

       }

        注:在CSS中元素名称的两边不加<>

    2.把CSS引入到XHTML中:在<head>元素里添加样式的开始和结束标志

    (把CSS用于HTML有3中方式:链接的样式表(使用link),嵌入式样式表(使用style元素嵌入到head中),内联样式表(直接内联到元素中),此处为嵌入式样式表)

       <head>

         <style type=“text/css”>

         p{

              color:maroon;

         }

         </style>

       </head>

    3.为标题添加样式

       h1{

             font-family:sans-serif;(把字体设置为sans-serif)

             color:gray;(设置字体颜色为gray)

        }

       h2{

            font-family:sans-serif;(把字体设置为sans-serif)

     

            color:gray;(设置字体颜色为gray)

     

        }

    注意:规则相同时可整合到一起

        h1,h2{

     

                     font-family:sans-serif;(把字体设置为sans-serif)

     

                     color:gray;(设置字体颜色为gray)

         }

    4.给欢迎词加底部边框下划线

       border-bottom:1px solid blac;

       例如:

       h1,h2{

                   font-family:sans-serif;

                   color:gray;

                   border-bottom:1px solid black;

         }

    区别:指定只针对<h1>的规划

       h1,h2{

                          font-family:sans-serif;   (使用sans-serif字体时没有“衬线”)

                          color:gray;

              }

             h1{

                   border-bottom:1px solid black;

              }

    5.对多个页面进行相同的CSS设计

       ①取出"lounge.html"里的规则并以一个名为“lounge.css”的CSS文件保存它们(把style元素删除)

          注意:CSS文件中只包含从lounge.html剪切过来的CSS规则,不包括<style>

       ②把"lounge.html"链接到外部样式表(经常称CSS文件为“样式表”):

          使用<link>的HTML元素实现这个功能

          <head>

          <link   type="text/css"   rel="stylesheet"   href="lounge.css"   /> 

          </head>

          解释:

          link:使用<link>元素来链接外部信息

          type="text/css":信息的类型是"text/css",也就是一个CSS样式表

          rel="stylesheet":rel属性指明XHTML文件和你要链接的东西之间的关系。我们要链接到一个样式表,因此将值设为“stylesheet”

          href="lounge.css":样式表定位于这个href(现在我们使用的是相对链接,但它可以是一个完整的URL)

          <link>是一个空元素

       ③对其他页面进行类似的处理

         注意:链接的路径是否需要改动,如:

         <link   type="text/css"   rel="stylesheet"   href="../lounge.css"   /> 

  • 相关阅读:
    【Emit基础】IL定义方法的语法详解
    Audit login 与 Audit logout
    锁定与并发
    【Emit基础】调用Tostring()方法的IL表示
    《DataRabbit 完全手册V1.0》 发布
    Remoting方法重载遇到的一个问题
    DataRabbit 3.1发布,完全支持SqlServer2005/2008
    A*算法的C#实现
    Spring.net 的一个bug ?
    【Emit基础】System.AccessViolationException: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/2392666.html
Copyright © 2011-2022 走看看