10分钟梳理css知识点

2019独角兽企业重金招聘Python工程师标准>>>

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 行内框
  • ...

转载于:https://my.oschina.net/KJhulinhua/blog/1609127