码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础复习

时间:2015-12-01 07:07:50      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

重新撸一遍CSS的基础,因为以前面试的时候被问到,突然发现某些概念搞不清楚,瞬间懵逼了,其实我都知道的,就是因为不会炒概念,导致面试官觉得我很low,你特么连这个都不知道还敢来面试,回家种田去好嘛!

 

样式分类

1.行内样式/行间样式

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

虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。

2.内嵌样式

<head>
    .test{background:#eee;}
</head>

3.链接样式

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

4.导入样式

@import style.css

行内样式 > 内嵌样式 > 链接样式 > 导入样式

行内样式 > 内嵌样式 > 链接样式 > 导入样式

行内样式 > 内嵌样式 > 链接样式 > 导入样式

重要的事情说三遍...

 

选择器

标签选择器/元素选择器

a{text-decoration:none;}

ID选择器

#test{background:#eee;}

类选择器

.test1{background:#eee;}
.test2{background:#fff;}
.test3{background:#000;}
<div class="test1 test2 test3"></div>

通用选择器

 

*{margin:0px; padding:0px;}

 

不过这么用不太好,因为*会把HTML所有的标签都遍历一遍,太浪费了,最好是用到哪些再写哪些

body,div,p,a,ul,li{margin:0; padding:0;}

选择器的集体声明

h1,h2,h3,h4,h5,h6{color:#900;}

选择器的嵌套

 

.test1 #test2 span{background:#eee;}

 

块状元素block
一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素inline
内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为“a”。

 

CSS基础复习

标签:

原文地址:http://www.cnblogs.com/zcynine/p/5008974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!