欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3使用

程序员文章站 2024-03-25 11:07:34
...

1. Css语法

选择器{
属性:属性值
属性1:属性值1
}
  • Ul样式

    List-style:none;去点
    Li的前面显示小图标
    List-style-imgge:url();
    url统一资源定位符 指的是地址
    background是背景 也可以插入图片
    color:#fff;字体颜色

  • 文字文本样式

    Text-decorration:文本装饰样式
    -none没有样式
    -underline下划线
    -line-through中线/删除线
    -overline
    text-indent首行缩进
    -20px;
    text-align文字图片水平居中
    -left左-right右-center居中
    Text-transform文字样式转换针对英文
    -capitalize首字母大写

  • 选择器9种

    1.通用选择器
    *{
    }不能限制太多

    2.标签选择器
    P{}
    Div{}
    Ul{}

    3.类名选择器通过class起名字调用
    .box{} div.box{} ul.box{}

    4.Id选择器
    #time{}唯一(不能重复命名)

    5.子代选择器
    Div>p(两代选择器)

    6.后代选择器
    Div ul li(三代及三代以上)

    7.群组选择器
    多个标签选择器放到一起,逗号隔开
    div,ul,h1,

    8.交叉选择器
    div.box不同选择器结合使用

    9.伪类选择器
    :hover,:active,:visited

  • 盒模型

    从里到外
    内容—paddimg内边距—border边框–margin
    外边距
    Content内容-padding内边距-border边框-margin外边距

  • . Css文件 4种引入方式

    1.行内样式在标签上写style
    2.内嵌样式 在head标签加
    3.Link外部链接
    4.引入6在head
    <style> @import:url(mi.css) </style>
    四种方式优先级
    行内>内嵌>外链>引入

定位position

  1. static 静态定位.默认 无定位
  2. absolute 绝对定位 移动不占原来位置 无父级或父级无定位参照浏览器 父级有定位参照父级,如果设置父级,一般父级是相对定位 相对定位比较稳定 参照自己原来的位置
  3. Relative 相对定位 即使移动还占原来位置,参照是本身原来的位置,相对定位比较稳定
  4. Fixed 参照浏览器,固定定位,即使移动,不占原来位置,固定定位参照是浏览器,无论有无父级或父级有无定位,固定定位都参照浏览器
  5. 粘性定位 sticky
    背景定位
    background-position:40px(左右)40px(上下)no-repeat;控制图片位置
    Repeat-x水平平铺 repeat-y垂直平铺
    Background-size 背景大小

浮动

Float:left/right

清除浮动

  1. clear:both
  2. 给父级设置宽高
  3. 给父级设置overflow:hidden
  4. 给父级设置display:table
  5. 给父级设置display:inline-block
相关标签: css3