10分钟梳理css知识点

原创
2018/01/18 15:23
阅读数 63

css 选择器

  • h1 {color:red; font-size:14px;} 元素选择器
  • h1,h2,h3,h4,h5,h6 {color: green;} 选择器分组
  • li strong {font-style: italic;font-weight: normal;} //派生选择器
  • #idStr {color:red;} //id选择器
  • .className {text-align: center} //类选择器
  • [title=W3School] { border:5px solid blue; }// 属性选择器

css 样式创建

  • <link rel="stylesheet" type="text/css" href="mystyle.css" /> //外部样式

  • 内部样式

      <style type="text/css">
        hr {color: sienna;}
        p {margin-left: 20px;}
        body {background-image: url("images/back40.gif");}
      </style>
    
  • 内联样式

      <p style="color: sienna; margin-left: 20px">
      	This is a paragraph
      </p>
    
  • 结合使用时,就近原则!!

css 样式

  • background-color 背景色
  • background-image 背景图片
  • text-indent 首行缩进
  • word-spacing
  • ... 太多了平时积累吧

盒模型

  • 懒的说,理解了就OK
  • border-style 很有趣

css 定位

  • Positioning

    • static
    • relative 相对定位
    • absolute 相对于包含元素绝对定位(父级元素)
    • fixed 相对于window绝对定位
    • float 浮动
      • left 元素向左浮动。
      • right 元素向右浮动。
      • none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
      • inherit 规定应该从父元素继承 float 属性的值。
  • display

    • none 边框无
    • block 块框
    • inline 行内框
    • ...
展开阅读全文
css
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部