zoukankan      html  css  js  c++  java
  • 初识css

    在css中,html的标签元素大概分为三种不同的类型:块状元素、内联元素(行内元素)、内联块元素。

    每一个元素都有一个display属性,块级元素默认属性值为block,它们独占一行,可设置宽高。内联元素的display默认值为line,

    没有自己的独立空间,是依附于其他块元素而存在的。

    常见的块状元素有:<div>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ol>、<ul>、<dl>、<table>、<adress>、<blockquote>、<form>

    常见的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<textarea>、<var>、<cite>、<code>

    常见的内联块元素有:<img>、<input>

    引用CSS有三种方式:使用外部样式表、使用内部样式表、使用行内样式表。

    • 使用外部样式表:在css独立文件中,放在head标签里,用link引用。
      <head>
          <link rel="stylesheet" href="main.css">
      </head>

      特点:实现了内容结构与表现形式代码分离,方便复用和维护。使代码更加纯净,有利于程序员和搜索引擎的阅读。且为开发页面的常见做法
    • 使用内部样式表:写在head里面的style标签中。
      /*把所有h1标签的字体设为红色*/
      <head>
          <title></title>
          <style type="text/css">
              h1{
                    color:red;      
      } 
           </style>
      </head>

        特点:某些时候可以提高效率,但多个页面难以共享,混杂且不适合阅读。在某些时候对效率要求苛刻或测试的场景下使用。
    • 使用行内样式表:写在元素的style属性里,不写选择器。
      <head>
      </head>
      <body>
          <p style="color:red;">
      </body>

      特点:可以提升效率。但难以共享,不利于重复使用。也不利于阅读。Javascript操作是行内样式,在测试的场景下使用。

       

    CSS术语

    •       css注释:/* 注释内容*/
    •       css规则
      h1{
          color:red;
          text-align:center;
      }

      h1为选择器(应用哪些元素),“{}”里为声明块, color和text-align为声明,冒号后面为属性值。每个声明之间必须用分号“;”隔开。

      选择器分为:元素选择器、类选择器、id选择器

    • 元素选择器 标记名{/*声明块*/}
      所有与该标记匹配的元素,都将应用生命块中的规则。
      如:
      p{
        font-size:18px;      
      }
      所有p标签里的文字字体大小都为18px
    • 类选择器    .类名{/*声明块*/}

           在元素的class属性中设置类名,所有指定相同类名的元素都将应用声明块中的规则。

    <p class="bigfont">
           内容
    </p>
    
    .bigfont{
                font-size;18px;        
    }
    • ID选择器    #id值{/*声明块*/}
      <p id="a">
           内容
      </p>
      #a{
           color:red;
      }
    • 组合/并集选择器
      h1,h2,h3{
             color:red;
      }
    • 伪类选择器
      a:link
      a:visited
      a:hover
      a:active
    • 后代选择器   父级选择器名称+空格+子集元素名称{/*声明块*/}
      div p{
         color:red;
      }
    • 子代选择器   父级选择器名称+">"+子集元素名称{/*声明块*/}
      div>p{
          color:red;
      }
    • 属性选择器
    1. 格式一    元素名称[属性名称+属性值]{/*声明块*/}
      <input type="text">
          input[type="text"]{
          color:red;
      }
    2. 格式二  元素名称[属性名称+"^="+属性值]{/*声明块*/}
      /*选择包含以属性值“si”开始的元素*/
      input [name^="si"]{ color:red; }
    3. 格式三   元素名称[属性名称+"$"+属性值]{/*声明块*/}
      /*选择包含以属性值“chuan”结束的元素*/
      input [name$="chuan"]{ color:red; }
    4. 格式四   元素名称[属性名称+"*="+属性值]{/*声明块*/}
      /*选择包含属性值里有“m”的元素*/
      input [name*="m"]{ color:red; }
  • 相关阅读:
    信件分析实战(五)——数据可视化
    信件分析实战(四)——数据分析以及部分可视化
    剑指offer15题
    剑指offer14题
    剑指offer11题
    剑指offer第9题
    剑指offer第8题--动态规划最简单讲解
    剑指offer第7题
    剑指offer第6题
    剑指offer第5题
  • 原文地址:https://www.cnblogs.com/Jialing825/p/7634226.html
Copyright © 2011-2022 走看看