CSS修饰属性

本文详细介绍了CSS3中的关键概念,包括各种选择器的用法,如id、类和属性选择器,以及优先级规则;字体属性,如颜色、大小和样式;背景设置,如颜色、图片和重复方式;文本属性,如对齐和装饰;表格样式;盒模型和弹性盒模型的概念及应用场景;还有如何使用CSS3实现雪碧图技术。此外,还提到了媒体查询在响应式设计中的应用。
摘要由CSDN通过智能技术生成

选择器

  • id选择器(#)id = “”
  • 类选择器(.)class = “”
  • 属性选择器(属性名)
  • 全局选择器(*)
  • 优先级
    内联>id选择器>class选择器>属性选择器>全局选择器
  • 后代选择器:E F{}
  • 子代选择器:E>F{}
  • 相邻兄弟选择器(只有向下相邻的生效):E+F{}
  • 通用兄弟选择器(E下的所有F都生效):E~F{}

字体属性

  • color:字体颜色
  • font-size:字体大小(chrome最小12px)
  • font-weight:字体粗细
属性描述
boid
boider更粗
lighter更细
100-900由细到粗,400默认,700=boid
  • font-style:字体样式
属性描述
normal默认
italic斜体
  • font-family:指定一个元素的字体
    (例:“Microsoft YaHei”,“Simsun”,“SimHei”)

背景

  • background-color:背景颜色
  • background-image:背景图片
    url(“地址”)
  • background-position:背景图片位置
    (例:left top)
  • background-repeat:图片如何填充
属性描述
repeat默认
repeat-x水平平铺
repeat-y垂直平铺
no-repeat不平铺
  • background-size:图片大小
    (%;px;cover;contain)

文本

  • text-align:文本对齐方式(left,right,center)
  • text-decoration:添加文本修饰(underline下划线,overline上划线,line-through删除线)
  • text-transform:文本大小写(captialize单词首字母打写,upperrcase全部大写,lowercase全小写)
  • text-indent:文本块中首行文本缩进(px)

表格属性

  • border:例:1px solid red
  • border-collapse:collapse(折叠边框)
  • width:宽
  • height:高
  • vertical-align:垂直方向(left,right,center)
  • padding:表格填充(px)
  • background-color:表格背景颜色

盒模型

  • margin:外边框
  • border:边框
  • padding:内边距
  • content:实际内容

弹性盒模型CSS3

  • display:flex弹性模型

  • flex-direction:指定位置

    属性描述
    row横向从左到右
    row-reverse反转横向
    column纵向排列
    column-reverse反转纵向
  • justify-content:内容对位方式

    属性描述
    flex-start
    flex-end
    flex-center
  • align-items:对位方式

    属性描述
    flex-start
    flex-end
    flex-center
  • flex:权重占比(例:1:2:2)
    -float:浮动(left,right)

  • 清除浮动:

    1. clear:清除左(left),右(right)浮动,左右都清除(both)
    2. overflow:hidden;和clear一起被使用
    3. 增加伪对象:.属性名::after{content:“”;display:block;clear:both;}
  • postion:定位指定元素位置

    属性(可用left,right,top,bottom调整位置px)描述
    relative相对定位
    absolute绝对定位
    fixed固定定位
  • Z-index:修改堆叠覆盖顺序(例:1,2,3)

  • border-radius:圆角(px,%)

  • box-shadow:阴影

    属性描述(正数右下,负数左上)
    h-shadow水平方向阴影位置px
    v-shadow垂直方向阴影位置px
    blur模糊距离px
    color阴影颜色
  • :hover{鼠标时覆盖执行的操作}

  • animation:动画
    @keyframs name{
    0%{}
    50%{}
    100%{}
    }

    属性描述
    name动画名称
    timing-function设置动画效果速率(ease默认逐渐变慢,linear匀速,ease-in加速,ease-out减速,ease-in-out先加速后减速)
    delay动画开始的时间
    iteration-count动画循环次数,infinite无限次数循环
    dirction动画播放方向(normal默认向前播放;alternate动画播放在第偶数次向前播放,第奇数次向反方向播放)
    animation-play-state控制动画播放状态(running播放,paused停止)

-媒体查询:

<meta name="viewport" content="width=device-width",initial-scale=1,maximum-
scale=1,user-scalable=no>

@media screen and (max-width:768px){
/*设备小于768px,手机*/
}
@media screen and (min-width:768px) and (max-width:992px){
/*设备小于992px大于768px,平板*/
}
@media screen  and (min-width:992px){
/*设备大于992px,网页*/
}

雪碧图

span{
    display: block;
    width: 100px;
    height: 120px;
    background-image: url(1.PNG);
    border: 3px solid red;
    background-position: -100px -10px;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值