6.样式介绍

            为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css由此思想而诞生,css是Casscading style sheets 的首字母组成,意思是层叠样式表,有了css,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加整洁。

CSS基本语法:

         css定义方法是:

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

选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码如下:

div{

    width:100px;

    height:100px;

    color:red;

}

css页面引入方法:

 

1.外联式:通过link标签,连接到外部样式表到页面中    在head头部编写      实际开发推荐使用

采用CSS样式要首先新建css文件夹,在里面要新建      文件名.css      的样式文件

  /*color: red;*/     代表注释   快捷键CTRL + /

<link rel="stylesheet"  type="text/css" href="css/main.css">   href表示样式的地址

6.样式介绍

6.样式介绍

6.样式介绍

2.嵌入式:通过style标签,在网页上创建嵌入的样式表。    ---不推荐使用,首页可以使用,提升体验度

<style>

div{

    width: 100px;

    height: 100px;

    color: red}

</style>

6.样式介绍

3.内联式:通过标签的style属性,在标签上直接写样式。 ---不推荐使用

<div style="width:100px; height:100px; color:red"> ....  </div>

6.样式介绍