牛腩之CSS简介_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:52:50
原創
1013 人瀏覽過

        在没有接触CSS之前,我们使用Html写网页是这样写的:

<span style="font-size:18px;">   <title>CSS测试</title>   <center>                                    <!--内容居中显示  -->   <font size="20px" color="red">             <!--设置字体的大小和颜色  -->       <strong>                                <!--字体加粗  -->           <u>                                 <!--加下划线  -->                HTML是一种标记语言             <!--主体内容 -->           </u>       </strong>   </font>   </center></span>
登入後複製

        运行结果如下:


        这样写出来的网页灵活性几乎没有,如果我们要更改网页的显示效果,那么我们就要找到网页源码相应的地方进行修改,如果这样的网页有成千上万个,难道我们就这样一个一个滴慢慢滴去修改吗?NO!

        传统的写法将内容与样式写在了一起,用我们的俗话说就是写死了,可维护性实在是太差了。我们应该想办法让文字内容与其显示的效果的定义分开,这时候CSS来了,它的最大特点就是将Web页面的内容和样式进行分离,从而能够灵活的修改页面显示效果,这个类似于我们之前接触过的配置文件config。具体如何做呢?往下看

        首先要添加一个样式表,如下图所示

 

        然后在StyleSheet1.css里面写如下代码:

<span style="font-size:18px;">body {    font-size :40px;                /*设置字体大小*/    color :blue ;                   /*设置字体颜色*/    text-decoration :underline ;    /*设置字体加下划线*/    font-weight :bold ;             /*设置字体加粗*/    text-align :center ;            /*设置字体居中显示*/}</span>
登入後複製

        之后我们对html文件里的代码进行修改:



        运行结果如下:

 

        这就是所谓的CSS技术,通过在样式表中设置web页面的样式,来控制页面的显示效果,这样如果要更改显示效果的话,我们只需要在样式表中进行相应的修改即可,特别的灵活方便。说到CSS不得不说CSS选择器,根据视频讲解,大致有三种:类选择器,ID选择器和HTML标签选择器。

        类选择器和ID选择器的定义如下图所示:


        最后一种HTML标签选择器,如果你认真看了本文,那么你一定知道如何使用,因为上面CSS举例的时候笔者就是使用的HTML标签选择器,即body{ },花括号内书写具体的样式设置代码。关于各种CSS选择器的使用,将在后续的博文中详细介绍,这里就不再赘述了,本文主要告诉大家什么是CSS,给大家一个直观而形象的说明。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板