CSS学习笔记一

CSS学习笔记一

CSS样式表三种写法

1.内联样式：直接标签里添加style属性，属性值为css声明
2.内部样式：head标签里添加style标签，style标签写语法，作用符合选择器的元素
3.外部样式：css文件夹里建立css文件，link标签引入：

优先级：内联 > 内部 和 外部(显示后面的样式)

选择器分类

1.层次选择器：
E F：后代选择器
E > F：子选择器(第一代)
E + F：相邻兄弟选择器
E ~ F：通用选择器

2.目标伪类选择器：
E:target{ } - - - - -E为目标元素

3.状态伪类选择器：
1.input：enabled–input框启用时状态
2.input：disabled–input禁用时状态
3.input：checked–input选中时状态

4.结构伪类选择器：
E F:first-child- - - - -E下第一个F子元素
E F:last-child- - - - -E下最后一个F子元素
E F:nth - child (n )- - - - -E下第n个F子元素
E F :nth-child(2n/even) - - - - - 偶数；
E F :nth-child(2n+1/odd) - - - - - 奇数
E F :nth-child(-n+X)选择E下面1-X的所有子元素；
E F :nth-child( n+X)选择E下面X后面的所有子元素；
E F :nth-child(-n+X)F :nth-child( n+X)交集
E F:nth-of-type(n)-----E 元素F类型 第n个
E F:nth-last-of-type(n)-----E 元素F类型 倒数 第n个
E F:only-child-----E元素下只有唯一F元素
E F:only-of-type----E元素下只有唯一F类型元素

伪类选择器

1.链接未被访问状态 a:link{ }
2.链接已被访问状态 a:visited{ }
3.鼠标滑过状态 E:hover{ } E:所有元素
4.鼠标按下并没有松开的状态 E:active{ }

选择器的权重

!important > 内联样式（1000）> id选择器（0100） > class选择器（0010） > 类型选择器（0001）> 通配符（0000）>继承（属性从父元素继承过来）
!important最重要，权重最高。
包含选择器权重 = 个选择器的权重之和

CSS字体属性

1.字体大小：font-size{font-size:数值+px;}默认16px;

2.字体类型：font-family{font-family:字体1,字体2,;}中文用引号 默认微软雅黑。

3.字体颜色：color:
a.英文单词
b.#六位十六进制 值越大越暗
c.rgb(r[0-255]…)值越大越亮

4.字体加粗：font-weight{ bolder/bold/normal/100-900 ;}

5.字体倾斜：font-style {italic(倾斜) oblique| normal(常规) }

6.文本是否大小写：font-variant:{font-variant: small-caps(大写)}

7.复合式写法：font
选择器{font：style variant weight size family；}
按以上顺序;size和family固定不可和其他属性位置互换；

CSS文本属性

1.水平对齐方式：text-align{left/center/right}

2.行高：line-hight{normal(数值)}

3.垂直对齐方式：vertical-align{baseline / top / bottom / middle}

4.文本修饰：text-decoration{
none/ - - - - -去掉下划线
underline/ - - - - -添加下划线
overline/ - - - - -添加上划线
line-through - - - - -添加删除线
/blink - - - - -闪烁(高版本浏览器不支持blink属性)
}
5.首行缩进：text-indent（数值+单位（em）），取值可为负（用来隐藏h1）

6.字符间距：letter-spacing

7.词间距：word-spacing { word-spacing : normal/数值;}
说明：控制英文单词词距。（通用于英文词和词之间的间距）

8.控制文本大小写：text-transform{ }
取值：none(默认值)
capitalize(每个单词首字母大写)
uppercase (所有英文字母都为大写字母)
lowercase (所有英文字母都为小写字母 )

CSS列表属性

1.定义列表项目符号样式：
list-style-type: {circle（空心圆）|disc（实心圆）|square（方块）}

2.使用图片定义列表项目符号样式：
list-style-image:url(“图片路径”)；

3.改变列表项目符号位置：
list-style-position:inside(在里面)|outside（在外面）

4.简写：list-style：type |image position

5.去掉项目符号：list-style：none;

CSS背景属性

1.背景颜色：background-color:颜色取值

2.使用图片做背景;background-image:url(图片路径)显示规则：
1. 图片大小=容器大小 完全显示
2. 图片大小>容器大小 不完全显示
3. 图片大小<容器大小 平铺整个页面

3.图片平铺方式：background-repeat:repeat|no-repeat|repeat-x|repeat-y|

4.图片显示位置：background-position: 值1[水平方向-x方向] 值2[垂直方向-y方向]
值1值2空格隔开
值1取值：left|center|right px
值2取值：top|center|bottom px

图片<容器：图片根据容器位置移动
图片>容器：图片根据自身位置移动

5.背景图片固定：background-attachment:scroll(滚动）|fixed(固定)

6.简写：background:color image repeat postion;