Maison > interface Web > tutoriel HTML > CSS学习笔记_html/css_WEB-ITnose

CSS学习笔记_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:42:17
original
1040 Les gens l'ont consulté

    这是学习CSS样式做的笔记,稍微整理下。也是一个学习的大纲。

CSS层叠样式表学习主要回答两个问题:

    (一)      CSS层叠样式表干什么用的?

    (二)      CSS层叠样式表怎么用的?

回答第一个问题:CSS层叠样式表就是对HTML进行美化的。包括颜色,背景,布局等等。

第二个问题可以分解成两个问题:

    (1)      CSS层叠样式怎么和HTML配合工作?

    (2)      CSS层叠样式表具体语法,控制HTML的标签哪些样式,CSS到底有多大能耐?

关于问题(1),下面是详解:

CSS样式可以采用三种方式来和HTML配合工作:

A.嵌入式样式表

    用

        

               …

        

B.内联样式表

    在HTML的标签里面,添加style通用属性,将CSS内容填到这里就可以了。

    例如:

测试的标题语句

C.外部样式表

    将所有用到的CSS样式放在统一一个文件当中。文件后缀名为CSS,例如xx.css。

    然后在HTML文本里面,只要在

元素里面,link引用。例如:

        

关于问题(2),哈哈,我们又可以分解成几个问题:

    (A)      CSS语法是怎么样的?

    (B)      CSS怎么选择控制指定的标签?

    (C)      CSS控制哪些样式属性?

    (D)      能耐:页面布局。

问题(A)的答案:

    CSS层叠样式的语法如下:

             选择器{

    属性:样式;

    属性:样式;

        ….}

问题(B)的答案:

    在问题(1)里面已经提到了选择器,是的,通过精确的选择选择器,就可以控制指定标签。在HTML里面,除了标签名字以外,还有ID,class。这些都可以成为我们选择器的来源。

    A.HTML标签

    例如:p{属性:样式;}

    B.类选择符

    例如:.one{属性:样式;}

    C.ID选择符

    例如:#one{属性:样式;}

    D.关联选择符

    例如:table a{属性:样式;} 【table a都是标签,其中a位于table中】

    E.  组合选择符

    例如:h1,h2{属性:样式;}

    F.  伪元素选择符

        a:link{属性:样式;}

        a:visited{属性:样式;}

    目前只用于

元素,表示在不同状态下的标签元素套用的样式。

    G.其他

    还有很多,可以去查工具书。

问题(C)的答案:

    主要是这么几类:字体,颜色,背景,文本,边框,鼠标光标,定位,区块属性。其中定位技术真是赞,所谓div+CSS布局说的就有定位技术。

问题(D)的答案:关于div+css页面布局

    网页页面布局这件事情需要HTML和CSS一起配合才可以,HTML主要提供两个标签:

标签。

    

用于大块,用于内联,是小模块。

    学会布局需要掌握区块模型、定位、浮动三个概念。

    这里区块我们就用

定义的矩形块,有元素内容,空白,填充,边框组成,为了定位,还有一个margin的设置参量。

    再学习CSS里面来控制区块float(流动),并且对边框clear(清理)处理,就可以完成对div的布局。具体可以看网上各种详细教程。

 

 


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal