一。CSS引用
1. 使用外部样式表: CSS代码在一个独立的文件中,HTML通过link元素引入到页面
格式:link + tab键<link rel="stylesheet" herf"../目标">
特点:
- 实现了内容结构和表现形式的代码分离,方便复用和维护
- 使HTML代码更加纯洁,有利于程序员和搜索擎的阅读
2.使用内部样式表: 将CSS代码写到HTML文档的style元素内容中
格式:<stely>样式</stely>
特点:
没有了样式表文件,在某些时候可以提升效率;
多个页面难以共享样式,不利于代码复用;
HTML和CSS代码混乱,不利于程序员和搜索擎阅读,不利于复用和维护;
在某些对效率要求苛刻或测试的场景下使用
一个样式表可以引用多个页面,一个页面也可以引用多个样式表
3.使用行内样式表:又叫内嵌样式表,CSS代码写在某个元素的开始标记中,行内样式不写选择器(放入body标签里)
书写格式:<开始标签 属性名=“属性值”> <结束标签>
特点:相对于使用内部样式表,行内样式表大多进行JS操作,同时也在测试的场景下使用
注意:行内样式表优先级最高
CSS术语
CSS注释书写格式: /*注释内容*/
作用: 方便自己和维护员修护 描述代码功能 解析CSS
CSS的规则:
css代码由一个一个的规则组成
书写格式:选择器 { 声明块 }
选择器:该样式规则应用到哪些元素上
声明块:有哪些样式
元素选择器: 标签元素名
书写格式:{ /* 声明块 */ }
所有与该标记名匹配的元素,都将应用声明诀中的规则
类选择器:
书写格式:.类名{/* 声明块 */}
所有class属性为指定类名的元素,都将应用声明诀中的规则;多个类名在HTML代码中,中间要用空格分开
ID选择器:
书写格式:#id值{/* 声明块 */}
在同一个HTML文档中,元素的id值必须唯一
二。HTML 语义化概述
意义:HTML中不同的元素代表不同的含义;使用具有含义的元素来书写HTML文档,即语义化;语义化属于HTML范畴,与样式css无关
作用:有利于浏览器理解HTML文档;有利于搜索擎理解HTML文档结构的理解;
div元素:用来划分区域,不具备任何意义
<header>:用于表示某个页面的头部,同一个页面header可以出现多次
<nav>:导航栏
<aside>:用于表示跟周围主题相关的附加信息(侧边栏)
<article>:用于表示文章或独立页面存在的内容
<section>:用于表示一个整体部分的主题
<footer>:脚部
单词快捷键:lorem+tab键
< a >超链接
书写格式:< a href="目标"> 内容 </ a>
或<a target="页面打开位置" href="目标"> 内容 </ a>
链接的目标指:页面地址(路径);锚点;功能的链接
target="页面打开位置"是指:点击后在哪里打开新文档
_blank新窗口打开
_self默认值 当前窗口打开
注意:属性名小写,属性值加双引号