[前端与HTML]--CSS的一些标签

76 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

背景样式:

   background-color 背景色
   background-image 背景图
   url(背景地址)
   background-repeat:背景图片的平铺方式 repeat-x:x轴平铺  repeat-y:y轴平铺     repeat(x,y)x,y平铺  no-repeat都不平铺
   background-position:背景图片的位置 x,y
   background-attachment:背景图随滚动条的移动方式 scroll:默认值(背景位置是按照当前元素进行偏移的)fixed(背景位置是按照浏览器进行偏移的)

边框样式:

border-style:边框样式  solid:实线  dashed:虚线  dotted:点线
border-width:边框大小  px。。。
border-color:边框颜色
border-radius:设置圆角  四个值

字体类型:

font-family

字体大小:

font-size  (单位:px)

字体粗细:

font-weight

字体样式:

font-style :斜体:*italic*  倾斜:*oblique*

文本修饰(text-decoration):

下划线:underline	
上划线:overline
删除线:line-through

文本大小写(text-transform):

大写:uppercase
小写:lowercase

首行缩进:

text-indentem为单位)

文本行高:

line-height(定义行高)

文本对齐:

text-alignright。。)

文本装饰线:

text-decoration(可选值(underline:下划线  line-through:删除线  none:删除装饰线))

文本选中(不可选中):

user-selcet(none:文本不可选中)  

文本换行:

white-spaceno(wrap不换行 normal:文本正常换行)

文字超出部分显示状态:

text-overflow:ellipsis	

垂直对齐:

vertical-align	 

字之间的间距:

letter-spacing

词之间的间距:

word-spacing

容器的边距:

padding  内边距填充:只写一个值(上下左右)  二个值(上下、左右)  四个值(上、右、下、左)

内容边框:

content

外边距(外填充):

margin  与(paddding一样)


transform:rotate()旋转多少度  deg度数 scale()变形放大  animation:调用 动画  infinite alternate无限交替

单独控制元素显示状态:

visibility    (隐藏:hidden    显示:visible)

设置元素的不透明值:

opacity0-1

轮廓属性:

和边框一样:(outline)不会改变元素的实际所在区域

盒子阴影:

box-shadow写法:x轴 y轴 颜色 进阶写法:x y 模糊半径 扩散范围 颜色 阴影指定扩散方向: 默认值:outset:向外扩散  inset:向内扩散

盒子模型:

box-sizing   怪异盒(border-box)  标准盒(content-box)

圆角属性:

border-radius

最大宽度:

max-width  盒子最大到多少,盒子可以小于多少,小于多少盒子自动缩小

最小宽度:

min-width  保证盒子不能小于多少,盒子会正常显示