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"   /> 

  • 相关阅读:
    Linux常用命令
    C# 报表设计器 (winform 设计端)开发与实现生成网页的HTML报表
    完成复杂表头列表
    流程设计--页面介绍
    流程设计--设计理念
    报表设计--坐标实例-位移坐标
    Spring MVC 工作原理--自我理解
    java ==、equals和hashCode的区别和联系
    java 自动装箱和拆箱
    java maven笔记
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/2392666.html
Copyright © 2011-2022 走看看