CSS 层叠样式表 选择器简介

CSS 层叠样式表是前端不可或缺的一部分
下面是一些 CSS 的学习笔记，希望可以帮到大家。

What is CSS ?

• CSS是层叠样式表(Cascading Style Sheets)的简称。有时我们也称之为CSS样式表或级联样式表。CSS和HTML一样都是一种标记语言。CSS主要用于设置HTML页面中的文本内容（字体大小。对齐方式等）。图片的外形（宽，高边框样式边距等）以及版面的布局和外观显示样式。CSS让我们的网页更加丰富多彩，布局更加灵活自如。

• CSS规则由两个主要部分构成：选择器以及一条或多条声明。

  • 选择器适用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
  • 属性和属性值以“键值对”的形式出现。
  • 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。
  • 属性和属性值之间用英文”:”分开。
  • 多个键值对之间用英文”;”进行区分。
    

• CSS代码风格

  • 样式格式书写：

    • 展开格式书写，更加直观可读。
    • 建议样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
    • 属性值前面，冒号后面，保留一个空格、选择器（标签）和大括号中间保留一个空格

    h3 {
    		color: pink;
    		font-size: 20px;
    }
    

CSS选择器

标签选择器

• 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

类选择器

• 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在HTML中以class属性表示。在CSS中，类选择器以一个点“.”号表示。基本语法如下：

  .类名 {
  	属性1： 属性值1；
  	...
  }
  

  //例如：将所有拥有red类的HTML元素均设置为红色
  .red {
  	color: red;
  }
  

• attention:

  • 类选择器使用”.”（英文点号）进行标识，后面紧跟类名（自定义，自己命名，但是避免使用关键字。）
  • 长名称或词组可以使用中横线来为选择器命名
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示
  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。
  • 类命名规范：

头：header	页面外围控制整体布局宽度：wrapper
内容：content/container	左右中：left right center
尾：footer	登陆条：loginbar
导航：nav	标志：logo
子导航：subnav	下载：download
侧栏：sidebar	广告：banner
栏目：column	页面主体：main
搜索：search	热点：hot
友情链接：friendlink	新闻：news
页脚：footer	菜单：menu
版权：copyright	子菜单：submenu
滚动：scroll

- 记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。

• 应用示例：
  

• 多类名

  • 我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。
  • 多类名使用方式
    <div class=”red font20”>内容</div>
    在标签class属性中写多个类名，多个类名中间使用空格隔开。

  id 选择器

  • id选择器可以为标有特定 id 的HTML元素指定特定的样式。
  • HTML元素以id属性来设置 id 选择器。CSS中 id 选择器以”#”来定义，基本语法如下：

  #id名 {
  	属性1: 属性值;
  	...
  }
  
  

  //例如，将id为nav元素中的
  	内容设置为红色
  #nav {
  	color: red
  }
  

• 口诀：样式#定义，结构ID调用。只能调用一次，不可重复调用。（因为使用JavaScripe时，重复调用会出错）

• id 选择器和类选择器的区别

• 类选择器好比名字，一个人可以有多个名字，同一个名字也可以被多个人使用。

• id选择器好比人的身份证号码，是唯一的，不可重复使用

• id选择器和类选择器最大的不同在于使用次数上。

• 类选择器在修改样式中用的最多。id选择器一般用于页面唯一性的元素上。经常和 JavaScript 搭配使用。

• 通配符选择器

• 在CSS中通配符选择器使用“*”定义。它表示选取页面中所有元素（标签）。

  * {
  	属性1： 属性值1；
  	...
  }
  

• 通配符选择器不需要调用，自动给所有的元素使用样式，特殊情况才使用。后面介绍使用场景

  * {
  	margin: 0;
  	padding: 0;
  }
  

选择器部分介绍完毕，希望能帮到你。