今天小编跟大家讲解下有关css基础教程之CSS基础语法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css基础教程之CSS基础语法 的相关资料，希望小伙伴们看了有所帮助。
我们学习CSS要明白一个重要的问题 CSS主要是解决与实现表现（CSS）与结构（HTML）的分离。我们编写完HTML之后 如何通过CSS对HTML实现控制呢。
1、行内样式2、内嵌样式3、链接样式4、导入样式
我们这一节课的示例就先从行内样式开始
行内样式：就是直接在HTML上写样式 就是HTML上加属性style=””这种形式。如<p style=”color:#f00”>divcss8</p> 但是这种方法并不是被我们推荐的 因为不利于实现表现与结构分离。也为后期维护带来很多不必要的困难。我们只需要知道即可。
内嵌样式：针对当前一个网页可以使用的样式 一般写在html的<head></head>标记中。而且要使用一个示明 我们的样式都要写到这个声明中如下：复制代码代码如下:<style type=”text/css”>写我们的样式</style>我们看一个示例文件为我们段落文字改成红色的：复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>divcss8第一示例</title> <style type="text/css"> p { color:#f00; } </style></head><body><p>divcss8</p><h2>www.divcss8.com</h2></body></html>我们在这里又有一个新的知识点。如果我们想给段落添加一个样式的话。我们可以通过两步实现 第一步先找到这个段落 第二步添加CSS样式属性（PS：这些属性咱们现在可以理解为已经提供好的 咱们使用即可）。
那咱们现在就看一下这个CSS选择器：
CSS选择器的分类：
1、HTML标签选择器2、群组选择器3、包含选择器4、自定义选择器有可以分为两种
a)Class选择器b)ID选择器
HTML标签选择器：就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。
但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢 当然我们选择器必须结合起来用才可以。
假如我们要为网页中的H2和P的文字都要改成红色的 怎么办呢 这时候群组选择器就派上用场了。我们看个示例文件复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>divcss8第一示例</title> <style type="text/css"> h2,p { color:#f00; } </style></head><body><p>divcss8</p><h2>divcss8提供CSS基础教程</h2></body></html>
HTML标签选择器：就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢 当然我们选择器必须结合起来用才可以。假如我们要为网页中的H2和P的文字都要改成红色的 怎么办呢 这时候群组选择器就派上用场了。我们看个示例文件复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>divcss8第一示例</title> <style type="text/css"> h2,p { color:#f00; } </style></head><body><p>divcss8</p><h2>divcss8提供CSS基础教程</h2></body></html>
语法规范就是
选择器,选择器{属性:属性值;}总结：我们记得只要我们CSS属性一致的时候 都可以使用群组选择符。
包含选择器：找到含有的内容 就像我们HTML中UL LI a（PS：列表上加链接） 这种形式 如果我们要为列表中链接添加样式。这时候我们就能使用包含选择器复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><title>divcss8第三示例</title><style type=”text/css”>ul li a{color:#f00;}</style></head><body><ul><li><a href=”#”>项目编号1</a></li><li><a href=”#”>项目编号2</a></li></ul><a href=”#”>我不会被改变</a></p><p>/body></html>
语法规范是：
选择器 选择器{属性:属性值;}
注意：这里面是空格隔开的 HTML中的父级空格HTML中的子级
自定义选择器
引入：如果网页中有多个P标签 我们想为其中某一个P添加样式。该怎么办呢 之前的选择器都不能满足。
ID选择器：为网页中某一个标签添加属于自己的选择器 而且规范要求我们这个ID名称的选择器只能使用一次。（PS：也是为了以后JS好调用）复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>divcss8.com示例</title> <style type="text/css">#diyi li a{color:#f00;} </style></head><body><ul><li><a href="">项目编号1</a></li><li><a href="">项目编号2</a></li></ul><ul id="diyi"><li><a href="">项目编号1</a></li><li><a href="">项目编号2</a></li></ul><a href="">我不会被改变</a></body></html>
语法规范就是：
#选择器名称{CSS属性：属性值;}而在HTML中就是 id=”选择器名称”
在上面我们讲到了自定义ID选择器 为了以后JS获取内容方便 所以说我们只能使用一次。如果CSS代码想多次重复使用怎么办呢。那么就时候就可以用自定义的class选择符。
我们看一个下面这个示例：复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>divcss8.com class选择器示例</title> <style type="text/css">.diyi li a{color:#f00;} </style></head><body><ul class="diyi"><li><a href="">项目编号1</a></li><li><a href="">项目编号2</a></li></ul><ul class="diyi"><li><a href="">项目编号2</a></li><li><a href="">项目编号3</a></li></ul><a href="">我不会被改变</a></body></html>那么这两个项目列表都会发生变化。并且还要注意的就是CLASS选择符可以一次使用多个。在每个名称后边加一个空格即可 如 class=”diyi clear”这样就可以了。
还有一种选择符就是通用选择符是可以针对所有HTML标签应用如下：复制代码代码如下:*{padding:0px;margin:0px;}
这个我准备放到布局时在详细讲解。
咱们一直使用的都是内嵌样式 我们现在学习一个新的引入CSS样式的方式 也是我们日后经常用的链接样式。
使用链接样式有什么好处呢：
为了SEO方便 如果直接使用内嵌样式。那么会造成蜘蛛在爬行的时候 要爬行很多CSS代码如果我们的样式需要针对网页中的多个文件应用。而内嵌明显不太适合 这时候就得用到我们讲的链接样式了。
语法格式：复制代码代码如下:<link type="text/css"rel="stylesheet"href="https://www.aidi.net.cn//css/css.css"/>最关键的是href需要大家改成自己写的CSS样式文件
总结：通过使用链接的方式这样就实现了我们之前所说的HTML与CSS的分离。如果想更换网页的风格 只需要更换CSS样式文件即可。大家可以百度搜一下CSS禅意花园。Html是固定的通过更换的CSS样式文件 可以看到不同的风格的网页。也是新手学习CSS推荐看的编码 样式文件。
样式文件的优先级：复制代码代码如下:行内样式 > 内嵌样式 > 链接样式 > 导入样式咱们通过一个实例认识一下复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>divcss8示例</title> <style type="text/css"> p{color:#666;font-size:24px;} </style> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//css/divcss.css"/></head><body><p style="color:#f00;">www.divcss8.com</p></body></html>Divcss.css文件复制代码代码如下:p{color:#0f0;font-weight:bold;}总结：行内样式 内嵌样式以及链接样式分别对P中的实现了样式的更改。由于行内样式的优先级比较高所以最终结果显示红色。
大家还需要注意的是后面的样式会覆盖上边的样式。
CSS选择器命名
CSS选择器命名要有三种：骆驼命名法 帕斯卡命名法 匈牙利命名法 我们下边分别看一下：
骆驼命名法：指混合使用大小写字母来构成 也是为了以后工作中有一个团队交流中比较方便。它的特点如下：
第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母 例如：myFirstName
帕斯卡（pascal）命名法：
此CSS命名规则与骆驼命名法类似。只不过骆驼命名法是首字母小写 而帕斯卡命名法是首字母大写
匈牙利命名法：名称前面加上一个或多个小写字母作为前缀
red_navMenu
以上命名并不是说特定使用哪一个。主要是让你写的CSS代码得让别人一看显得很专业。很明白。在下边我给大家分享一些网上总结好的命名规范。
大家学了这么多选择符了。给大家考试一下：请大家说出如下选择符会选择什么对象。答案会在下篇课程中公布。
问题：
1、h1 .p1{}2、#content h1{}3、 h1 .p1 #content h14、h1#content h2{}
来源：爱蒂网
