CSS

外部样式键入方法

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

命名方式

main.css为主要样式 reset.css一般用于取消标签自带样式 如边距 字号 颜色 下划线 列表前面的点

选择器

#id id选择器

标签名 标签选择器

.+类名 类选择器

层级选择器 各层之间用空格

组选择器 用逗号隔开

伪类选择器 :hover 鼠标悬浮样式

　　　　     :before content:'文本'

文本

color：

font-size:

font-family:

font-style:倾斜 italic or normal

font-weight:加粗 bold or normal

line-height 行高 用于设置水平居中

text-aline 水平居中

text-indent 首行缩进

text-decoration 下划线

div盒子布局

margin外边距  margin: x auto水平居中

padding内边距

border边框

margin-top塌陷问题

在外部盒子添加属性overflow：hidden

overflow属性：

　　1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
　　2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
　　3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
　　4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
　　5、inherit 规定应该从父元素继承 overflow 属性的值。

块元素 内联元素 内联块元素

块元素：div、p、ul、li、h1~h6、dl、dt、dd

　　特点：

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行、即使设置了宽度

内联元素：a、span、em、b、strong、i标签类元素

　　特点：

• 支持部分样式（不支持宽、高、margin上下、padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

解决内联元素中元素间隙的方法： 将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内连块元素

　　特点：       

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 盒子并在一行
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式

将元素转化为行内块元素的方法

display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

元素浮动

float：left or right

行为会将元素自动转化为行内快元素

清除浮动

.clearfix:after,.clearfix:before{ content: "";display: table;}

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

使用方法在元素后添加clearfix

或者在父级添加overflow：hidden属性

绝对定位

父级：position：relative

子级：position：absolute

子级相当于父级进行定位，不继承父级宽高属性

自己单独设置width height

用top bottom left right进行定位

background属性

• background-color 设置背景颜色
• background-image 设置背景图片地址
• background-repeat 设置背景图片如何重复平铺
• background-position 设置背景图片的位置
• background-attachment 设置背景图片是固定还是随着页面滚动条滚

 

1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。

 

 

2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。

 

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

 

使用图片的某个部位

“background:url(图片地址) x y”