敲黑板,划重点,高频考点!前端css精简概要

作用:美化页面

样式放置位置

标签内:style属性
文件head内:style标签放置于head标签中
link引用:link标签 + rel属性指明引用类型 + href属性指明文件地址

样式优先级:标签内>文件head内>link引用

css选择器

  • 标签名{}:标签选择器
  • #id_name{}:id选择器, id不能重复
  • .class_name{}:class选择器, class是可以重复的,选择一类class进行样式渲染
  • .class_name div .class_name2(使用空格间隔):层级选择
  • .class_name,#id_name(使用逗号间隔):同级组合选择

css基本样式

  • color字体颜色
  • background-color背景颜色:#ddd(RGB可以在网上搜索对应表格)/red
  • background-position背景图片位置:80px 90px
  • background-repeat是否重复填充:no-repeat
  • height高度 150px像素,没有占比x%这种说法
  • width宽度 150px 或者 相对于父类标签占比100%
  • float使块级元素在同一行
  • border/border-left/border-top/border-buttom
  • display:none全部隐藏(可以用作模态对话框,菜单得收拢显示);inline块级变内联;block内联变块级;inline-block(width+height在内联标签中不生效)同时具有内联块级标签属,默认会有3px移动,使用float属性则可以消除;
  • visibility:只隐藏内容
  • cursor鼠标形态:pointer/help/wait
  • opacity透明度==background-coloe:rgba(0,0,0,.6):0.4
  • list-style-type去除li元素的前缀
  • text-align文本内容在标签中水平居中:center
  • line-height == 样式标签的height

边距

内边距padding(属于该样式,本身会改变):20px 0 0 0,遵循上右下左设置
外边距margin/margin-top/margin-left(不属于该样式,本身不改变):20px

body加样式margin = 0去除边框

悬浮 float

需要有宽度限制
,将块级元素可以并列排放
子标签使用了 float 需要加上 + 最后一个子标签包含样式clear:both 属性,否则子块将无法显示

position

  • 默认relative + absolute结合使用:父类使用position:relative + 子类使用position:absolute;bottom:0;right:0(寻找最近的用position:relativ的父类)
  • fixed相对浏览器窗口固定:组合位置参数top:0/right:100px使用
  • absolute相对页面固定
  • z-index:数量越大,越靠上

Tips:

  • 调试可以先在浏览器中调试,再copy到代码中
  • img{border:0}设置之后img标签将不会再IE中又边框

猜你喜欢

转载自blog.csdn.net/titan200ok/article/details/89669809
今日推荐