css知识点扫盲

什么是css 层叠样式表(Cascading Style Sheets)
干嘛用的 让网页的具体内容和样式分离
怎么写 3种方式

• 行内 直接在标签style属性中写。

  11111
  

• 页内 在本网页style标签中写

• 外部样式 在单独的css文件中写 在网页中使用link标签引用

那么问题来了 当有多种写法用于同一个标签上时，怎么办？

css作用规律

• 就近 谁距离标签近，优先使用谁的样式
• 叠加 近的样式表没有设置的属性，可以叠加较远的样式表设置的属性

css选择器

用来找到标签的
类选择器

  /*类选择器*/
  .high{
    color: yellow;
    }
  
11111

id选择器

  /*id选择器*/
  #idselector{
     color: yellow;
    }
  
selector

并列选择器

  h2, p {color:gray;}

属性选择器

  a[href][title] {color:red;}

后代选择器

  div p.test {
        color: purple;
    }

伪类选择器

  a:hover{color: #FF00FF} /* 鼠标移动到链接上 */

CSS 水平对齐

• 使用 margin 属性来水平对齐

  .center
  {
  margin-left:auto;
  margin-right:auto;
  width:70%;
  background-color:#b0e0e6;
  }
  

• 使用 position 属性进行左和右对齐

  .right
  {
  position:absolute;
  right:0px;
  width:300px;
  background-color:#b0e0e6;
  }
  

• 使用 float 属性来进行左和右对齐

  .right
  {
  float:right;
  width:300px;
  background-color:#b0e0e6;
  }
  

• 行内和行内块级在父标签中设置text-align: center;

垂直对齐

子控件的line-height设置和父控件高度一样即可