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;}

     

     

  • 相关阅读:
    HotSpot算法实现
    垃圾收集器(一)
    Java内存区域
    第53条:接口优先于反射机制
    C# 文本转语音,在语音播放过程中停止语音
    C# an error has occurred while updating the entries.see the log file
    音频播放时出现 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
    C# CSV文件读写
    图解 SQL-Server新建作业
    FineUI 布局宽度自适应,后台回调js方法
  • 原文地址:https://www.cnblogs.com/Duriyya/p/5307181.html
Copyright © 2011-2022 走看看