zoukankan      html  css  js  c++  java
  • CSS——(1)基础

    CSS(Cascading Style Sheets层叠样式表

    含义

    一种计算机语言;

    可以实现网页与内容分离;

    用来表现文件样式,如HTML或XML;


    比较

        div与css

     

         如果说div是容器的话,那么css就是装饰或是表现容器样式的事物。比如div是盒子,那么css的作用就是表示盒子的颜色,大小,体积等。

       

        htmlcss

     

         html是负责网页内容的;css是负责网页样式的,而且css很好的解耦网页的内容和样式。


    选择器

          设置选择器之后,我们就可以设置CSS样式了。

          那不设选择器行不行呢?可以在word中类比一下,我们就可以把文章中每段或每行的文字都设成一个独有的样式,这个样式可以包括font-size(字体大小),width,height等等。

          CSS中的选择器可以分为id选择器,class选择器和Html选择器。

    1)、id选择器

    可以为标有特定id的HTML元素制定特定的样式,以“#”来定义。

    #newnews {
        /*最新新闻框架*/
        font-size :20px;
        margin-left :5px;
        margin-bottom :10px;
    }

    2)、class选择器

    用来描述一组元素的样式,可在多元素中使用,以一个点"."号显示。

    .replay {
        margin-bottom :30px;/*底部的外边距*/
    }


    3)、html标签选择器

    没有标识,直接引用


    使用方法

    看了前面的这两个例子,有人肯定会有这样的疑惑:我们为newnews,replay设置了样式,那在网页上他们是怎么使用的呢?

    接下来,我们就讲一下定义网页的方法

    1)、外部:将网页链接到外部样式表。

    2)、内页:在网页上创建嵌入的样式表。

    3)、行内:一个用内嵌样式到各个网页元素。


    第一种:-->写在css文件中

    在其他网页上使用相同的样式时,或为了保持网页的外观一致整体性,可以采用外部样式。外部样式更改也十分方便。

    <link href="../css/login.css" rel="stylesheet"  type="text/css" />
        <!--外部样式表即login.css-->


    第二种:-->写在head头部


    当我们只要定义当前网页的样式事,可采用嵌入的样式表。它“嵌”在网页的 <HEAD> 标记符内。

    <head>  
    <title>页面标题</title>  
    <styletype="text/css">  
    <!--  
    p{  
    color:#FF00FF;  
    text-decoration:underline;  
    font-weight:bold;  
    font-size:25px;  
    }  
    -->  
    </style>  
       </head>



         第三种:-->在html中

    当特殊的样式需要应用到个别元素时。使用内联样式的方法是在相关的标签中使用样式属性。

    <p style="color: black; margin-left: 20px">
    这里是文字!
    </p>





          CSS看似是一个新东西,但只要动手去实践,就会发现,它的很多知识都是之前接触到的。比如设置字体、行间距等等,要多多尝试。
          介绍了CSS的概念和几种使用方法后,下篇博客CSS——(2)盒子模型与标准流主要讲的是CSS的核心内容。



  • 相关阅读:
    性能测试概念
    接口测试概念
    SQL多表查询
    手机App测试概念
    App测试页面滑动
    自动化测试概念
    Monkey 命令
    Tomcat+JDK安装和配置
    Linux系统FTP安装、安装和使用
    Web测试方法(一)
  • 原文地址:https://www.cnblogs.com/saixing/p/6730326.html
Copyright © 2011-2022 走看看