css学习笔记 — css基本语法

如果说HTML给一个网页赋予了骨架，那么CSS便可以赋予其灵魂。

此篇分为两部分
- css的语法
- css的引用

一、CSS的语法

1.1基本用法

• 对HTML中的某一种标签进行描述

div{      
  margin: 0;
  padding: 0;
} 
/*所有的
都会被加上该样式，但值得一提的是，若在本次声明后
再次对某一指定
进行了声明，则会覆盖or追加新的效果*/

• 对HTML中，包含指定class的标签进行描述

.text_a{
  font-size: 12px;
  color: red;
}

• 对HTML中，某一指定（包含ID 的）标签进行描述

#password{
  font-size: 12px;
}

1.2 加入HTML层级关系

• 用HTML层级关系，告别起名的忧伤

.head{
  width: 50px;
  height: 50px;
}
.head>ul{
  width: inhert;
} 
.head>ul>li{
  font-size: 12px;
}

• 将HTML中的层级关系，展现在css中

.a{
  width: 50px;
  height: 50px;
}
  .a .b{
    width: inhert;
  } 
      .a .b .c{
        font-size: 12px;
      }

1.3 :nth-child(n)选择器

当HTML结构为

  
1
  
2
  
3

时，可以使用选择器分别对

标签进行不同的声明

.a{
  text-aline: center;
}
.a p:nth-child(1){
  font-size: 12px;
}
.a p:nth-child(2){
  font-size: 14px;
}
.a p:nth-child(3){
  font-size: 16px;
}

:nth-child()选择器也可以套用(an+b)公式,详情参考此处

1.4 :after 选择器

• 对指定class进行追加描述

.clearFix::after{
  content: '追加文字内容';
  clear: both;
  display: block;
}
/*当content的值赋为空时，它就是一个很好用的闭包浮动样式（清除浮动）*/

【1.3与1.4均为css伪类，还有很多伪类属性，更多属性值参考此处】

二、在HTML中引入CSS

2.1 在标签中添加

2.2 引用外联样式表

2.3 在标签内直接添加样式

  
我叫小明

/*使用此方法添加的样式，优先级高于2.1与2.2
在2.1或2.2的属性值后面加入!important，则可提升优先级至最高，且超过2.3的优先级，例如：*/
.nav{
  float: left !important;
}