PPC的C/C++和人工智能学习笔记
每一篇学习笔记,都只是为了更好地掌握和理解

Web前端(4)_CSS(1)

 

今天学习CSS(层叠样式表 Cascading Style Sheets)。

 

CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

 

CSS有几种方式写入:

  • 在标签处直接写,比如 <div style=”width=100%; height:34px; color: red; font-size: 18px;”> </div>。
  • 在<head></head>里面写:<style> .cc{ color: red; font-size: 19px; } </style>,而在需要使用的地方,用class来表示,比如:<div class=”cc”></div>。
  • 单独写在.css文件中,使用的时候,在<head></head>里先导入该css文件。比如 <link rel = “stylesheet” href=”xxx.css” />

 

优先级问题:局部的最高(直接定义在标签里面的)。越下面的越优先。

 

CSS寻找标签与应用样式的方法:

1)Class选择器(类选择器)

通过在head中定义 .xx{ },在标签中用class=”xx”的方式选择CSS。

2)标签选择器:

比如:a{ color: red; } 来控制所有的a标签颜色都是红色的。标签可以是a,div,span,select 等等。但是input比较特殊,因为input区分type,可以这样写 input[type=”text”]{ color: red; }。

3)ID选择器:

比如:#uu{ color:red; } <div id=”uu”></div> 这样的方式,通过ID来选择CSS。

 

除了上面三个最基本的CSS选择器,还有层级选择器、组合选择器等。

 

层级选择器:

有如下要求:<div class=”c3″><a><div><span>ABC</span></div></a></div>,需要改变<span> ABC <span> 的样式,当然,我们可以用ID,用class都可以实现,使用如下层级选择器来定义CSS也是可以的:

.c3 a div span{ color:red; } 要注意的是,层级必须是对应的。不符合该层级关系的不会起作用。当然,层级不一定要写全路径。

 

组合选择器:

A,p{ } 表示 A标签、P标签都使用这个样式。

.c3 #i8 div .c4, .c3 #i8 div .c9{ } 则表示有2个层级选择器可以同时使用该样式。也就是说逗号表示组合,空格表示层级,可以灵活使用。

 

(2017-05-06 www.vsppc.com)

学习笔记未经允许不得转载:PPC的C/C++和人工智能学习笔记 » Web前端(4)_CSS(1)

分享到:更多 ()

评论 抢沙发

评论前必须登录!