CSS 基础知识
一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
CSS声明总是以分号 ;
结束,声明组以大括号 {}
括起来。
样式分类
插入样式表的方法有三种:
- 外部样式表 (External style sheet)
|
|
浏览器会从文件 mystyle.css 中读到样式声明
- 内部样式表 (Internal style sheet)
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表
|
|
- 内联样式 (Inline style)
内联样式不建议使用
|
|
一些常见属性
|
|
字符颜色 color:red;
字号大小 font-size:40px;
背景颜色 background-color:blue;
加粗 font-weight:bold;
不加粗 font-weight:normal;
斜体 font-style:italic;
不斜体 font-style:normal;
下划线 text-decoration:underline;
没有下划线 text-decoration:normal;
基础选择器
标签选择器
div{ }
id选择器
#id{ }
类选择器
.classname{ }
同一个标签可能同时属于多个类,用空格隔开。
|
|
还有一个常有思路写出所有公共类供全局使用。
- 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
- 每一个类要尽可能小,有
公共
的概念,能够让更多的标签使用。 - 要尽可能的使用 class,外部框体和特殊地方才用 id 选择器。
后迭代选择器
向后迭代,不只是儿子,孙子,子子孙孙都可以。
|
|
测试文本1
测试文本2
上面只会对文本2有效果。
交集选择器
一般是以标签选择器开头,class 选择器结尾。
|
|
并集选择器
用逗号分隔
|
|
通配符
通配符 *
:效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
|
|
CSS的继承性和层叠性
继承性
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
哪些属性能继承?
color、 text-开头的、line-开头的、font-开头的
所以,如果我们的页面的文字,都是灰色,都是 14px。那么就可以利用继承性:
|
|
层叠性
层叠性原则:
- 先看有没有选中,如果选中了,那么以(id 数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
- 如果没有选中,那么权重是 0。如果大家都是 0,就近原则
如果同一个标签,携带了多个类名,有冲突怎么显示?
|
|
我是什么颜色?
我是什么颜色?
可以看到都是红色,所以和在标签中的挂类名的书序无关,只和 css 的顺序有关
!important标记
当在一个样式声明中使用一个 !important
规则时,此声明将覆盖任何其他声明。
|
|
使用 !important
是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
盒模型
一个盒子中主要的属性就5个:width、height、padding、border、margin。
|
|
这个盒子 width:200px; height:200px; 但是真实占有的宽高是 302*302。 这是因为还要加上 padding、border。
宽度和真实占有宽度,不是一个概念!!
真实占有宽度= 左border + 左padding + width + 右padding + 右border
padding 分方向设置
|
|
用小属性层叠大属性
|
|
下面的写法错误
|
|
border的其他属性解释:
- border-width:10px; → 边框宽度
- border-style:solid; → 线型
- border-color:red; → 颜色。
|
|
标准文档流现象
我们的 web 页面和 photoshop 等设计软件有本质的区别:web 页面的制作,是个 流
,必须从上而下,像 织毛衣
。
标准文档流的几个特点和现象:
- 空白折叠现象
HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
- 高矮不齐,底边对齐
- 自动换行,一行写不满,换行写。
块级元素和行内元素
在 HTML 中,我们已经将标签分过类,当时分为了:文本级、容器级。
文本级: p、span、a、b、i、u、em 容器级: div、h系列、li、dt、d
所有的文本级标签,都是行内元素,除了 p,p 是个文本级,但是是个块级元素。 所有的容器级标签都是块级元素。
块级元素和行内元素的相互转换: display:inline;
, display:block;
块级元素
- 霸占一行,不能与其他任何元素并列
- 能接受宽、高
- 如果不设置宽度,那么宽度将默认变为父亲的100%。
行内元素
- 与其他行内元素并排
- 不能设置宽、高。默认的宽度,就是文字的宽度。
脱离标准流
标准流里面限制非常多,标签的性质恶心。比如,我们现在就要并排、并且就要设置宽高。所以,移民!脱离标准流!
css 中一共有三种手段,使一个元素脱离标准文档流:浮动、绝对定位、固定定位。
浮动
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
实现浮动
浮动分为左浮动和右浮动
|
|
浮动的特点
- 浮动的元素脱离标准流。(能够并排了,并且能够设置宽高了。无论它原来是个div还是个span)。
- 浮动的元素互相靠帖。
- 浮动的元素有“字围”效果。
浮动的清除
有时候我们需要清除行内元素浮动的特性以适应某种要求。
例如上面的文本如果我们清除其浮动效果则图片会规则排列成两行:
|
|
清除浮动的方法
例如:现在有两个 div,div 身上没有任何属性。每个 div 中都有 li,这些 li 都是浮动的。
|
|
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
可以看到 div 的高度是 0px, 因为 div 内的元素是浮动的,所以 div 不能被撑出高度。
|
|
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
2. clear:both;
这种方法有一个非常大的、致命的问题,margin 失效了。
3. 隔墙法 这种方法可以在两个div中间添加一个块元素,和上面图片的例子很相似。
|
|
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
4. 内墙法
|
|
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧
5. overflow : hidden;
overflow 就是 “溢出” 的意思, hidden 就是 “隐藏” 的意思。表示 “溢出隐藏”。所有溢出边框的内容,都要隐藏掉。
本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。
一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。
例如上面给两个 div 加上 overflow:hidde;
|
|
- HTML
- CSS
- JS
- HTML5
- 设计模式
- 学习方法
- 英语水平
- 面试技巧