zoukankan      html  css  js  c++  java
  • 3月22 关于CSS

    CSS(Cascading Style Sheep 叠层样式表,作用是美化HTML网页)/*注释内容*/ 为注释的方法。

    样式表的分类:

    1.内联样式表

     和HTML联合显示,控制精确,但是可重用性差,冗余较多。

      例:<p style="font-size:14px;">内联样式表</p>

    2.内嵌样式表

     

     作为一个独立区域内嵌在网页里,必须写在head标签里面。

     

      <style type="text/css">

     

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

     

      {

     

      样式;

     

      }

     

      </style>

    3.外部样式表

     

     新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表附加样式表。一般用link连接方式。

     

      有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:

    <style type="text/css">
    
    {
        margin:0px;
        padding:0px;
        }

     

     

    选择器

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

     

    p
    {
        background-color:#0F6;
        color:#F6F;
        text-decoration:underline;}

     

    以上是采用外部样式表的格式写出了的。
    2.class 选择器。都是以“.”开头的

    .p
    {
        text-decoration:underline;
        font-family:"Lucida Console", Monaco, monospace, "楷体";
        color:#F00;
        font-size:30px;}
    
    
    <body>
    
    <div class="p">格林童话</div>
    </body>
    </html>

    3.ID选择器 以#开头

     

    #pp
    {
        font-style:normal;
        text-decoration:underline;
        color:#03C;
        background-size:cover;
        }
    
    <body>
    
    <div id="pp">安徒生童话</div>
    </body>
    </html>

    4.复合选择器

    1)用“,”隔开,表示并列

    <style type="text/css">
    p,span
    {
    	text-decoration:overline;
    	color:#0ff;
    	100px;
    	height:60px;
    	}
    </style>
    

     2)用空格隔开 表示后代

    .main p
    {
        background-color:#00F;
        font-size:50px;
        color:#3F9;}    
    </style>

    3)筛选“.”

    p.sp
    {
    	font-style:normal;
    	text-decoration:underline;
    	color:#03C;
    	background-size:cover}
    

    链接的style

      a:link 超链接被点前状态

      a:visited 超链接点击后状态

      a:hover 悬停在超链接时

      a:active 点击超链接时

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

     

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

     

     

  • 相关阅读:
    uva 10491 Cows and Cars
    uva 10910 Marks Distribution
    uva 11029 Leading and Trailing
    手算整数的平方根
    uva 10375 Choose and divide
    uva 10056 What is the Probability?
    uva 11027 Palindromic Permutation
    uva 10023 Square root
    Ural(Timus) 1081. Binary Lexicographic Sequence
    扩展欧几里得(求解线性方程)
  • 原文地址:https://www.cnblogs.com/Duriyya/p/5307181.html
Copyright © 2011-2022 走看看