css常用属性总结

CSS 指层叠样式表 (Cascading Style Sheets)。
css样式引入方式:
   --内联样式- 在HTML元素中使用"style" 属性
   --内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
   --外部引用 - 使用外部 CSS 文件

文本样式:
 font-style    字体风格
font-family     设置文本字体
color        设置文本颜色
font-size        设置文本的大小
font-weight    指定字体的粗细(blod粗 | lighter细 | normal正常)
line-height    设置行高
  px         字体行高
text-align        对齐元素中的文本
    --left         文字左对齐
    --center  文字居中对齐
    --right      文字右对齐
text-shadow    设置文本阴影
vertical-align    设置元素的垂直对齐
 direction      设置文本方向

关于盒子模型:
width 宽度
height 高度
border:边框
         ---solid  实线
     ---dotted 点
     ---dashed 虚线
    --border-left   设置左边框
    --border-right  设置右边框
    --border-top    设置上边框
    --border-bottom 设置下边框
    --border-radius  圆角边框
    --box-shadow 当鼠标划上出现阴影边框(box-shadow: #808080 5px 5px 5px 5px; )
    --outline当鼠标划上出现(红色)边框(outline: 3px solid red;)

margin(外边距)( 顺序是上右下左)
    --margin-top 设置上边外延边距
    --margin-right 设置右边外延边距
    --margin-bottom 设置下边外延边距
    --margin-left 设置左边外延边距

padding:内边距  (顺序是上右下左)
    --padding-top   设置上边内延边距
    --padding-right 设置右边内延边距
    --padding-bottom设置下边内延边距
    --padding-left  设置左边内延边距


Content(内容)


布局:
div
浮动:float( left | right )
清除浮动:clear( left | right )
        
table表格:
    cellPadding 单元格边距(代表单元格外面的一个距离,用于隔开单元格与单元格空间)
     cellSpacing  单元格间距(代表表格边框与单元格补白的距离,也是单元格补白之间的距离)


无序列表:
list-style-type:none:去点
display:inline-block: 横向排列  

display:none
    --none: 隐藏元素
    --block:以块级元素的形式显示
    --inline:以行内元素的形式显示(有可能设置宽高无效)
    --inline-block:不换行,但是能设置宽高

定位:
      --static: (默认)无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 
     --relative: 相对(相对于自己原位置来确定位置。)对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。 
     --absolute: 绝对(相对于父元素来确定位置。)对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 
      --no-repeat:找像素。后跟x轴与y轴的值。值除了0就是负值。

    -- position:fixed 相对于浏览器窗口不动

其他:
    背景:
    background-color    背景色
    background-image|background:url()    背景图片

    链接样式:
    a:link - 正常,未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover - 当用户鼠标放在链接上时
    a:active - 链接被点击的那一刻
    text-decoration 删除链接中下划线

      z-index指定元素的堆叠顺序

   

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值