zoukankan      html  css  js  c++  java
  • w3c_html_study_note_5.26

    xhtml+css 正确的说法

    “DIV+CSS”叫法将网页制作者引入两大误区

    【误区一】网页中用了Table,页面就不标准,甚至觉着用Table丢人,Table成为了判定页面是否标准的关键点。

    【误区一】认为网页中的DIV标签用的越多越好,甚至有人将页面中所有的标签都替换为DIV,DIV的多少,决定页面标准的程度。

      既然是标准页面,标签各干各的活“各司其职”,Table就用来存储数据,DIV就用来构架页面结构 div不是越多越好

       W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。

       当我们将一个成品的网页设计制作成一个静态页面的时候,就要符合前面两种标准,结构标准和表现标准,那么制作出来的页面就是标准页面,用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”! (静态)

    xhtml是一种结构 css就是一种表现  就像人穿衣服 如何去穿  就用到了样式 样式就是 css控制页面的手段也就是 人穿衣服的方式

     --------------------------------------------------------------------------华丽丽的分割线--------------------------------------------------------------------------------------------

     第一:如何让CSS去控制HTML页面?

    有4种样式(方式),行内样式、内嵌样式、链接样式、导入样式

    行内:

    <p style="color:#F00; background:#CCC; font-size:12px;"></p>

    直接但是后期不好维护

    内嵌

          内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:

     
    <head>
    <style type="text/css"> body,div,a,img,p
    {margin:0; padding:0;} a{color:#FFF;} img{float:left;} #container{width:500px; height:350px; background:url(http://www.w3cfuns.com/static/image/cm/demo/2d121/w3cBg.jpg) no-repeat; position:relative; margin:0 auto;} #container p{width:380px; height:40px; position:absolute; left:60px; bottom:60px; color:#fff; font-size:12px; line-height:18px; text-align:center; font-family:"微软雅黑", Verdana, Geneva, sans-serif;} #reg{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;} </style>
    </head>

    提供一个公共css代码 但是后期维护还是不太好

    链接样式:

     链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:

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

    四种样式的优先级按照“就近原则”:行内样式 > 内嵌样式 > 链接样式 > 导入样式。  同id属性 优先级高的能覆盖低的

    记住“<!---->”注释只要出现在CSS和JS里面,那么就是针对浏览器的条件注释。 

     --------------------------------------------------------------------------华丽丽的分割线--------------------------------------------------------------------------------------------

    对页面控制用样式  如果对特定元素 小范围的页面控制就用到了css选择器

    单对一,单对多控制 控制的是页面元素

    CSS选择器最基本的有四种:标签选择器、ID选择器、类选择器、通用选择器

    标签选择器

    个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,比如,在style.css文件中对p标签样式的声明如下:

    p{
    font-size:12px;
    background:#900;
    color:090;
    }

       这么做,会使页面中所有p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色),这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改background属性就可以了,就这么容易!当然你也可以设置整个页面中所有的div的属性、a链接的属性、span的属性,这么做方便是方便,但是不够灵活,如果页面中除了某个p标签背景不是红色外,其他的都是红色,就不能用这种方法定义了。

    ID选择器:

    单独定义 针对性

     ID选择器在某一个HTML页面中只能使用一次,就像只有一个身份证 (ID)一样,不重复!在页面中使用ID选择器更具有针对性

    <p id="one">W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区!</p>
    在CSS中定义ID为one的p标签的属性,就需要用到“#”,代码如下:

    #one{
    font-size:12px;
    background:#900;
    color:090;
    }
    

        这样页面中的某个p就会是CSS中定义的样式。针对“页面中除了某个p标签背景不是红色外,其他的都是红色的”情况,我们就可以用ID选择器单独定义那个背景不为红色的p标签,这样问题就解决了

    类选择器:

  • 相关阅读:
    龙小树|第一篇博客随笔
    机器学习相关网址
    希腊字母表
    博客园美化
    论文检索常用网站
    这些年,我用过的良心网站,分享给大家
    MATLAB小函数:展示灰度图像数据集的部分样例
    基于图嵌入的高斯混合变分自编码器的深度聚类(Deep Clustering by Gaussian Mixture Variational Autoencoders with Graph Embedding, DGG)
    MATLAB实例:二维散点图
    MATLAB实例:多元函数拟合(线性与非线性)
  • 原文地址:https://www.cnblogs.com/aix1314/p/3754094.html
Copyright © 2011-2022 走看看