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