前端 CSS基础理论总结（一）

CSS

• 层叠样式表
• css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
• 所谓层叠，可以将整个网页相象成是一层一层的结构，层次高的将会覆盖层次低的
• 而css就可以分别为网页的各个层次设置样式

基本语法

• CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成
• 语法：
  • 选择器{样式名：样式值；样式名：样式值}
  • P{color:red;font-size:12px;}

行内样式

• 可以直接将样式写道标签内部的style属性中，这样样式不用填写选择器，直接编写声明即可

<p style="color:red;font-size:30px"></p>

• 这种方式编写简单，定位准确。但是由于直接将CSS代码写道了html标签的内容，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用

内部样式表

• 可以直接将样式写到< style >标签中

<style>
	p{
		color:red;font-size:30px;
	}
</style>

• 这样使CSS独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式
• 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用

外部样式表

• 可以将所有的样式保存到一个外部的CSS文件中，然后通过< link >标签将样式表引入到文件中

<link rel="stylesheet" type="text/css" href="style.css">

• 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式

选择器

• 元素选择器
  • 元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素
  • 语法：标签名{ }
  • 比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签
• 类选择器
  • 类选择器，可以根据元素的class属性值选取元素
  • 语法：.className{ }
  • 比如.hello会选中页面所有class属性为hello的元素
• ID选择器
  • ID选择器，可以根据元素的id属性值选取元素
  • 语法：#id{ }
  • 比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性使不能重复的
• 复合选择器（交集选择器）
  • 符合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素
  • 语法：选择器1选择器2{ }
  • 例如div.box1会选中页面中具有box1这个class的div元素
• 群组选择器（并集选择器）
  • 群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式
  • 语法：选择器1，选择器2，选择器3{ }
  • 比如p,hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素
• 通用选择器
  • 通用选择器，可以同时选中页面中的所有元素
  • 语法： *{ }
• HTML族谱
  

标签之间的关系

• 祖先元素
  • 直接或间接包含后代元素的元素
• 后代元素
  • 直接或间接被祖先元素包含的元素
• 父元素
  • 直接包含子元素的元素
• 子元素
  • 直接被父元素包含的元素
• 兄弟元素
  • 拥有相同父元素的元素

后代选择器

• 后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式
• 语法：祖先元素 后代元素 后代元素{ }
• 比如p strong会选中页面中所有的p元素内的strong元素

课后扩展

• 内联框架

<iframe src=""  name=""></iframe>

   其中src使用的是相对路径

• 居中标签< center >< /center>
• 锚链接（具体操作可以根据下一章内容查看）