其他分享
首页 > 其他分享> > CSS知识点复习

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(redgreenbluealpha)。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 属性指定要显示的边框类型。

允许以下值:

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

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

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

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

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

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

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

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

p {padding: 10%;}

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

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

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

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

16.outline-width轮廓的宽度

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-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