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>

  • 相关阅读:
    npm 发包流程
    iframe嵌入第三方视频链接自动播放
    微信小程序 接入腾讯地图的两种写法
    微信小程序 生命周期
    css 传送阵
    微信小程序 音频播放器
    微信小程序 mpvue 使用vant-weapp
    微信小程序 使用mpvue
    ajax
    布局问题
  • 原文地址:https://www.cnblogs.com/cycanfly/p/5307382.html
Copyright © 2011-2022 走看看