认识css以及如何在html中引入css

作者:fandonglai日期:2016-09-07 15:36:47 点击:636 css

初识css

  • 我们用html主要用来填充页面中的内容,那css有什么作用呢?css主要用来美化页面,调整页面结构的。
  • 在html中,文本的样式可以使用一写特定的标签,比如粗体用<b></b>,也可以直接在标签内部调整标签的大小,但是样式散落在html标签中,使得内容和样式的代码混杂在一起,难以区分。解决的方法就是改用—CSS
  • 我们将html和css分离,有利于对内容进行统一的样式设置和修改。

什么是css

  • CSS(Cascading Style Sheet)即层叠样式表,简称样式表。
  • 样式就是对网页中的内容(比如:文字、段落、图片、列表等)属性的整体概括,即描述所有网页对象的显示形式(例如:文字的大小、字体、背景、文字颜色都是样式)。

css的优点

  • 内容和样式分离,使得网页设计趋于明了、简洁。
  • 弥补html对内容控制的不足,如文字的大小;在html中可控的标题只有6种,即h1~h6,而利用css可以任意设置标题大小。
  • 准确控制网页布局,如行间距、字间距、段落缩进和图片定位等属性。
  • 提高网页效率,因为多个网页同时应用一个css样式,减少了代码的加载量,提高页面加载速度。内容已定,如果css样式不满意,可以随便修改,丝毫不会对内容有影响。
  • css还有很多特殊功能,如鼠标指针属性控制鼠标的形状(cursor: pointer; 将鼠标设置为小手状态)等。

将css代码,引入到html文件中的方式:

  • 1、行内式:

直接在html标签内,插入style属性,在定义要显示的样式,这是最简单的方式。
局限:这样定义的样式只能局限当前标签使用
结构:

    <div style="样式属性:属性值;样式属性:属性值;..."

大家可以练一下 下面这个例子:实现一个宽度200px,高度300px,背景颜色为红色的一个盒子

    <div style="width: 200px;height: 300px;background: red;">我是一个div标签</div>
  • 2、内嵌式

如果我们想让定义的样式在整个页面中起作用怎么办
内嵌式就是这样的作用
内嵌式的形式如下

    <style>
选择符{
css属性: 属性值;
css属性: 属性值;
...
}

</style>

选择符可以用html标签的名称,比如div,所有的html标签都可以作为样式表的选择符

将div中的文字颜色设置为蓝色,字号设置为26px,可以用以下代码实现:

    <style>
div{
color: blue;
/*文字的颜色: 蓝色*/
font-size: 26px;
/*字号 26px */
/*px:像素 css中表示大小的单位*/
}

</style>

注:代码中的 /*内容*/ 里面的内容是css的注释,不会显示在页面中

  • 3、外链式:

一个外部的css文件可以应用于多个html文件。
当改变这个样式表文件时,所有的网页样式都随之改变,因此可以用在多个相同样式的网页中
使用这个方法不仅可以减少重复工作量,而且方便以后的修改和编辑,有利于网站的维护
这个方法也是项目中最常用的方式,这样加载网页时,浏览器一次性将样式全部加载出来,减少代码的重复加载。

     <!-- 外链式:引入css文件-->
<link rel="stylesheet" href="css文件的路径"/>

rel=”stylesheet” 指在html文件中使用的是外链式的css文件
href=”” 引入css文件的路径,可以是相对路径也可以是绝对路径

上一篇: 如何使用css的伪元素

下一篇: html的基本结构