简单的CSS知识

CSS是建站过程中必须要用到的知识,今天就来简单讲讲

1.CSS是什么: CSS即层叠样式表,是控制网页样式的一种语言。目前流行的网页结构就是DIV+CSS的结构,DIV是块级元素。DIV+CSS就是将页面像切豆腐一样切成一块块的,然后用CSS来控制DIV的位置,高度等效果。在GG首页,chrome浏览器右键选择检查,页面下方就会打开一个窗口,在左边elements里面是页面的原代码,右边styles里面是页面的css代码

简单CSS

2.CSS调用方法:

1)内部嵌入,较少的CSS可以直接写在html或PHP等网站源代码中,如下图

简单的CSS代码

2)外部导入,当CSS较多时,一般采用外部调用的模式,如下图

简单的CSS代码

3.CSS语法:

CSS的基本语法为

选择器{属性1:值;   属性2:值; 属性3:值; }

选择器就是CSS要应用的对象,它可以是class(类),也可以是ID,也可以是body, p等Html 标签,也可以是派生的,如.product img{},意思是对product这个类下面的图片进行控制

属性就是选择器的特性,像人的高,体重,性别,视力等
就是对应属性的值,像姚明的身高为225CM,体重 130KG,这些都是值

选择器可以有一个属性,也可以有多个属性

4.选择器的符号:

如果是class,那应该在前面加一个dot,如  .product{}
如果是 ID,那应该是前面加一个#,如#main{}

如果是html的标签,不需要加任何符号 ,如body{}, p{}, h2{}

注意:同一个页面源代码中,只允许出现一次ID,ID就像人的身份证,每一个人都是独一无二的,不允许有重号,但CSS中可以反复出现;

5. 实例讲解:

源代码部(只保留了DIV部分):

<div class="product" id="pro">  //这里是类为product, ID为pro的DIV
<img class="pic1" src="https://www.baidu.com/img/bd_logo1.png" />  //这里是类为pic1的图片

<img class="pic2" src="https://www.baidu.com/img/bd_logo1.png" />  //这里是类为pic2的图片
</div> //div结束标签

CSS部分:

.product img{max-width:20%;max-height:20%;} //控制类这里面的所有图片的宽和高为20%
.product .pic1{opacity:0.8;float:left;} //控制第一张图片的不透明度为80%,并向左浮动
.product .pic2{opacity:0.1;float:right;} //控制第二级图片的不透明度为10%,并向右浮动

点此查看效果

6. 网页效果的调试(chrome浏览器)

很多朋友对WP主题默认的一些设置都不太满意,想要做一些修改但是不知道怎么修改,今天就讲一下如何在前台调试AVADA的页面,这个方法对于所有的网页都是有效的

1)  如下图,这个是AVADA底部使用custom menu(最新版本中叫navigation menu )生成的产品分类,很多人觉得它分类之间的间隔太大了,现在我们就把它调小一点

简单的CSS代码

2)  先在led flood light上右键,点击检查,下方会弹出一个窗口,左边elements是原代码,右边styles是对应的CSS代码; 而光标放到一句代码上面,页面对应的部分也会加上阴影,表示这句代码产生作用的区域。

简单的CSS代码

简单的CSS代码

3) 上一步操作后,光标自动定位到LED  FLOOD LIGHT的部分,但是上下左右的区域并没有加上阴影, 说明这一句代码并不是控制分类上下间隔的代码,所以我们点击这段代码的上一级,即<li id...这一句,可以看到上方LED FLOOD LIGHT的阴影部分增加了,说明这一段就是控制分类间隔的代码。

简单的CSS

 

4)  找到对应的代码,接下来我们就要去找到控制间隔的CSS代码啊,在右侧会出现所有跟这一句源代码相关的CSS,我们一个个的查看,发现了.fusion-widget-area .widget_nav_menu li这一处CSS中有控制上下左右边距的代码,那么就在这里直接修改

简单的CSS

 

5) 在padding上面点击一下即可编辑,padding:10px 10px 10px 12px修改为padding:5px 10px 5px 12px,即上下的间隔由原来的10PX变成5PX,左右间隔不变,可看到页面上的分类间隔都缩小了

简单的CSS

简单的CSS

6) 调试成功说明我们找到正确的CSS,这一段代码中有一句是亮色的,其他的是暗色的; 亮色表示起作用的CSS,暗色表示不起作用的CSS,我们复制亮色的CSS代码,并写入修改后的代码,.fusion-widget-area .widget_nav_menu li{paddding:5px 10px 5px 12px!important;}, 把这段代码放入WP后台- avada -theme options -custom css中,并保存即可生效。

!important是最高优先级的代码,当原CSS中已经有相应的设置时,你修改后加了!important就说明这个优先级最高,才能生效。

简单的CSS

以上就是简单和常用的一些CSS知识,对CSS感兴趣想深入学习的朋友,可以进http://w3school.com.cn 自学。

Summary
简单的CSS知识
Article Name
简单的CSS知识
Description
简单的CSS知识介绍 ,并讲解如何通过Chrome浏览器查看网源的源代码和CSS并用实例讲解对网页的效果进行调试
Author
Publisher Name
Hunk外贸建站营销博客
Publisher Logo

4 条评论在 “简单的CSS知识”

  1. 哈哈,hunk,用你的方法做一些局部设置,真的是好方便啊,再也不用把theme option的设置翻个底朝天了,而且翻了有时候还找不到,新技能get.

发表评论

电子邮件地址不会被公开。 必填项已用*标注