总结css样式和属性
1.盒模型
| 属性名称 | 描述 |
|---|---|
| width, height | 设置元素的宽度，高度 |
| padding-top, padding-right | 设置元素上内边距，右内边距 |
| padding-bottom, padding-left | 设置元素下内边距，左内边距 |
| padding | 设置元素四个方向的内边距 |
| margin-top | 设置盒子与上方盒子的距离 |
| margin-right | 设置盒子与右方盒子的距离 |
| margin-bottom | 设置盒子与下方盒子的距离 |
| margin-left | 设置盒子与左方盒子的距离- |
| margin | 设置元素上、右、下和左四个方向的外边距 |
| box-sizing | 规定计算一个元素实际宽高的方式 |
| display | none 此元素不会被显示。block 此元素将显示为块级元素，此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block 行内块元素。 |
| visibility | 设置元素是否是可见的 |
2.常用文本样式属性
| 属性名称 | 描述 |
|---|---|
| color | 规定字体的颜色 |
| font-size | 设置字体大小 |
| font-weight | 设置字体粗细 |
| font-style | 设置字体样式 |
| text-decoration | 设置添加到文本的装饰线none 默认。定义标准的文本。underline 定义文本下的一条线。overline 定义文本上的一条线。line-through 定义穿过文本下的一条线。blink 定义闪烁的文本。inherit 规定应该从父元素继承 text-decoration 属性的值。 |
3.段落和行相关属性
| 属性名称 | 描述 |
|---|---|
| text-indent | 设置首行文本的缩进 |
| line-height | 设置文本行间的距离(行高) |
| text- align | 设置文本对齐方式 |
| font | 设置所有字体属性 |
4.css的书写位置
| 属性名称 | 描述 |
|---|---|
| style | ①内嵌式，书写在head标签对中，使用<style></style> 标签对,里面书写css样式。如:<head><style">h1{color:red;}p{color:blue;}</style></head>②行内式，示例: <h1 style="color:blue;text-align:center"> 这是一个标题</h1>
|
| link | <link re1=" stylesheet" href="css 文件"> |
5.权重
| 属性名称 | 描述 |
|---|---|
| ！important | 标签选择器<类选择器< id选择器<行内样式< limportant |
6.伪元素
| 属性名称 | 描述 |
|---|---|
| ::before | 作为匹配选中元素的第一个子元素，必须设置content属性 |
| ::after | 作为匹配选中元素的最后-个子元素，必须设置content属性 |
| :first-letter | 选择块元素中的第一个字母设置样式 |
| :first-line | 选择块元素中的第一行全部文字设置样式 |
7.伪类
| 属性名 | 描述 |
|---|---|
| :link | 选择所有未被访问的经铁链接 |
| :visited | 选择所有访问过的超级链接 |
| :active | 选择被用户激活的元素 |
| :hover | 选择鼠标悬停的元素 |
8.css3新增伪类
| 属性名 | 描述 |
|---|---|
| :empty | 选择没有任何子级的元素 |
| :focus | 选择当前获得焦点的元素 |
| :enabled | 选择已启用的元素 |
| :disabled | 选择禁用的元素 |
| :checked | 选择选中的输入元素(仅适用于单选按钮或复选框) |
| :root | 选择根元素，即标签 |
9.标签选择器、id. class 选择器
| 属性名 | 描述 |
|---|---|
| element | 标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素，示例: p{color:red;} 选择所有的p标签 |
| #id | id选择器，使用井号#作为前缀，表示选择指定id 的元素，示例: #firstname{color:yellow;} 选择id=firstname" 的元素 |
| .class | class选择器，使用点作为前缀，表示选择指定类名的元素，p示例: . intro{color:red;}选择class="intro" 的元素 |
10.复合选择器
| 属性名 | 描述 |
|---|---|
| 后代选择器 | 使用空格分隔两个元素，示例: box p{}表示选择类名为box的标签的后代元素p标签 |
| 交集选择器 | 示例: h3.spec{} 表示选择有.spec 类的<h3>标签 |
| 并集选择器 | 也叫分组选择器，使用逗号隔开，示例: ul, ol{} 表示同时选择<ul> 标签和<ol> 标签 |
11.元素关系选择器
| 属性名 | 描述 |
|---|---|
| 子选择器，使用>符号分隔两个元素 | 示例: div > p {}选择<div>下的所有子级<p>元素 |
| 相邻兄弟选择器，使用+分隔两个元素 | 示例: div + p {}选择所有紧接着<div> 元素之后的第一个<p>元 |
| 素 | |
| 兄弟选择器，使用~分隔两个元素 | 示例: p~ul {}选择同- -父元素下的p元素之后的每一个ul元素 |
12.序号选择器
| 属性名 | 描述 |
|---|---|
| :first-child | 示例: p:first-child{} 匹配<p>的父元素的第一个<p>元素 |
| :last-child | 示例: p:last-child{} 匹配<p> 的父元素下最后-一个<p>元素 |
| :nth-child(n) | 示例: p:nth-child(2) 匹配<p> 的父元素中第2个子元素<p> 标签 |
| :nth-of-type(n) | 示例: p:nth-of-type(2){} 指定每个<p>元素匹配同类型中的第2个同级兄弟元素 |
| :nth-last-child(n) | 示例: p:nth-last-child(2){} 指定每个<p> 元素匹配同类型中的倒数第2个同级兄弟元素 |
| :nth-last-of-type(n) | 示例: p:nth-last-child(2){} 指定每个<p> 元素匹配同类型中的倒数第2个同级兄弟元素 |
13.浮动
| 属性名 | 描述 |
|---|---|
| float | 设置元素浮动 |
| overflow | 溢出隐藏:溢出盒子边框的内容会被隐藏 |
| clear | 清除元素的浮动 |
14.定位
| 属性名 | 描述 |
|---|---|
| position | 规定元素的定位类型 |
| relative | 定义相对定位 |
| absolute | 定义绝对定位 |
| fixed | 定义固定定位 |
| top | 设置定位元素距离顶部的距离 |
| bottom | 设置定位元素距离底部的距离 |
| left | 设置定位元素距离左侧的距离 |
| right | 设置定位元素距离右侧的距离 |
| z-index | 设置定位元素的堆叠顺序，数值大的会盖住数值小的 |
15.鼠标样式
| 属性名 | 描述 |
|---|---|
| cursor | 设置光标的形状：default 默认光标（通常是一个箭头）auto 默认。浏览器设置的光标。crosshair 光标呈现为十字线。pointer 光标呈现为指示链接的指针（一只手） |
16.边框
| 属性名 | 描述 |
|---|---|
| border-width | 设置边框的宽度 |
| border-style | 设置边框线的形状:none 定义无边框。hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted 定义点状边框。在大多数浏览器中呈现为实线。dashed 定义虚线。在大多数浏览器中呈现为实线。solid 定义实线。double 定义双线。双线的宽度等于 border-width 的值。 |
| border-color | 设置边框的颜色 |
| border. top-width | 设置上边框宽度 |
| border-right-width | 设置右边框宽度 |
| border- bottom-width | 设置下边框宽度 |
| border-left-width | 设置左边框宽度 |
| border.-top-style | 设置上边框样式 |
| border-right-style | 设置右边框样式 |
| border-bottom-style | 设置下边框样式 |
| border-left-style | 设置左边框祥式 |
| border. top-color | 设置上边框颜色 |
| border-right-color | 设置右边框颜色 |
| border-bottom-color | 设置下边框颜色 |
| border-left-color | 设置左边框颜色 |
| border-top | 上方向边框样式的复合写法 |
| border-bottom | 下方向边框样式的复合写法 |
| border-right | 右方向边框样式的复合写法 |
| border-left | 左方向边框样式的复合写法 |
| border | 边框的复合写法，设置所有的边框属性 |
| solid | 定义实线边框 |
| dashed | 定义虚线边框 |
| dotted | 定义点状线边框 |
17.圆角
| 属性名 | 描述 |
|---|---|
| border-top-left-radius | 设置左.上方的圆角 |
| border-top-right-radius | 设置右.上方的圆角 |
| border- bottom-left-radius | 设置左下方的圆角 |
| border- bottom-right-radius | 设置右下方的圆角 |
| border-radius | 设置圆角的复合写法 |
18.盒子阴影
| 属性名 | 描述 |
|---|---|
| box-shadow | 给元素添加阴影效果 |
19.背景色
| 属性名 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置盒子的背景图片、设置线性渐变背景、设置径向渐变背景 |
| background-repeat | 设置背景图像是否重复 |
| background-size | 设置背景图片大小 |
| background-clip | 设置背景的绘制区域 |
| background-origin | 设置背景图片显示区域的位置 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 |
| background-position | 设置背景图像的位置 |
| background | 设置背景样式的复合写法 |
---其他的后面在补充啦---
网友评论