css学习笔记 — css基本语法

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

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

一、CSS的语法

1.1基本用法

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

div{      
  margin: 0;
  padding: 0;
} 
/*所有的<div>都会被加上该样式，但值得一提的是，若在本次声明后
再次对某一指定<div>进行了声明，则会覆盖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结构为

<div class='a'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

时，可以使用选择器分别对<p>标签进行不同的声明

.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 在<head>标签中添加<style>标签

<head>
  <style>
     *{
        margin: 0;
        padding: 0;
      }
     .nav{
        float: left;
     }
      .
      .
      .
  </style>
</head>

2.2 引用外联样式表

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>

2.3 在标签内直接添加样式

<div class='head' style='width:100px;height:100px;'>
  <p style='font-size:12px;'>我叫小明</p>
</div>
/*使用此方法添加的样式，优先级高于2.1与2.2
在2.1或2.2的属性值后面加入!important，则可提升优先级至最高，且超过2.3的优先级，例如：*/
.nav{
  float: left !important;
}