CSS知识点复习

1.CSS 指的是层叠样式表^* (Cascading Style Sheets)

2.CSS 元素选择器 :直接元素 例如p

   　　 id 选择器：#name1

　　   类选择器：. 类名

　　   通用选择器（*）

3.CSS注释以 /* 开始，以 */ 结束：

HTML注释以<!-- -->书写

4.HSL值

Hue（色相）：色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

Saturation（饱和度）：是一个百分比，0％ 表示灰色阴影，而 100％ 是全色。

lightness（亮度）：也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

5.background-color 属性指定元素的背景色。

   opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {
  background-color: green;
  opacity: 0.3;
}

 rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）

6.background-image 属性指定用作元素背景的图像。

background-image: url("01.jpg")

让单张图片只在水平方向 重复背景 background-repeat：repeat-x;

　　　　　　　垂直方向 重复背景 background-repeat：repeat-y;

　　　　　　　背景图片仅显示一次 background-repeat：no-repeat;

　　　　　　 background-position 属性用于指定背景图像的位置。

　　　　　　　　background-position: right top;右上角

7.background-attachment 属性指定背景图像是随着页面（文字）滚动还是固定的（不会随页面的其余部分一起滚动）：

background-attachment: scroll; 滚动的
background-attachment：fixed; 固定的

8.border-style 属性指定要显示的边框类型。

允许以下值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 凹槽边框。效果取决于 border-color 值
• ridge - 定义 3D 垄状边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

border-width 属性指定四个边框的宽度。 上、右 、下、左。

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色。

• name - 指定颜色名，比如 "red"
• HEX - 指定十六进制值，比如 "#ff0000"
• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
• transparent

HEX ：十六进制 #ff00ff

9.边框单独的表的样式

  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

10.圆角边框

border-radius:向元素添加圆角边框。

border-radius:5px;

上border-top 右border-right 下border-bottom 左border-left

11.margin外边距 用于在任何定义的边框之外，为元素周围创建空间。 4个值时是上 右 下 左、2个值是上下和左右、3个是上 左右 下

12.margin外边距合并 当两个相邻的外边距挨着时，外边距会进行合并，以较大值为准进行合并。

margin-top margin-right margin-bottom margin-left

13.padding内边距

padding-top padding-right padding-bottom padding-left

所有内边距的属性都可以设置以下值

• length - 以 px、pt、cm 等单位指定内边距
• % - 指定以包含元素宽度的百分比计的内边距

使用 box-sizing 属性。这将导致元素保持其宽度。 总空间一定，若增加内边距，则可用的空间将会变小。

14.下面这条规则把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

15.height 和 width 属性不包括内边距、边框或外边距！他们设置的是除此之外区域的高度/宽度。

max-width属性用于设置元素的最大宽度。

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

16.outline-width轮廓的宽度

• thin（通常为 1px）
• medium（通常为 3px）
• thick （通常为 5px）
• 特定尺寸（以 px、pt、cm、em 计）

outline-color 属性用于设置轮廓的颜色。

outline-color:invert 执行了反转颜色，所以无论颜色背景如何变换，轮廓都是可见的。

outline-style：虚实点。。。。属性

轮廓的偏移：

outline-offset

指定轮廓与元素的边缘或边框之间的空间。

17.text-decoration 属性用于设置或删除文本装饰。

　 text-decoration: none; 通常用于从链接上删除下划线：

18.text-align 属性用于设置文本的水平/左/右对齐方式 text-align：center/left/right 

　 vertical-align 属性用来设置文本的垂直对齐 vertical-align：top/middle/bottom

19.text-transform 属性用于指定文本中的大写和小写字母。

text-transform:uppercase; 文本转换为大写

text-transform:lowercase; 文本转换为小写

text-transform:capitalize;将文本的首字母转换为大写

20.文字间距

text-indent 属性用于指定文本第一行的缩进

letter-spacing 属性用于指定文本中字符之间的间距

line-height 属性用于指定行之间的间距

word-spacing 字间距 文本单词之间的间距

white-space 指定元素内部空白的处理方式     white-space: nowrap;此处是禁止文本换行操作

text-shadow 属性为文本添加阴影。text-shadow: 2px 2px 5px red;  水平阴影和垂直阴影是2px,模糊效果是5px,颜色是红色。

21.direction 属性规定文本的方向 / 书写方向。

direction: rtl;从右向左
direction：ltl;从左向右

22.display:inline 默认

none 不显示

block 块级元素

inline 内联元素

inline-block 行内块元素

23.empty-cells 属性

hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

24.filter 属性定义元素（通常是 <img>）的视觉效果（如模糊和饱和度）。

25.float属性 none/left/right/inherit从父元素继承float属性。

26.font-family 规定元素的字体系列。

27.font-style 用来设置不同的字体的样式

默认值：normal

italic:斜体字体样式

oblique：倾斜字体样式

28.grid-auto-rows 属性为网格容器中的行设置尺寸。

grid-column 属性规定网格项目的尺寸以及在网格布局中的位置，它是以下属性的简写属性：

• grid-column-start
• grid-column-end

grid-column-gap 属性定义网格布局中列间隙的尺寸。

29.

@import 规则允许您将样式表导入另一张样式表中。

@import 规则必须位于文档顶部（但是在任何 @charset 声明之后）。

@import 规则还支持媒体查询，因此可以允许依赖媒体的导入。

@import "yanshi.css"使用字符串

@import url("yangshi.css"）使用url

30.@keyframes 规则，您能够创建动画。

31.opacity 规定了不透明度 0~1，默认值为1

32.规定边框边缘之外 15 像素处的轮廓：outline-offset：15px

33.overflow是指内容溢出元素框时发生的事情。 若不规定属性值，会出现滚动条。

overflow:visible(默认值)内容不被修剪，会呈现在元素框外

　　　　hidden（溢出）内容会被修剪，其余的部分隐藏不显示

　　　　scroll（显示滚动条上下查看其余的内容）

　　　　auto（显示横向的滚动条）

overflow-x:对左右溢出部分进行裁剪  overflow-y:对上下溢出部分进行裁剪。

34.position属性规定元素的定位类型，

默认值：static 没有定位

absolute  绝对定位 相对于static以外的第一个父元素进行定位，

fixed 　　绝对定位，相对于浏览器窗口进行定位

relative　相对定位，相对于其正常的位置进行定位

35.<q></q>可代表"" 、''这两种符号

36.text-align:center/left/right 三种文本对齐的方式

37.text-shadow:文本阴影

　text-transform 属性控制文本的大小写  none无样式 ，uppercase定义仅有大写字母，lowercase仅有小写字母，capitalize文本的首字母是大写的。

38.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

标签：知识点,复习,text,元素,边框,文本,border,CSS,属性
来源： https://www.cnblogs.com/sunkai6815618/p/16650493.html