< 笔记 > CSS

来源:互联网 发布:数据库中的字典表使用 编辑:程序博客网 时间:2024/06/01 07:54

01 CSS 基础

By Kevin Song

CSS定义:层叠样式表(Cascading Style Sheets),解决html代码对样式定义的重复,提高了后期样式代码的可维护性,增强了网页的效果。

CSS作用:CSS将网页内容显示样式进行分离,提高显示功能

CSS代码格式

  • 属性与属性值之间 分号 隔开
  • 属性与属性之间 冒号 连接
  • 属性值与属性值之间 空格 隔开
选择器名称 {     属性名:属性值;    属性名:属性值 属性值;}

CSS与HTML结合方式

方式一

  • html每个标签中都的style属性
<div style="background-color:#06F;color:#F00">这是一个div区域</div>

方式二:内嵌

  • 定义在< head>标签中的< style>< /style>标签
    • type 属性 该 style 的解析方式
<head>    <style type="text/css">        div {            background-color:#06F;            color:#F00        }    </style></head>

方式三:导入

  • 把CSS代码定义在单独文件里
  • 在第二种方式的
<head>    <style type="text/css">        @import url(div.css);    </style></head>

div&span.css文件

@charset"utf-8";/*CSS Document*/@import url(div.css);@import url(span.css);

div.css文件

@charset"utf-8";/*CSS Document*/div {    background-color:#06F;    color:#F00}

span.css文件

@charset"utf-8";/*CSS Document*/div {    background-color:#06F;    color:#F00}

方式三:链接

  • 定义在< head>标签中的< link>标签
    • rel 属性
      • stylesheet 属性值
    • href 属性
      • 文件名.css 属性值:要导入的CSS文件名字
    • type 属性
      • text/css 属性值:解析方式
<head>    <link rel="stylesheet" href="div.css" type="text/css" /></head>

原创粉丝点击