css基本语法简单介绍

Posted 2020-06-09

css基本语法简单介绍:
本章节介绍一下css的基本语法，比较适合于初学者阅读，对于稍有经验的人员来说，几乎没有太多帮助，可以略过。
使用css的方式主要以下三种:

1.行内样式
2.内嵌样式
3.外联样式

当然可能不同的教材中的名称有所不同，不过实质都是一样的，不必太过纠结。
下面分别介绍一下上面三种方式的使用。
一.行内样式:
所谓的行内样式就是通过标签的style属性，将css代码写在标签之内，代码如下:

<div style="color:blue">softwhy.com</div>

优点是使用简单，缺点也是非常的明显，违背了表现与内容分离的原则，所以不推荐使用。
二.内嵌样式:
内嵌样式就是讲css代码写到<style>标签之中，代码如下:

<style type="text/css">
div{
  font-size:12px;
  color:green;
}
</style>

通常情况下<style>标签要放在头部，当然也可以放在其他的地方。此中方式的应用的有点也是非常的简单方便，但是如果css代码较多的话，就会使页面非常的庞大。
三.外联样式:
外联样式，就是将一个css文件引入当前页面，代码如下:

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

当css代码较多的时候，推荐使用此方式。
四.常用选择器:
当然常用的选择器有很多中，因为本章节是针对的初学者，所以介绍一下最为基础和常用的选择器。

1.html标签选择器
2.群组选择器
3.包含选择器
4.Class选择器
5.ID选择器

这里就不一一介绍了，可以参阅相关文章即可。
相关阅读:
1.标签选择器可以参阅CSS的类型选择符(E)一章节。
2.群组选择器选择器可以参阅CSS的选择器分组一章节。
3.包含选择器选择器可以参阅CSS的包含选择符(E F)一章节。
4.class选择器可以参阅CSS的class选择符一章节。
5.id选择器可以参阅CSS的id选择器一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15647

更多内容可以参阅:http://www.softwhy.com/divcss/