伪类选择器
(1):nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
奇:2n+1 偶:2n-1
- :nth-child选择器,该选择器选取父元素的第 N 个子元素,与类型无关。
字体样式
1.font-family:字体名称
2.font-size: 字体大小
3.Font-style:定义字体风格
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
- font-weight:设置文本粗细
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
有顺序性(粗细,是否倾斜,字号,字体名称)
font: 800 italic 12px “微软雅黑”
文本样式
- Text-indent:定义一个块元素首行文本内容之前的缩进量。如:text-indent:2em;
- line-hight:行高(可让单行文本垂直居中)
- Text-align:文本行间的对齐方式(center(居中) justify(自适应))
- Word-spacing:设置标签,单词之间的空格长度
- Margin:0 auto(让标签水平居中)
- 文本装饰
Text-decoration:设置添加文本修饰
默认值为none, 定义标准的文本。
underline为定义文本下的一条线。
overline为定义文本上的一条线。
line-through为定义穿过文本下的一条线,一般用于商品折扣价
文本颜色
color: brown;
color: #232;(16进制颜色)
color:rgb(red, green, blue);(三原色)
background-color:rgba(24, 211, 24,.2);(最后一个数在0~1之间,可调透明度)
文本方向
Direction
ltr:默认属性。可设置文本和其他元素的默认方向是从左到右。
rtl:可设置文本和其他元素的默认方向是从右到左。
列表样式
list-style 简写属性在一个声明中设置所有的列表属性。
list-style-type | 设置列表项标记的类型。 |
list-style-position | 设置在何处放置列表项标记。 |
list-style-image | 使用图像来替换列表项的标记。 |
List-style-type:设置列表样式
none | 无标记。 |
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
背景
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
background-repeat 属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
background-position 属性设置背景图像的起始位置。
top left top center top right center left center center center right bottom left bottom center bottom right | 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
元素的类型
块级元素(div,h,li,ol,dl)
- 默认情况下,总是从新行上开始,即独占一行
(2)可以对它设置宽,高和内外边距,默认是它容器(父级元素)的100%
(3)可以容纳其他块级元素和行内元素(内联元素)
内联元素(a、span、em、 br、strong、i)
是指在开发中它会与它的兄弟元素在同一行中从左往右依次排序,不会单独占一行的元素。 它的宽高以及到顶部和底部的边距都不可以进行设置。
内联块级元素(img/input)
可与其他元素在一行,可设置宽高,和内外边距。
display 属性规定元素应该生成的框的类型。
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行联块级元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
边框
border 属性允许指定元素边框的样式、宽度和颜色。
border-style 属性指定要显示的边框类型。
dotted - 定义点线边框 dashed - 定义虚线边框
solid - 定义实线边框 double - 定义双边框
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
文本域
resize 属性规定是否可由用户调整元素的尺寸。
none | 用户无法调整元素的尺寸。 |
both | 用户可调整元素的高度和宽度。 |
horizontal | 用户可调整元素的宽度。 |
vertical | 用户可调整元素的高度。 |
鼠标样式
cursor 属性规定要显示的光标的类型(形状)。
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
相对定位:该元素相对于自己原有位置,偏移一定距离。相对的是自己。
绝对定位:该元素相对于其父元素,偏移一定距离。相对的是父元素,重点是这个父元素也需要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
auto | 默认。堆叠顺序与父元素相等。 |
number | 设置元素的堆叠顺序。 |
inherit | 规定应该从父元素继承 z-index 属性的值。 |
固定定位:position:fixed
相对于浏览器窗口进行定位
粘性定位:
.posi{position: sticky;
top: 20px;
background-color: aqua;
}
显示与隐藏
display 属性规定元素应该生成的框的类型。
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符 |
opacity 属性设置元素的不透明级别。
value | 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 |
inherit | 应该从父元素继承 opacity 属性的值。 |
visibility 属性规定元素是否可见。
提示:即使不可见的元素也会占据页面上的空间。使用 "display" 属性来创建不占据页面空间的不可见元素。
visible | 默认值。元素是可见的。 |
hidden | 元素是不可见的。 |
collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |
inherit | 规定应该从父元素继承 visibility 属性的值。 |