标签：知识点 复习 text 元素 边框 文本 border 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。