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

  • 相关阅读:
    golang通知协程退出
    Linux Centos7下安装Elasticsearch
    es
    Laravel 别名 Facades的用法
    SVN使用时遇到的小问题
    http 重定向到 https
    Git-版本回退
    selenium---上传文件(非input标签)
    selenium---生成BeautifulReport报告
    windows搭建ngnix图片服务器
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/2392666.html
Copyright © 2020-2023  润新知