zoukankan      html  css  js  c++  java
  • CSS 初探

     

    Css: 指层叠样式表 (Cascading Style Sheets),它是用来进行网页风格设计的。通俗的说就是进行网页美化的,没有html依然存在,多了css 它会更好。但是没有html,css就没用多大用处了。

     

    一、定义:

    1样式定义如何显示 HTML 元素

    2、是为了解决内容与表现分离的问题

    3、多个样式定义可层叠为一

    4外部样式表可以极大提高工作效率(外部样式表通常存储在 CSS 文件中)

     

    二、分类:

    1、外部样式表(写在css文件中)

    使用情况:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

    在页面中引用如下:

    <head>

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

    </head>

    mystle是定义样式表文件的名称。

     

    2、内部样式表(在head头部)

    单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过<style> 标签定义内部样式表。

    <head>

    <style type="text/css">

    body{background-color: red}

    p{margin-left: 20px}

    </style>

    </head>

     

    3、内联样式(在html中)

    当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

    <pstyle="color: red; margin-left: 20px">

    Thisis a paragraph

    </p>

     

    三、语法:

    两个主要部分构成:选择器,以及一条或多条声明。

    selector{declaration1; declaration2; ... declarationN }

    selector:选择器通常是您需要改变样式的 HTML 元素。

    Declarationx:每条声明由一个属性和一个值组成。

     

    1、选择器

    Html标签选择器

    没有标识,直接引用。

     

    ID 选择器

    以“#”标识引用


     

    类选择器

    以“.”标识引用


     

    2、三个选择器的异同:

    同:都可以通过各自的选择器,来为html内容制定样式。

    异:

    html 标签选择器比较“整块化”:大家都知道html标签是用来调整html 页面布局的,所以,这个分块比较整齐,是页面的框架,不会总是具体到某个控件或者某个文本。而ID 标签和class标签是个人设定的,我们可以在我们操作的任何地方定义,id 或者class ,或者两者。这样可以把页面样式细化。

     

    重复定义:ID 选择器不可以重复定义,一个页面中,ID 号是唯一的,一定有地方占用,其他地方就不可以占用。class选择器则不同,我们可以把多个地方定义成同一个类,这样方便在样式表统一定义格式,而不用同一个样式多出定义。

     

    注意:html 标签也是有ID class属性的。也就是说,如果您给html标签定义了ID class 属性,在css 中也可以通过使用ID选择器或者class 选择器来达到目的。一般我们直接使用html 标签,不使用ID,CLASS ,不是那个更好,只是给html 标签定义样式,有现成的html 标签,就没有必要在定义id 或者class.反之,不是html标签的,只能根据需要定义ID class 来定义样式了。

    也就是:html ,ID ,class 是灵活使用的。

     

     

    3、书写规则:

    大小写:

    选择器是对标签的大小写敏感的。

     

    冒号::属性和值之间

    属性(property)是您希望设置的样式属性(style attribute)。

    每个属性有一个值。属性和值被冒号分开。

    selector{property: value}

     

    引号:“”。属性值为若干个单词。

    p{font-family: "sans serif";}

     

    分号:;多个属性之间。

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

     

     

     

     

     

     

  • 相关阅读:
    iOS --- Touch ID指纹解锁
    Android手势滑动Tab
    Android:自定义Dialog
    Android:视频(VideoView/MediaPlayer)
    Android用户界面开发:Fragment
    Android用户界面开发:TabHost
    Android:Animation
    WallPaper
    linux网络设备驱动
    Android通讯:短信
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3174438.html
Copyright © 2011-2022 走看看