zoukankan      html  css  js  c++  java
  • CSS总结

    1:概述

    •层叠样式表

    •标记语言 

    •命名规范:一般命名为style.csscss.css

     

    2:语法

    2.1基础

    选择器 +声明(属性:值)

    CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

    例:p {color:red;text-align:center;}

     

    2.2选择器

    2.2.1类型选择符

    类型选择符就是以DOM作为选择符,即选择某个HTML标签为对象。

    格式:

    E

    {

    /*CSS代码*/

    }

    例:

    div{                 

    border:3px double#f00;  /*边框为3px红色双线*/

    680px;
    }

     

    2.2.2class选择符

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用

    CSS 中,类选择器以一个点"."号显示

    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

    <h3 class=”center”>这个标题居中</h3>

    <h2 class=”center”>这个标题也居中</h3>

     

    .center {

    text-align:center;

    }

     

    2.2.3id选择符

    id 选择器可以为标有特定 id HTML 元素指定特定的样式。

    CSS id 选择器以 "#" 来定义

    例:

    <h2 id=”para1”>这个标题居中变红</h2>

     

    #para1

    {

     text-align:center;

     color:red;

    }    

    2.2.4span选择符

    span没有结构的意义,纯粹是应用样式

    <span id=”xx”> xxx</span> <span class=”xx”>xxx</span>

    2.2.5div选择符

    div是一个块级标签,可以包含段落、标题、表格等。

    格式同上。

    2.2.6通配符选择符

    通配符是一种特殊的选择符,用于定义页面所有元素的样式。

    格式:*{CSS代码}

    例:

    {   /*将页面中所有元素的外边距和内边距设置为0*/

    margin:0px;

    Padding:0px;

    }

    2.2.7

    此外还有包含选择符、属性选择符、伪类选择符等之后再说。

    3:插入样式表的方式

    3.1 外部样式表:

    在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

    <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

    文件不能包含任何的 html 标签。

     

    3.2 内部样式表:

     使用<style> 标签在文档头部定义内部样式表

    <head>

    <style>

     hr {color:sienna;}

    p {margin-left:20px;}

    body {background-image:url("images/back40.gif");}

    </style>

     </head>

     

    3.3 内联样式(慎用)

    在相关的标签内使用样式(style)属性:

    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

     

    多重样式优先级:内联>内部>外部

    4:div+css

    待补充

  • 相关阅读:
    OK335xS-Android mkmmc-android-ubifs.sh hacking
    OK335xS-Android pack-ubi-256M.sh hacking
    OK335xS Ubuntu 12.04.1 版本 Android 开发环境搭建
    Qt Quick Hello World hacking
    Qt QML referenceexamples attached Demo hacking
    QT 5.4.1 for Android Ubuntu QtWebView Demo
    I.MX6 working note for high efficiency
    QT 5.4.1 for Android Windows环境搭建
    mkbootimg hacking
    Generate And Play A Tone In Android hacking
  • 原文地址:https://www.cnblogs.com/rulasann/p/9229502.html
Copyright © 2011-2022 走看看