web第二天css3

1.选择器

  1. 标签选择器/元素选择器:div{background-color: red; }
  2. class选择器:.child{background-color: gray;}
  3. ID选择器:#wuyifan{background-color: brown;}
  4. 伪类选择器:#wuyifan:hover{background-color: green;}
  5. 属性选择器:不常用
  6. 组合形式:层级选择器:

    .father span{background-color: black}/祖辈子孙都可以/

    .father>span{background-color: blue}/父子选择器/

    .father,.mahuateng{color: brown;}/z组合选择器/

    .header .logo{background-color: yellow}

2.属性

  1. 宽高 width(min-width max-width)height(min-height max-height)
  2. 字体 font font-style(通常写normal) font-weight:bold粗细值 font-size:字体的大小一般设置为12px font-family:设置为字体样式但是如果其他浏览器不支持这种样式也没用
  3. text-intdent文字的缩进inherit; text-overflow文字溢出inherit; text-align:设置文本位置 text-shadow:阴影 line-height和verticl-align设置文本的位置为中间
  4. 背景 background background-color :背景颜色 background-image:背景图片 background-repeat:去掉重复的图片 background-attachment:设置滚动条一般设置默认 background-position:设置背景位置 background-size:设置背景大小
  5. 颜色:color:设置颜色 opacity:设置透明度
  6. list-style:设置列表项目相关样式

    list-style-image:设置或检索作为对象的列表项标记的图像

    list-style-position:设置或检索作为对象的列表项标记如何根据文本排列

    list-style-type:设置或检索对象的列表项所使用的预设标记

  7. 定位:position:检索对象的定位方式relative absolute相对 fixed类似广告

    z-index:检索或设置对象的层叠顺序
    
    top:检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置
    
    right:检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置
    
    bottom:检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置
    
    left:检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置
    
  8. border:边框
    border:设置对象的边框样式

    border-width:设置对象边框的宽度
    
    border-style:设置对象边框的样式
    
    border-color:设置对象边框的颜色
    
    border-radius:设置对象的圆角边框
    
    box-shadow:设置对象阴影
    
  9. 内边距:
    border:设置对象的边框样式

    border-width:设置对象边框的宽度
    
    border-style:设置对象边框的样式
    
    border-color:设置对象边框的颜色
    
    border-radius:设置对象的圆角边框
    
    box-shadow:设置对象阴影
    

    外边距:margin:设置所有外边距属性

    margin-top:设置元素的外上边距
    
    margin-right:设置元素的外右边距
    
    margin-left:设置元素的外左边距
    
    margin-bottom:设置元素的外下边距
    
  10. 单位:常用px

3.盒子模型

这里写图片描述

这里写图片描述
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值