CSS引用

使用外部样式表

CSS代码在一个独立的文件中,HTML通过link元素引入到页面

link 空元素。表示引用外部资源,类型为样式表

 link rel="stylesheet" href=" 路径  ">

区分大小写,在不同的文件中

使用外部样式表的特点

1.实现了内容结构和表现形式代码分离,方便复用和维护

2.使HTML代码更加纯净,有利于程序员和搜索引擎的阅读

3.是开发页面的常见做法

使用内部样式表

将CSS代码写到HTML文档的style元素内容中

使用内部样式表的特点

1.没有了没有了样式表文件,在某些时候可以提升效率

2.多个页面难以共享样式,不利于代码复用

3.HTml和代码混在,不利于程序员和搜索引擎阅读

4.在某些对效率要求苛刻或测试的场景下使用,方便维护一个样式表可以应用到多个页面,反之亦然

使用行内样式表

CSS代码写在元素的style属性中,行内样式不写选择器

使用行内样式表的特点

1.没有了没有了样式表文件,在某些时候可以提升效率

2.多个页面难以共享样式,不利于代码复用

3.HTml和代码混在,不利于程序员和搜索引擎阅读

4.JavaScript操作的是行内样式

5.在测试的场景下使用

CSS术语

CSS注释

 /*注释内容*/  方便维护,描述代码功能

CSS规则

CSS代码由一个一个规则组成

每个规则指定了对那些元素应用什么样式

 选择器{ 声明块 }

CSS规则-选择器

元素选择器的书写格式:

标记名{/*声明块*/}

所有与该标记名匹配的元素,都将应用声明块中的规则

类选择器

书写格式:

 ./类名{/*声明块*/}

所有class属性为指定类名的元素,都将应用声明块中的规则

    <class="xxxx xxxx">使用多个类名帮助我们代码复用

ID选择器

书写格式:

#id值{/*声明块*/}

属性id为指定值的元素,将应用声明块中的规则

在通体个HTML文档中,元素的id值必须唯一

组织项目结构

项目文件结构

HTML定义文档结构

CSS重置技术

1.浏览器给HTML默认样式

2.不同的浏览器设置的默认样式可能有差异,为了让页面获得块浏览器的兼容性,需要用一些CSS代码覆盖浏览器的默认样式

需要先引用reset.css,再引用自己的css文件

语义化概述

<strong>重要内容
<i>斜体

语义化作用

1.有利于浏览器理解HTML文档

2.有利于搜索引擎理解HTML文档

超链接

<a元素书写格式:

 <a href="目标">内容</a>

目标-链接目标:

  • 页面地址(路径)
  • 锚点
  • 功能链接

锚点

在当前页面跳转

乱序铭文:lorem + Tab

复制光标所在行的内容:Ctrl + D

格式:

  • id属性元素
  • a中的href的值是#加上id属性元素的值

书写格式:

<a target="页面打开位置" href="目标">内容</a>

页面打开位置-点击后在那里打开新文档

  • _blank
posted @ 2018-04-15 21:24  α不是β  阅读(97)  评论(0编辑  收藏  举报