css笔记总结1

1 font 设置字体样式

font-size/line-height设置字体大小px 字号大小

font-style设置字体风格 斜体 

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。

oblique:浏览器会显示倾斜的字体样式。

font-weight 字体粗细  

font-family 设置字体类型比如微软  normal、bold、bolder、lighter、100~900(100的整数倍)。

2 外观属性

color :文本颜色   line-height 行间距  color:transparent 是全透明

line-height :行间距  (px em % 三种)

text-align:水平对齐(left right center)

text-indent:首行缩进

text-decoration:(none:默认,定义标准文本,underline定义下划线,overline:文本上的一条线,line-through穿越文本的一条线)

3伪类选择器 链接伪类选择器 link (未访问)visited(已访问) hover(鼠标移动在链接上) active (选定的链接)还有before和after

4 块级元素:<h1-6><p> <div><ul><ol><li>

块级元素的特点:(block-level) 
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
行内元素(inline-level)
<a><strong><b><em><i><del><s><ins><u><span(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊 a里面可以放块级元素 )
标签显示模式转换display 块转行display:inline 行转块 display:block
5 文本属性
white-space:设置元素空白的处理方式
normal:默认处理方式
pre 保留空格 当文字超出边界时不换行
nowrap:不保留空格,强行在同一行内显示所有文本,直到文本结束或br标签
pre-wrap:保留空格 当文字碰到边界时换行
pre-line 不保留空格 保留文字的换行 当文字碰到边界时换行
direction:规定文本方向
ltr默认从左到右
rtl从右到左
6列表属性
list-style-type:列表项标志的类型
none是去除标志
square 方框
circle 空心圆
upper-alph; & disc; 实心圆
list-style-image将图片设置为列表项标志
list-style-position:列表项标志的位置
inside和outside

页面布局:

1. 边框 

  border-style:边框样式

  • solid 默认,实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

border-color:边框颜色

  border-width:边框宽度

  border-radius:圆角

  • 1个参数:四个角都应用
  • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
  • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
  • 4个参数:左上、右上、右下、左下(顺时针

 border: 简写

  • border: 2px yellow solid;

box-shadow:边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;
  • https://www.cnblogs.com/caoyc/p/5757005.html  具体看这个

盒子模型

padding位于控制内容与边框之间的距离

margin用于控制元素与元素之间距离

 一个参数,应用于四边。

  两个参数,第一个用于上、下,第二个用于左、右。

  三个参数,第一个用于上,第二个用于左、右,第三个用于下。

display: none不显示 block 显示块级元素  inline显示内联元素 inline-block行内块元素 list-item显示列表元素

visbility visible元素可见  hidden 元素不可见 collapse 当表格使用时,此值可删除一行或一列,不影响表格布局

float right/left/none

clear:none/left/right/both

 clip 剪裁图像

rect 剪裁定位元素 auto是默认值 无剪切 上右下左 的顺序提供偏移值  区域外的部分是透明  必须制定position:absolute 

例如:clip:rect(0px,60px,200px,0px);

overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值 内容不会被修剪 会呈现在元素框之外

hidden 内容会被修剪并且其余内容不可见

scroll 内容会被修剪且浏览器会显示滚动条以便查看其余内容

auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余内容

10-position规定元素的定位类型

static 默认值,没有定位 遵从正常的文档流

relative 相对定位元素 相对于正常位置进行定位,遵从正常的文档流

absolute 绝对定位,脱离文档流

fixed 绝对定位元素,固定在浏览器的某处

通过以下四种属性进行定位 left right top bottom z-index

11-z-index元素层叠顺序

z-index仅在定位元素上有效(例如position:absolute)

可以指定负数属性值(-1)

12-outline 边框轮廓

out-width 轮廓宽度out-color轮廓颜色 out-style轮廓样式

13-zoom 缩放比例

14 cursor 鼠标类型形状

15-transform transition 动画效果

transform 转换 变形

origin 定义旋转基点 (left top center right bottom 坐标值) transform-origin:50px 50px;transform-origin:left

rotate 旋转  skew 扭曲 scale 缩放 translate 移动

transition:平滑过渡

transition-property:变换的属性(none(是没有属性改变), all (所有属性改变) ,具体属性)

transition-duration :变换持续的时间

transiton-timing-function:变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))

transition-delay:变换延迟时间

transition:缩写



 
原文地址:https://www.cnblogs.com/asasas/p/9455295.html