• CSS样式表、链接(lvha)样式设置


         在写正文之前,先鸡汤一下我久旱的心灵。前几日,前位突然问我,你为什么来学IT?没想到,这个很简单的答案,此刻我竟然懵逼了。此刻,我头脑里闪过百种光线,为了生存、梦想、个人发展、金钱、美女、养家糊口、飞黄腾达……在这个万恶的社会,我也是精神上邪恶了一把,好不爽的说。最后我回答:“稀里糊涂的来了。。”是么?是的,前半生过得也是不清不楚,稀里糊涂的,从没想过走程序员的路,就这么风风火火的来了。我接着问他,你呢?家培兄用很和蔼的笑容告诉我说:“怎么能说稀里糊涂呢,我当然是因为喜欢了。“

         哐当,犹如一道闪电扑向我眼睛,喜欢。多么好的字眼,多么清澈的回答。为什么我不敢面对自己的心呢,我来学习,是一种缘分。既来之,那么我要学的是一种独立分析问题解决问题的能力,此为逻辑。

      ~扯远了,进入正题------------

      样式表-------优化网页,控制html的样式。

      有三类:

      1、内联样式表

      写在body中,<p stytle="font-size;16px"></p>

      2、内嵌样式表

      写在head里,作为一独立区域控制作用

      <style type="text/css">

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

      {

      样式;

      }

      </style>

      3、外部样式表

      新建一个CSS文件,在html文件中调用它

      HTML文件中点右键→CSS样式表附加样式表

      <link href="Untitled-2.css" rel="stylesheet" type="text/css" />

      调用方法借用选择器。

          选择器---用于内嵌样式表和外部样式表

       *  /*针对所有标签起作用,去除所有边距和间距*/   

      {  

       margin:0px;

       padding:0px;}

      ------------------------------一般写样式表代码的时候都先写这句代码,去除默认边距和避免浏览器不识别

    1.标签选择器。用标签名做选择器。

      <style type="text/css">

      p/*针对于所有的p标签起作用*/

      {
      background-color:#C3C;
      font-size:24px;}
      </style>

    2.class选择器。都是以“.”开头。

      .main/*以.开头,需要使用class引用*/

      {
      background-color:#FF3;
      font-size:36px;}

      调用class样式,一个页面可调用多次

      <div class="main">我有一个家</div>
      <div class="main">一个不需要</div>
      <div class="main">多大的地方</div>

     3.id选择器。以“#”开头。

      #qq
      {  
      margin-top:300px;
      background-image:url(n0.jpg);
      background-size:cover;
      color:#F00;
      font-size:36px;
      height:300px;
      600px;}

      id的调用,<div id="qq">啦啦啦</id>,一个页面只可调用一次

    4.复合选择器

     (1)用隔开,表示并列。

      p,span /*p和span有相同的样式*/

      {
      background-color:#C03

      }

     (2)用空格隔开,表示后代。

    css:  .main

        {
        background-color:#FF3;
        font-size:36px;}

        .main p

        {
        color:#0F0;}----------在html中找到使用样式main的标签,再在该标签中找到P标签。

    html:    <span class="main">123<p>4567</p>89</span>

      (3)筛选“.”

      p.pp--------在标签P中的class="pp"标签,执行下列样式

      {

      background-color:#0F6;
      font-size:36px;}

      <p class="pp">4567</p>

       

    链接的style

        a:link       超链接被点前状态

        a:visited   超链接点击后状态

        a:hover    悬停在超链接时

        a:active   点击超链接时

        在定义这些状态时,有一个顺序l v h a

    实例(使用外部样式表)

    CSS文件:

    a:link
    {
    text-decoration:none;
    color:#000;}
    a:visited
    {
    text-decoration:none;
    color:#000;}
    a:hover
    {
    text-decoration:underline;
    color:red;}
    a:active
    {
    text-decoration:underline;
    color:#FC0;}

    html文件:

    <head>

    <link href="Untitled-2.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <a href="http://www.baidu.com" target="_blank" style="b">百度一下</a>

    </body>

     

  • 相关阅读:
    EF架构~简洁关联表插入,优越的代码性能!
    基础才是重中之重~你是否真正了解TransactionScope?
    基础才是重中之重~如何整理BLL与DAL层的文件
    java Byte 和byte 差别及byte[ ]和string转换
    转: java的InputStream和OutputStream的理解
    java.awt.list java.util.list 区别
    java.util.Scanner 总结
    java .io OutputStream 与InputStream
    java 3中方法复制一个文件
    网络爬虫 简介
  • 原文地址:https://www.cnblogs.com/jinshui/p/5459713.html
Copyright © 2020-2023  润新知