CSS样式
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言
样式编写位置
@内联样式
- style属性
@内部样式
- style标签
@外部样式
- link标签
href: css文件路径
- rel: stylesheet
选择器
CSS选择器用于选择你想要的元素,并设置相应样式
格式: 选择器{}- id选择器
- class选择器
- 标签选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 复合选择器
#box{}
.box{}
a{}
[type=text]{}
:hover{}
::before{}
div,p{}选择器权重
/*
选择器：
* 后代选择器：空格
* 子选择器： >
选择器权重
* 使用权重高的样式
* 如果权重一样，后面覆盖前面
* 列表
选择器 权重（内联,id,类/属性,标签）
1,1,1,1
img 0,0,0,1
a>img 0,0,0,2
#link img 0,1,0,1
#link img[src] 0,1,1,1
* 权重为0的选择器：
* 继承：某些css属性默认具有继承特性
* 可继承的属性
* color
* font
* 没有权重的选择器：
* > 子选择器
* + 下一个兄弟选择器
* ~ 后面所有兄弟选择器
* CSS属性
* 字体font
* font-size
* font-weight
* font-family 设置本地字体
* font-style
* font-face：服务器字体（）
*/css属性与值
格式: 选择器{属性:值}
字体font
font-size
font-weight
normal
bold
bolder
100-900
font-family
font-style
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
文本text
水平对齐:text-align
首行缩进:text-indent
字符转换:text-transform
none 默认不转换
uppercase 所有字符转成大写
lowercase 所有字符转成小写
capitalize 所有单词首字母大写
文本装饰：text-decoration
none
underline
背景:background
background-color
16进制
rgb()
rgba()
background-image
url(path)
background-repeat
repeat 水平垂直平铺(默认)
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position
水平:left,center,right
垂直;top,center,bottom盒模型
- 页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间。这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（margin）组成
盒模型组成部分
- 标准盒模型
- 浏览器调试工具中的盒模型
宽高: width/height
边框: border
border-width:边框宽度
border-style:边框类型
solid 实线
dashed 虚线
dotted 点线
double 双线(宽度为border-width的大小,超3px才有效果)
border-color:边框颜色
/*border:border-width border-style border-color*/
.box{border:1px solid #ddd;}
/*可单独设置某一方向边框*/
.box{border-left:1px dotted #f00;}内边距: padding
- 作用:设定内容到元素的边缘的间距,四个方向,值为整数
padding:10px; 所有四个填充都是 10px
padding:10px 5px; 上下填充是 10px，右左填充是 5px
padding:10px 5px 15px; 上10px， 右左填充是5px，下15px
padding:10px 5px 15px 20px; 顺时针原则:上 右 下 左外边距: margin
- 作用:用于设置元素之间的间距,值可以为负数,其他用法同padding
- 垂直外边距合并
- 内外容器垂直边距塌陷
溢出处理
容器溢出overflow
- visible 溢出可见(默认)
scroll 显示滚动条
auto 当内容超出容器时才显示滚动条
文本溢出text-overflow
- clip 无省略号
- ellipsis 省略号
- 一般配合width和overflow:hidden和white-space:nowrap一块使用
浮动float
- 块元素默认独占一行,通过设置浮动让其脱离这种限制
属性
- none
- left
- right
清除浮动
- clear:both
- overflow:hidden
定位position
相对定位: relative
- 相对与元素初始位置定位
- 一般不单独使用，而是配合绝对定位
绝对定位: absolute
- 相对于《定位父级》而定位
如果无定位父级，则相对与根元素（html）定位
定位父级：具有relative,absolute,fixed三者之一的父级元素
固定定位: fixed
属性
- top
- left
- bottom
- right
转自老谢