Heim > Web-Frontend > HTML-Tutorial > CSS学习笔记_html/css_WEB-ITnose

CSS学习笔记_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:42:17
Original
1037 Leute haben es durchsucht

    这是学习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的布局。具体可以看网上各种详细教程。

 

 


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage