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的核心内容。



  • 相关阅读:
    codeforces C. Cows and Sequence 解题报告
    codeforces A. Point on Spiral 解题报告
    codeforces C. New Year Ratings Change 解题报告
    codeforces A. Fox and Box Accumulation 解题报告
    codeforces B. Multitasking 解题报告
    git命令使用
    shell简单使用
    知识束缚
    php 调用系统命令
    数据传输方式(前端与后台 ,后台与后台)
  • 原文地址:https://www.cnblogs.com/saixing/p/6730326.html
Copyright © 2011-2022 走看看