我的前端之路 (css篇)

CSS基础篇

第一章

---

---

前言

随着前端架构的不断发展，CSS这门技术也越来越重要，很多人都开启了CSS的学习之旅，本文就介绍了CSS学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS是什么？

CSS是Cascading Style Sheet的缩写，层叠样式表，是一种用来表现文件样式的计算机语言。

---

二、css能做什么

简单来说就是装饰html、排版布局，但又可以细化为以下几点

1.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。

3.CSS拥有对网页对象和模型样式编辑的能力。

4.在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。

---

三、怎么做？

1.内联样式

顾名思义，内联样式可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

<div style="color: red;">这是div</div>
//缺点：把样式和html标签混合在一起，可读性教差

2.局部样式

局部样式可称为内部CSS或者页级CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。

 <style type="text/css">
     div {
         width: 65px;
         height: 20px;
         border: 1px solid;
         background: greenyellow;
         }
 </style>

3.外联样式

外联样式可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可，可维护性好；并且外联CSS是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联CSS和页级CSS，省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。

　　(1)link:
　　<link rel="stylesheet" type="text/css" href="*.css" />
　　
　　(2)@import:
　　<style>
　　  @import url("*.css");
　　</style>
// 那么有人可能会问了？ 这里有两种方式？ 他们有什么区别呢？ 、

  link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等
  @import是CSS提供的语法规则，只有导入样式表的作用
// link语法格式中，rel指的是关联(relation)，type指的是类型，href指的是链接文件路径。
// link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。

//加载顺序
  加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载

//兼容性
  link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法
  故老版本浏览器（IE5之前）不能识别

//可操作性
  可以通过JS操作DOM，来插入link标签改变样式
  因为DOM方法是基于文档的，所以无法使用@import方式插入样式
  
link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。
对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好
而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式
如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。
**并且在同一个页面中，调用两种方式，link永远比@import优先级高**。

在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；
使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，
并且需要放置在页面的底部，不会影响自己的网站。

---

四、样式的选择器

1.什么是选择器?

（1）Css属性选择器又被称为css样式属性、css选择器

（2）选择中标签的某个元素，然后給它添加上相应的样式

2.选择器的标准结构

选择器{样式}

 div {
      width: 65px;
      height: 20px;
      border: 1px solid;
      background: greenyellow;
      }

3.常见选择器有哪些？

（1）元素选择器

div{
 color: blue;
}
a{
 font-size: 30px;
}

（2）id选择器

<div id="a">div1</div>
<div id="b">div2</div>
//css
#a{
 color: red;
}
#b{
 color: blue;
}

（3）类选择器(class)

<div class="a">div1</div>
<div class="b">div2</div>
//css
.a{
 color: red;
}
.b{
 color: blue;
}

（4）id选择器和类选择器(class)的区别

1，w3c规定，一个页面只能使用一次同一个id，而class可以使用多次

2，不能多个id同时作用于一个元素，而class可以

<div id="a b">div1</div>
<div class="a b">div4</div>
**w3c规定，块级元素比行内元素高级，块级元素不能放在行内元素的里面**

---

（5）后代选择器

ul li{
 color: red;
}
ul li a{
 color: red;
}

（6）指代选择器

//控制第一个li
ul li:nth-child(1){
 background: blue;
}
//控制奇数的li
ul li:nth-child(odd){
 background: blue;
}
//控制偶数的li
ul li:nth-child(even){
 background: blue;
}

（7）连接选择器

div+p+div+p{
 background: blue;
}

（8）属性选择器

a[href="www.baidu.com"]{
 background: blue;
}
//以cn为结尾的选择器
a[href$="cn"]{
 background: blue;
}
//以www为开头的选择器
a[href^="www"]{
 background: blue;
}

（9）通配符选择器

*{
 color: red;
 margin:0;
 padding:0;
}
// 一般用于设置公共样式

---

五、 选择器的命名规则

1)不能以数字为开头或者纯数字

2)识别大小写

3)特殊符号里面，只有下划线可以使用

4)使用两个英文单词时，两种写法，第一种驼峰式，第二种中划线式

---

六、选择器的优先级

1)同个选择器下后面的样式会覆盖前面的样式

2)作用范围越小，优先级越高

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

总结

以上就是今天要讲的内容，本文仅仅简单介绍了css基础内容的梗概，而ccs库提供了大量能使我们快速便捷地装饰html、排版布局的属性，而我这仅仅简单说明了其的使用方法，剩下的属性样式由于篇幅的问题就不再本篇说明，关于常用的样式属性可以看我之前的文章。如有雷同，纯属意外

指导：JUN

文献来源

《css教程(w3school)》

《我的前端之路》