CSS侧重点

字体

• font-family:设置文字字体，需要浏览器中有这种字体，可以设置多个字体让浏览器依次寻找（用, 隔开）
• font-size-adjust:对不同字体的大小进行微调，用一个数值代表比例横向拉伸收缩（font-stretch横向拉伸压缩）
• 1em=16px（大多数情况）
• font-style:设置斜体，normal(多数设置默认为normal)，italic,oblique分别表示字体正常，斜体，倾斜字体（两个倾斜一样 记italic）
• font-weight：设置字体加粗，使用lighter,normal,bold,bolder 等常用属性值表示更细、正常、加粗、更粗；或使用具体的数值100、200、300、…、900来控制字体的加粗程度
• text-decoration:控制文字是否有修饰线，该属性的值none，underline，line-through， overline，分别对应的修饰效果为无修饰，下画线，中画线，上画线
• font-variant:设置文字的大写字母的格式，该属性支持normal、small-caps两个属性值，分别对应于正常的字体、小型的大写字母字体
• text-shadow:设置文字轮廓是否有阴影效果，

 text-shadow:2px 2px 4px red;第一个值上下偏量，第二个左右偏量，第三个阴影模糊度，第四个阴影颜色

• text-transform:该属性用于设置文字的大小写。该属性的值可以是none、capitalize,uppercase和 lowercase，分别代表不转换、首字母大写、全部大写和全部小写。

• letter-spacing：字符之间的间隔；word-spacing：单词之间的间隔

文本

• text-indent:用于设置段落文本的缩进，默认值为0。被另一个元素（如<br…/>)断开的元素不能应用本属性。

• text-overflow:用于控制溢出文本的处理方法。该属性支持如下两个属性值。

  • clip:如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，clip指定只是简单地裁切溢出的文本。

  • ellipsis:如果该元素指定了overflow:hidden属性值,当该元素中文本溢出时, ellipsis指定裁切溢出的文本，并显示溢出标记(…）。只能用于一行

• vertical-align:用于设置目标元素里内容的垂直对齐方式，通常有顶端对齐，底对齐等方式。

• text-align:设置目标元素中文本的水平对齐方式，包括left,reght,center,justify(两端对齐)

• white-space：用于控制HTML元素对元素内文本中空白的处理方式，normal默认 忽略空白，pre保留所有空白，nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br…/>标签为止。pre-wrap:保留空白符序列，但可以正常地进行换行，pre-line:合并空白符序列,但保留换行符，inherit:指定从父元素继承 white-space属性的值

• word-break:break-all （word-wrap:break-word）允许在单词中间换行（单词太长会超出容器）word-wrap比较智能，会使长单词，url地址尽量不换行

  服务器字体

  • @font-face{
    	font-family:name;//命名
    	src:url(url)//字体路径（使用本地的字体直接写字体）
    }
    

可以通过字体的截图在https://www.qiuziti.com/网站找字体

背景

• background-attachment 设置背景图片随着内容滚动还是固定，scroll默认值 随内容滚动，fixed固定背景图片，不会滚动

• background-position 设置图片位置，需要横纵坐标两个值，可以使用具体值或者百分数（是以图片的左上边为标准，50%不是居中）

• background-repeat 图片平铺 repeat 不平铺no-repeat x，y轴平铺repeat-x，repeat-y，（将图片一直铺 铺满容器）space 调整图片平铺间距 使每个图片都是完整的，round 自动调整背景图片大小保证图片完整显示

• 渐变背景颜色

  background:linear-gradient(方向 颜色)（方向可以不加也可以使用角度，颜色渐变）
  

边框

• none:无边框，hidden:隐藏边框，dotted:点线边框，dashed:虚线边框，solid:实线边框。
• border-radius 圆角边框，后面跟数值或百分数，表示以数值为半径的圆弧（可以指定四个角分别四个弧度border-上下-左右-radius）
• 透明度opacity：0完全透明 1不完全透明 数值从0-1

列表表格

• border-collapse：seperatr 使单元格的分割线变成双线 collapse 默认值 单元格分割线为单线
• border-spaing：当border-collapse：seperatr时才能使用 设置单元格边框间距
• 表格 width指定单元格宽度 最宽的就是就是其行的宽度
• col 每一个col都是一列 col span=x 表示x列

响应式布局media query

• 一般情况都是使用screen设备

• 在CSS中设置写入多套css

  • @media screen and (min-width:1000px) and (max-width:480px) {}//表示在width>=1000px时，使用其中的css
    在width<=480px时，使用其中的css
    其他时使用除此之外的css
    

  • <meta name="viewport" content="width=device-width,initial-scale=1.0">
    需要在head中加入
    

变形与动画

• transform 用于设置变形 页面中能看到的XY轴为正

  • translate 设置元素沿xyz轴移动
  • scale 设置元素放缩
  • rotate 设置元素 沿xyz轴选择
  • skew 设置元素沿xy轴倾斜
  • 通过transform-origin：来设置变形的中心
    

• perspective 3D特殊效果 近大远小 沿Z轴移动

• 3D嵌套效果 tranform-style flat不保留子元素3D位置 preserve-3d 子元素保留3D位置

  • 父元素选转子元素也跟着旋转，子元素旋转父元素不动；父元素沿Y轴转60° 子元素转30° 则子元素转动90° 直接不见。
  • 两个元素旋转不同的角度可以两个面会相交，互相覆盖

• transtion(过渡)动画相关属性

  • Transition动画通过transition属性来指定。transition属性的值包括如下4个部分。
  • transition-property:指定对HTML元素的哪个CSS属性进行平滑渐变处理。该属性
    可以指定background-color、width、height等各种标准的CSS属性。
  • transition-duration:指定属性平滑渐变的持续时间。
  • transition-timing-function:指定渐变的速度。该部分支持如下几个值。
  • ease:动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
  • linear:线性速度。动画开始时的速度到结束时的速度保持不变。
  • ease-in:动画开始时速度较慢，然后速度加快。
  • ease-out:动画开始时速度很快，然后速度减慢。
  • transtion同时设置多个变化
    • transition: transform 3.5s ease, background 3.5s ease, width 3.5s ease;

• animation动画

• 定义一个动画

  • animation-name:指定动画名称。该属性指定一个已有的关键帧定义。
  • animation-duration:指定动画的持续时间。
  • animation-timing-function:指定动画的变化速度。
  • animation-delay:指定动画延迟多长时间才开始执行。
  • animation-iteration-count:指定动画的循环执行次数。

@keyframes 名字{
	from||to||百分比{
		属性：值；
		...
	}
}

• 无限次循环动画 animation-iteration-count：infinite