CSS

2016-03-24 本文已影响90人闲得一B

什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值

CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">

页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>

外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">

CSS的两大重点
属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式

CSS选择器 – 标签选择器
选择器的作用
选择对应的标签，为之添加样式

标签选择器
根据标签名找到标签

标签选择器.png

CSS选择器 – 类选择器
类选择器的格式
.类名

类选择器.png

CSS选择器 – id选择器
id选择器的格式

id

id选择器.png

CSS选择器 – 并列选择器

并列选择器.png

CSS选择器 – 复合选择器

复合选择器.png

CSS选择器 – 后代选择器

后代选择器.png

CSS选择器 – 直接后代选择器

直接后代选择器.png

CSS选择器 – 相邻兄弟选择器

相邻兄弟选择器.png

CSS选择器 – 属性选择器

属性选择器.png

属性选择器+.png

属性选择器++.png

CSS选择器 – 伪类

伪类.png

CSS选择器 – 伪元素

伪元素.png

CSS选择器 – 选择器优先级

选择器优先级.png

优先级排序
important> 内联 >id > 类 > 标签 | 伪类 | 属性选择 > 伪元素> 通配符 > 继承

HTML标签类型

HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）

行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）

修改标签的显示类型

CSS中有个display属性，能修改标签的显示类型
none：隐藏标签

block：让标签变为块级标签

inline：让标签变为行内标签

inline-block：让标签变为行内-块级标签（内联-块级标签）

CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性

不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性

CSS属性 – 可继承属性（红色表示常用）
所有标签可继承
visibility、cursor

内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

块级标签可继承
text-indent、text-align

列表标签可继承
list-style、list-style-type、list-style-position、list-style-image

CSS属性 – 不可继承属性（红色表示常用）

pdisplay、margin、border、padding、background
pheight、min-height、max-height、width、min-width、max-width
poverflow、position、left、right、top、bottom、z-index
pfloat、clear
ptable-layout、vertical-align
ppage-break-after、page-bread-before
punicode-bidi

盒子模型

网页上的每一个标签都是一个盒子

每个盒子都有四个属性
内容（content）
盒子里装的东西
网页中通常是指文字和图片

填充（padding，内边距）
怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料

边框（border）：盒子本身

边界（margin，外边距）
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出