拉勾教育CSS学习笔记3.5

CSS

	今明两天将对CSS层叠样式表(cascading style sheets) 进行一个初步的学习和认识，3月5日主要学习了样式表的集中编程方式，语法规则以及常用属性，3月6日将学习css的几个重要的选择器以及继承性和层叠性。

1.css规则

css规则主要由两个主要的部分组成：选择器，以及一条或多条声明

	p {width: 300px;font-size: 14px;}

p:选择器-----功能：选择所有的 p标签

width/font-size:属性名

14px：属性值

根据书写位置不同，css代码有四种书写方式：内联式、内嵌式、外联式、导入式。

• 内联式（不常用）

在HTML标签的style属性中书写css样式

	<div style="width: 100px; height: 100px;font-size: 14px">1</div>

将多条进行书写，分号分隔，最后总成形成style属性。

内联式有不少缺点

1. 内联式必须写在标签上，没有完全脱离HTML标签
2. css样式代码让标签结构繁重，不利于HTML结构的解读
3. 一个内联样式的css只能给一个标签使用，若多个标签使用相同的样式需要重复书写，大大增加代码量

• 内嵌式

在HTML文件的标签内添加一个内嵌的标签

	<style type="text/css">
	p {width: 300px;font-size: 5px;}
	</style>

内嵌式优缺点

优点：

1. 实现了样式和结构的初步分离，css只负责样式，html只负责结构
2. 多个标签可用一段代码设置，相对于内联式减少代码量

缺点：

1. 结构和样式并没有完全分离，代码依旧书写在HTML文件的style标签内部
2. css样式并不能在其他html文件中使用
3. 在css样式中如果代码太多，会导致文件头重脚轻

• 外联式

  书写位置：在一个单独的扩展名为.css的文件中。书写方式和内嵌style中的代码格式一样（不需要在添加style标签了，标签属于html语法）

  使用方法：先写css文件，再引用。

  引入标签：

  引入属性：rel（引入的外部文件和HTML之间的关系），href（路径），type（html5中可省略不写）

  <link rel="stylesheet" href="ex1.css">
  

  外联式优点多多：

  1. html和css完全分离
  2. 可以在很多html文件中使用,并且一带多，大大减少代码量
  3. 一个HTML文件可以引入多个CSS文件，实现一个页面中的css代码分层

• 导入式（不常用）

  书写位置：在内嵌样式表

实际应用中，小型案例可以使用内嵌式css，而实际工作、大型网站项目推荐使用外联式css，内联式和导入式不推荐使用。

2.CSS书写规则

以内嵌式为例，外联同理，书写规则如下：

• 要在head标签内部加style，所有css代码必须位于style标签内
• 选择器必不可少，要先选中标签再操作样式
• css样式的属性，属性名和属性值的键值对的写法是k：v；（最后的；很重要）
• 给一个标签添加的所有样式，必须在选择器后面的{}内部罗列。

书写css代码时要注意的注意事项：

• 分号必须要有，如果不写会导致后面代码的加载错误。
• Css中所有属性与属性之间对空格换行缩进不敏感。

css添加注释：

• 书写方式：/*xxxxx*/

3.代码风格

一个老鸟的代码风格除了让你更装b老道之外，还让你的代码效率更高，更具可读性。代码首先是给人读的，其次才是给机器读的，因此你需要注意以下几点：

• 合理运用展开格式（开发过程中）和紧凑格式（上传过程中），会用网上的工具对二者进行转换
• css代码不区分大小写，但除了特殊情况外，我们建议你使用小写
• 空格规范：在选择器和大括号之间保留一个 空 格
• 属性名和属性值之间最好有个空格，也就是在冒号后面。

4.css常用属性

• 颜色名

  color的几种表示方法（颜色名英文，颜色值rgb坐标，十六进制）

• 字体描述

  k值是font-family,属性值必须包裹在一对"引号"中，内容为字体名称。

  p{
  
        font-family:"Microsoft Yaheis";
  
      }
  

  常用的中文字体有宋体(SimSun)、微软雅黑(Microsoft Yahei),常见的英文字体Arial,consolas,设置字体属性不同浏览器有自己的默认字体。

  要注意字体的顺序查找机制，并且利用顺序搜索机制做好备用字体的备份工作。

  p{
  
        font-family:"fang zheng","Arial","Microsoft Yaheis" ;
  
      }
  

  将用户设备中普遍存在的宋体和arial放到不常用的花字fangzheng后面，起到备用作用。

  注意：一般来说，因为中文包内包含英文，所以一般将英文包放在前面，中文包放在后面。不过也要根据工作的实际情况来决定。

• 字号

  font-size

   font-size:288px;
  

  网页中最小设置字号必须是12px，低于12px会出现兼容问题，在网页中普遍使用14px+，同时要注意尽量使用偶数字号

5.盒子实体化三属性

width

height

background-color

达到了在文字下面的一个box效果