zoukankan      html  css  js  c++  java
  • CSS样式表

    CSS作用是美化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;

    }

    </style>

    选择器

    1、标签选择器。用标签名做选择器。

    <style type="text/css">

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

    {

      样式;

    }

    </style>

    2、class选择器。都是“.”开头

    <head>

    <style type="text/css">

    .main  /*定义样式*/

    {

      height:42px;

      100%;

      text-align:center;

    }

    </style>

    </head>

    <body>

    <div class="main">    <!——调用class样式——>

    </div>

    </body>

    3、ID选择器。以“#”开头

    <div id="样式名">

    <head>

    <style type="text/css">

    #main  /*定义样式*/

    {

      height:42px;

      100%

      text-align:center;

    }

    </style>

    </head>

    <body>

    <div id="main">  <!--调用id样式-->

    </div>

    </body>

    4、复合选择器

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

    <style type="text/css">

    p,span    /*标签p、span两者同样的样式*/

    {

      样式;

    }

    </style>

    2)、用空格隔开,表示后代。

    <style type="text/css">

    .main p  /*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/

    {

      样式;

    }

    </style>

    3)、筛选“.”。

    <style tyle="text/css">

    p.sp  /*在标签p中的class=“sp”的标签,执行以下样式*/

    {

      样式;

    }

    </style>

  • 相关阅读:
    [Effective C++ --009]确定对象被使用前已先被初始化
    [Effective C++ --008]别让异常逃离析构函数
    [Effective C++ --007]为多态基类声明virtual析构函数
    [Effective C++ --006]若不能使用编译器自动生成的函数,就该明确拒绝
    [Effective C++ --005]了解C++默默编写并调用哪些函数
    [000]socket通信--server和client实现的简单例子
    [014]模板-模板实参推导
    [013]模板-非类型模板参数
    [012]泛型--lambda表达式捕获
    U3d keyCode值对应的按键
  • 原文地址:https://www.cnblogs.com/cycanfly/p/5307382.html
Copyright © 2011-2022 走看看