CSS总结

作者: Claire_cc | 来源:发表于2019-04-30 23:03 被阅读0次
  1. p上下有间距,title加粗,div和span无样式
  2. div:换行,块元素eg:h1,p
    span:不换行,内联元素eg:b,font,img,input,textarea,a
  3. 查看网页前端代码:F12 elements 左上箭头查看某块代码
  4. 引入css:
    (1)在<head>里面<style type="text/css"></style>
    (2)<link rel="stylesheet" type="text/css" href="文件路径">
    (3)直接写在标签里面<p style="color:red;">
  5. 选择器:
    (1)标签 div
    (2)类名 .one
    (3)id #slider
    (4)属性选择器input[type='text']
    (5)用,隔开选择多个(群组选择器)div,span,.one{ }
    (6)a:link{} a:visited{} a:hover{} a:active{} 伪类选择器(img同)
    (7)div:first-child means 是div,也是父类的第一个孩子
    (8)*{ }全局选择器
    优先级:id>类名>标签
  6. css可以控制的样式
  • 背景
    background-image:url()
    background-repeat:no-repeat/repeat-x/repeat-y
    background-position:top/bottom/center/left-top
    background-attachment:fixed/enroll
    background:。。。
  • 文本
    text-indent:2em(两个字体大小,默认1em是16px)
    text-align:justify/center
    text-decoration:line-through/overline/underline
    color:
    wording-spacing:
    letter-spacing:
    line-height:
    font-size:
    font-family:"黑体"
    font-style:italic/oblique(倾斜)
    font-weight:粗细
    font:。。。。。
  • 列表
    list-style-type:square/none/decimal(有序列表)
    list-style-image:
    list-style-position:inside/outside 多行之后是否和图标对齐
    list-style:。。。
  1. 盒模型


  • margin和padding
    计算盒子宽度:width+(border+margin+padding)*2
    <body>自带margin和padding
    width可以设成百分比,height不行
    padding:上右下左
    margin:0 auto 相对父元素左右居中
    当上下或者父子盒子某边重合时margin按照较大的值显示
  • border
    border设solid才显示,默认是hidden
    可设置样式:border-top-style/border-color/width/style/radius
  1. 定位
    浮动:元素只能左右移动而不能上下移动,一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它,取消方式:浮动元素后面设一个div class="clear" css里面设.clear{clear:both}。浮动元素之前的元素将不会受到影响。

(1)position:static
(2)position:relative
(3)position:absolute
(4)position:fixed

相关文章

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • css reset 总结

    css reset 的总结

  • CSS学习总结

    学了有一小段时间前端了,今做个CSS的总结! 目录: CSS 简介 CSS 语法 CSS 选择器 CSS 引入方式...

  • CSS hack 原理

    参考文章: CSS hack大全&详解(什么是CSS hack) 要点总结: css hack 原理是:依据不同浏...

  • 2022-04-03

    简单总结一周学的css 2 日常总结CSS选择器列表[https://www.cnblogs.com/zhangh...

  • less总结

    css-less和sass总结

  • 2018-07-20

    CSS知识点总结 一.什么是css? CSS(Cascading Style Sheets)层叠样式表,专注于页面...

  • CSS教程汇总

    CSS揭秘实用技巧总结 不止于 CSS 灵活运用CSS开发技巧 前端基础篇之CSS世界 你未必知道的49个CSS知...

  • CSS总结

    css总结 css(cascading style sheets)层叠样式表 引入方式 行内样式————写在htm...

  • 过渡、动画、转换(2D/3D)、渐变

    零:总结 手动触发-->改变属性 + transition属性说明=css过渡css写好触发->改变属性+ a...

网友评论

      本文标题:CSS总结

      本文链接:https://www.haomeiwen.com/subject/oysuvqtx.html