CSS知识点

一.三大样式

内联样式：可以将CSS样式编写到元素的style属性当中，将样式直接编写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容其中作用，不方便使用。

内部样式：也可以将CSS样式编写到head中的style便签里，将样式表编写在style标签中，然后通过CSS选择器选中指定元素，然后可以同时为这一些元素一起设置样式，这样可以使样式进一步复用，将样式表编写到style标签中，也可以使表现和结构进一步分离，他也是我们推荐的使用方式。

外部样式：还可以将文档编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中，这样外部文件中的css样式将会应用带当前页面中。

将CSS样式统一编写带外部的样式表中，完全使结构和表现分离，可以是样式表可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度提高用户的体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件。

二.块元素和内联元素

div就是一个块元素，
所谓块元素，就是会独占一行的元素，无论他的内容有多少，他们都会占一整行
p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的的块元素,并不会为它里边的元素设置任何的默认样式，div元素主要用来对页面进行布局的。

span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行，
常见的内联函数：
a img iframe span
span没有任何语义，span标签专门用来选中文字，然后为文字设置样式

块元素主要用来做页面中的布局内联元素主要用来选中文本设置样式，
一般情况下只使用块元素包含内联元素，而不会用内联元素包含块元素
a元素可以包含任意函数（除了它本身）；p元素不可以包含其他的块元素

三.选择器和声明块的说明

css的语法：
选择器 声明块
选择器：
- 通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上

声明块：
- 声明块紧跟在选择器的后边，使用一堆{}括起来，
声明块实际上就是一组一组的名值对结构，这一组一组的名值对我们称为声明，
在一个声明块中可以写多个声明，多个声明之间，用；隔开，声明的样式名和样式值之间使用：连接

四.伪元素

使用伪元素来表示元素中一些特殊的位置
为p中第一个字符来设置一个特殊的样式
p:first-letter{}
为p中第一段来设置一个特殊的样式
p:first-line{}
before表示元素最前邊的部分
一般before前需要結合content這個樣式一起使用
通過content可以向before或after的位置添加一些內容

after表示元素最後邊的部分
p:before{
content:"我會出現在整個段落的最前邊";
color: #999999;
}

四.长度单位

像素px
像素是我们在网页中使用最多的一个单位
百分比
也可以将单位设置成为一个百分比形式，使用百分比好处，当父元素的属性值发生改变时，子元素也会按照一定比例发生改变，创建自适应页面时，常用百分比做单位
em
em和百分比类似，他是相对于当前元素的字体大小计算的，1em = 1font-size，使用em时，当字体大小发生改变时，em随着改变，设置字体相关样式时，使用em

五.颜色单位

1 颜色的单词
2 rgb的值
rgb(红色浓度，绿色浓度，蓝色浓度)   rgb(100%,50%,50%)
3 十六进制的rgb表示
语法：#红色绿色蓝色
十六进制：
1 2 3 4 5 6 7 8 9 a b c d e f

六.字体的样式

font-style 设置文字斜体
normal 默认正常显示
italic 斜体显示
oblique 倾斜显示
大部分浏览器都不会对两者区分，一般使用italic

font-weight 设置粗体 
normal 默认值
bold 加粗

font-variant 可以用来设置小型大写字母
可选值：
normal 默认正常
small-caps 小型大写字母
所有字母以大写字母显示，本来小写的变成大写字母，但是大小比较小

color 

字体颜色

文字的大小，浏览器中一般默认文字大小都是16px font-size

设置文字字体 如果字体不支持，则采用默认，可以同时指定多个字体，用,隔开，字体在计算机中font-family

在CSS中为我们提供了font样式
使用该样式可以同时设置所有属性。不同的值用空格隔开，没有顺序要求
前四个可有可无，但是大小和字体必须写
且 字体最后 大小倒数第二

七.文本标签

em和strong
这两个标签都表示一个强调的内容
em主要表示语气上的强调，斜体，strong表示强调的内容，比em更强烈，粗体

i 斜体
b 粗体
h5规范中规定，对于不需要的内容而是单纯的加粗或斜体，就可以使用b和i标签

small标签中的内容会比他的父元素中的文字要小一点，在h5中使用small标签来表示一些细则一类的内容
比如：合同中的小字，网站的版权声明都可以放到small

网页中所有加书名号的内容都可以使用cite标签，表示参考内容

q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引号（块级引用）

sup 上标 sub 下标

使用del 中间线

ins表示插入内容 自动添加下划线

需要在页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码

八.文本样式

text-transform 设置文本大小写
none 不做处理
capitalize 每一个首字母大写，通过空格识别单词
uppercase 所有字母大写
lowercase 所有字母小写

text-decoration 设置文本修饰
none 不做处理
underline 下划线
overline 上划线
line-through 中间线

超链接默认有下划线，要去掉 则设置样式为text-decoration: none;

letter-spacing 字符间距 默认为0

word-spacing 单词之间的差距 实际上是设置空格与空格之间的差距

文本对齐方式
text-align
left 默认左对齐
right 右对齐
center 中间对齐
justify 两端对齐 调整文本之间的空格大小

首行缩进
text-indent 一般以em为单位
如果指定一个负值 则往左移动

 

九.行间距

在CSS在沒有直接行间距的方式
我们只能通过设置行高来设置行间距
line-height设置行高 接收的值 ： 大小 百分比 数字（倍数）

行间距 = 行高 - 字体大小

在font中也可以指定行高 在大小后指定行高，可选，不选则为默认值，若在前面写line-height则会被掩盖

 

十.层级和透明

如果元素的层级是一样的，则下边的元素会盖住上边的
通过z-index属性可以设置元素层级
设置正整数来作为当前元素的层级
对于没有开启定位的元素不能设置z-index

父元素的层级再高，也不会盖住子元素

设置元素透明背景
opacity 需要一个0-1之间的值
0 完全透明 1 完全不透明

在IE8及以下浏览器，不支持opacity，需要使用filter设置

0-100 之间的值

十一.背景图片

如果背景图片大于元素，默认显示左上角
一样大 显示整张
小于元素 默认铺满

可以同时为一个元素指定背景颜色和背景图片
这样背景颜色将会作为背景图片的底色
一般情况下同时指定

background-repeat用于设置背景图片的重复方式
repeat 默认值 背景图片会双方向重复
no-repeat 不会重复
repeat-x X轴重复
repeat-y Y轴重复

background-attachment设置背景图片是否随滚动条移动
scroll 默认值 滚动
fixed 不滚动
不随窗口滚动的图片，一般设置给body元素

十二.表格

table 创建表格
tr 表示行
td 创建单元格
rowspan 合并列单元格
colspan 合并行单元格
table与td边框之间默认有一个距离，通过border-spancing属性设置
border-collapse可以用来设置表格的边框合并，如果设置边框和并，则border-spacing自动失效
th表示表头，默认加粗居中

有一些情况下，表格是非常长的
此时表格分为三个部分：thead，tbody，tfoot

如果表格中没有写tbody，浏览器会自动添加，且会把所有的tr放到tbody中
注意，tr并不是table的子元素，而是tbody的子元素

表格布局

十三.表单

表单：将用户信息提交给服务器

使用form便签创建
action 该属性指向一个服务器的地址
但我们提交表单时，会将内容提交到action对应的地址

input
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字
label 标签 专门用来选中表单中提示文字的
for 属性 需要指定一个表单项的ID值

fieldset表单分组
在其中可以使用legend子标签，指定组名

单选
name分组
指定一个value 这样被选中的表单项才会最终传给服务器

多选框 input chexckbox
checked="checked" 默认选中

下拉列表  select标签下option列表项
selected="selected" 默认选中
multiple="multiple" 多选下拉列表
optgroup 分组 label 分组名称

多行文本框 textarea

reset 重置按钮

十四.列表

1.无序列表

使用ul标签来创建无序列表
使用li在ul中创建一个个列表项
一个li是一个列表项
通过type属性可以修改无序列表的项目符号
可选值：
disc 默认值 实心的圆点
square 实心的方块
circle 空心的圆点
注意：项目符号我们一般都不使用

2.有序列表

ol
有序列表使用有序符号作为项目符号
type属性，可以指定符号的类型
可选值：1 默认使用数字
a/A
i/I

3.定义列表

定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中两个子标签
dt：被定义的内容
dd：对定义内容的描述

去掉列表项

list-style: none;