web03

CSS概念

层叠样式表，用来美化HTML页面的，并且CSS代码可以和html代码完全分离

在HTML页面引入CSS的三种方式

通过标签上提供的style属性引入

通过在head中提供style标签，在标签内部写入CSS代码

通过在head标签内部添加link标签引入外部的CSS（真正的实现了CSS和HTML的代码分离）

Div，span，p标签都可以看做是一个容器，里面看成是装的数组，这样可以通过CSS样式对这一组数组进行设置

Div:独占一行，标签可以把里面的文档分成不同的。独立的部分

Span：并非独占一行，多个span会并列排列，直到这一行行满之后才换行，标签用来组合文档中的行内元素

P：独占一行，但是元素会在其前后创建一些空白，属于段落标签

元素的类型

块级元素：默认情况下独占一行，div,p,h6-h1,br,hr

行内元素：默认情况下多个行内元素可以处在同一行，input,font,span

选择器

帮助我们选中想要修饰的标签进行修饰

标签名选择器：通过标签的名称选中指定名称的标签进行修饰

格式：元素名{}，

类选择器

通过标签上的class属性，可以为标签设置所属的类，所有类属性值相同的则为一类，可以通过标签名选择器选择这一类进行修饰

格式：.类名{css属性}，

 

 

ID选择器

   通过标签上的ID属性，可以为标签设置所属的ID编号，ID编号的特点就是他在HTML中的独一无二的，可以通过ID值选中想要修饰的标签

格式：#ID值（CSS属性），

后代选择器

在父选择器选中 的元素内部，在选中指定的后代元素进行修饰

格式：父选择器 后代选择器{}

子元素选择器

在父选择器选中的元素内部，在选中指定的子元素进行修饰

格式：父选择器>子元素选择器{}

分组选择器：

可以将多个选择器选中的元素统一来设置样式

格式：选择器1，选择器2，…选择器n{}

属性选择器：

可以通过属性条件选中元素进行修饰

格式：选择器[属性条件..]{}

兄弟选择器

如果两个元素具有相同的父元素，并且紧挨着，那么可以通过相邻兄弟选择器选择A元素后的B元素

格式：大哥+小弟{}

伪元素选择器

伪元素选中的不仅仅是元素本身，还有元素的状态

状态分为：

：link  表示元素未被点击时

：hover  表示鼠标悬停时的状态（需要掌握）

：active    元素被点击时的状态

：visited  元素被点击之后的状态

 

 border:设置所有边框的属性

padding：这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

margin：

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。