CSS基础语法的使用

本篇内容介绍了“CSS基础语法的使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了天桥免费建站欢迎大家使用!

行内样式:就是直接在HTML上写样式,就是HTML上加属性style=””这种形式。如

divcss8

,但是这种方法并不是被我们推荐的,因为不利于实现表现与结构分离。也为后期维护带来很多不必要的困难。我们只需要知道即可。

内嵌样式:针对当前一个网页可以使用的样式,一般写在html的标记中。而且要使用一个示明,我们的样式都要写到这个声明中如下:

代码如下:



我们看一个示例文件为我们段落文字改成红色的:

代码如下:





   divcss8第一示例
   


divcss8


www.divcss8.com




我们在这里又有一个新的知识点。如果我们想给段落添加一个样式的话。我们可以通过两步实现,第一步先找到这个段落,第二步添加CSS样式属性(PS:这些属性咱们现在可以理解为已经提供好的,咱们使用即可)。

那咱们现在就看一下这个CSS选择器:

CSS选择器的分类:

1、 HTML标签选择器
2、 群组选择器
3、 包含选择器
4、 自定义选择器有可以分为两种

a) Class选择器
b) ID选择器

HTML标签选择器:就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。

但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢?当然我们选择器必须结合起来用才可以。

假如我们要为网页中的H2和P的文字都要改成红色的,怎么办呢?这时候群组选择器就派上用场了。我们看个示例文件

代码如下:





   divcss8第一示例
   


divcss8


divcss8提供CSS基础教程



HTML标签选择器:就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。
但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢?当然我们选择器必须结合起来用才可以。
假如我们要为网页中的H2和P的文字都要改成红色的,怎么办呢?这时候群组选择器就派上用场了。我们看个示例文件

代码如下:





   divcss8第一示例
   


divcss8


divcss8提供CSS基础教程



语法规范就是

选择器,选择器{属性:属性值;}
总结:我们记得只要我们CSS属性一致的时候,都可以使用群组选择符。

包含选择器:找到含有的内容,就像我们HTML中UL LI a(PS:列表上加链接) 这种形式,如果我们要为列表中链接添加样式。这时候我们就能使用包含选择器

代码如下:





divcss8第三示例




我不会被改变

/body>

语法规范是:

选择器 选择器{属性:属性值;}

注意:这里面是空格隔开的 HTML中的父级空格HTML中的子级

自定义选择器

引入:如果网页中有多个P标签,我们想为其中某一个P添加样式。该怎么办呢,之前的选择器都不能满足。

ID选择器:为网页中某一个标签添加属于自己的选择器,而且规范要求我们这个ID名称的选择器只能使用一次。(PS:也是为了以后JS好调用)

代码如下:





   divcss8.com示例
   




我不会被改变


语法规范就是:

#选择器名称{CSS属性:属性值;}
而在HTML中就是 id=”选择器名称”


在上面我们讲到了自定义ID选择器,为了以后JS获取内容方便,所以说我们只能使用一次。如果CSS代码想多次重复使用怎么办呢。那么就时候就可以用自定义的class选择符。

我们看一个下面这个示例:

代码如下:





   divcss8.com class选择器示例
   




我不会被改变


那么这两个项目列表都会发生变化。并且还要注意的就是CLASS选择符可以一次使用多个。在每个名称后边加一个空格即可,如 class=”diyi  clear”这样就可以了。

还有一种选择符就是通用选择符是可以针对所有HTML标签应用如下:

代码如下:

*{padding:0px;margin:0px;}

这个我准备放到布局时在详细讲解。

咱们一直使用的都是内嵌样式,我们现在学习一个新的引入CSS样式的方式,也是我们日后经常用的链接样式。

使用链接样式有什么好处呢:

为了SEO方便,如果直接使用内嵌样式。那么会造成蜘蛛在爬行的时候,要爬行很多CSS代码
如果我们的样式需要针对网页中的多个文件应用。而内嵌明显不太适合,这时候就得用到我们讲的链接样式了。

语法格式:

代码如下:



最关键的是href需要大家改成自己写的CSS样式文件

总结:通过使用链接的方式这样就实现了我们之前所说的HTML与CSS的分离。如果想更换网页的风格,只需要更换CSS样式文件即可。大家可以百度搜一下CSS禅意花园。Html是固定的通过更换的CSS样式文件,可以看到不同的风格的网页。也是新手学习CSS推荐看的编码,样式文件。

样式文件的优先级:

代码如下:


行内样式 > 内嵌样式 > 链接样式 > 导入样式


咱们通过一个实例认识一下

代码如下:





   divcss8示例
   
   


www.divcss8.com




Divcss.css文件

代码如下:


p{color:#0f0;font-weight:bold;}


总结:行内样式,内嵌样式以及链接样式分别对P中的实现了样式的更改。由于行内样式的优先级比较高所以最终结果显示红色。

大家还需要注意的是后面的样式会覆盖上边的样式。

CSS选择器命名

CSS选择器命名要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法,我们下边分别看一下:

骆驼命名法:指混合使用大小写字母来构成,也是为了以后工作中有一个团队交流中比较方便。它的特点如下:

第一个单词以小写字母开始;第二个单词的首字母大写或每一个单词的首字母都采用大写字母,例如:myFirstName

帕斯卡(pascal)命名法:

此CSS命名规则与骆驼命名法类似。只不过骆驼命名法是首字母小写,而帕斯卡命名法是首字母大写

匈牙利命名法:名称前面加上一个或多个小写字母作为前缀

red_navMenu

“CSS基础语法的使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


名称栏目:CSS基础语法的使用
URL网址:http://cdiso.cn/article/pocsco.html

其他资讯