前端学习--CSS引入方式、常见样式及选择器

本部分内容我用思维导图画了下，感觉看那个也很方便(不知道这链接啥时候失效)： CSS引入方式、常见样式及选择器

引入方式

CSS引入方式分为三种：外部样式表、内部样式表、内联样式表

• 外部样式表

  <link rel="stylesheet" href="CSS/first.css">
  

• 内部样式表（style部分）

  <style>
  	div{
         width: 100px;
         height: 100px;
         background-color: red;
   	}
  </style>
  

• 内联样式表（body部分）
  在body部分直接针对这一条语句添加样式

  <div style="width: 200px;height: 100px; background-color: blue;">内联样式</div>
  

---

常见样式

• 背景
  常用设置有：

背景色 background-color:10px;
背景图 background-image:url(01.img);
背景图片尺寸 background-size:10px;
背景图片重复方式 background-repeat:repeat-x;(设置是水平重复还是垂直重复)
背景图片位置 background-position:top center;(第一个位置表示X轴，第二个表示Y轴)

• 文本
  常用设置有：

字体大小 font-size:10px;
字体颜色 color:blue;(颜色有三种设置方式，这里不细说)
字体样式 font-family:“Microsoft yahei”;
对齐方式 text-align:center;(居中对齐)
首行缩进 text-indent:2em;
字体间距 letter-spacing:10px;
文本装饰线 text-decoration:line-through;(_就像这样)
文本大小写字母 text-transform:capitalize;

---

常用选择器

这东西多练练就可以了，直接上图