一.HTML文本基础结构标签
1.标题标签:<h1></h1>~<h6></h6>
- 搜索引擎对该标签敏感
- 块状元素,默认带样式效果
2.段落标签:<p></p>
- 块状元素,默认带有外边距样式效果(margin-top)
3.换行标签:<br>
- 单行标签
4.水平线标签<hr>
- 单行标签
- 一个默认独占一行
- 不能放在文本标签内部。如<p></p>
- 具有一定默认样式,可通过css改变(默认height:0;有border)
5.强调文本标签:<strong></strong> <em></em>
- strong整体强调,重要。em局部强调,程度较弱
- 行间元素
6.特色文本标签:<b></b>(加粗) <i></i>(斜体)
- 行间元素
7.微组合标签:<span></span>
- 行间元素
- *默认没有样式,仅提供结构化接口
二.css字体样式
font-family :字体系列 支持多个取值
font-size :字体大小 (px em)
- em:相对父级元素。rem:相对根元素
- 中文网页字体通常使用偶数字号
- pc端最小字号为12px,移动端最小20px
color :颜色
font-weight:字体粗细
- 正常状态:值=normal(400)
- 加粗状态:值=bold(700)
font-style
- normal(正常)
- italic(斜体。字体本身具有斜体属性)
- oblique(倾斜效果。文字倾斜。无论字体有没有斜体属性)
font 复合属性
- 顺序:font-style > font-variant > font-weight > font-size / line-height > font-family
- font-size font-family必需。可忽略的将使用参数的默认值
三.css文本样式
1.text属性
- text-align:设置文本的水平对齐方式
- 必需用于块状元素
- 默认值是start,取决于html文档的direction属性设置(默认从左到右,等同left)
- 值:left right center justify(两边都对齐)
- text-decoration: 设置文本的修饰方式
- 为文本添加线条类的修饰
- 值:none underline(添加下划线) line-through(删除线) overline(添加上划线)
- text-indent: 设置文本的首行缩进
- 用于块状元素,用来在内容第一行添加一定空格,达到首行缩进效果
- 单位:px,em或%
- 一般使用em,以元素本身字体尺寸为参考基数
- 可使用负值,产生‘悬挂缩进’特殊效果
- text-transform: 设置文本的转换(针对英文)
- 用于转换文本中的大小写方式
- 值:capitalize uppercase lowercase
- text-shadow: 设置文本的阴影效果,css3新增属性
- 需要设定一组值
- 可通过添加多组值设定多重阴影,达到特殊效果,多组值之间用逗号隔开
- 值:水平阴影距离(必须值) > 垂直阴影距离(必须值) > 模糊程度(可选,默认为0,无模糊效果) > 阴影颜色(可选,默认等同文本颜色)
2.line-height :设置文本行高
- 可把行高看作以文本内容本身为中线,上下垂直延伸形成空隙而成。即:将行距的值(行高-字号)/ 2 ,分别增加到内容区域的上下两边
- 可使用相对单位设置行高
- 应用:单行文本在容器中垂直居中
3.overflow :设置文本(容器内部内容)溢出的控制方式
- 针对容器内部的内容,不仅仅是单纯文本
- 适用于块状元素
- 属性:overflow,overflow-x(处理横向溢出),overflow-y(处理纵向溢出)
- 值:
- visible(默认值)
- hidden(隐藏)
- scroll(无论内容是否溢出,都会添加滚动条)
- auto(内容溢出时,出现纵向滚动条)
4.letter-spacing: 设置字符之间的间距
- 设置单个字符间的间距(中文/英文)
- 指定的间距将被添加到字符之后
- 可以使用负值
5.word-spacing : 设置词语之间的间距
- 设置单词或词语之间间距(根据空格判断)
- 指定间距会被添加到词语之后,最后一个词语除外
- 可使用负值
6.word-break :设置文本自动换行的方法
- normal 默认
- 设定容器中文本字内换行的行为
- 值:
- break-all 允许文本在达到容器边缘时,可以任意位置断开,不受词语限制
- keep-all 不允许词语断开,只能在出现词语分隔的空格或连字符时才能换行
四.web图片的格式及应用
web图片格式应用途径:
格式 | 压缩方式 | 透明度 | 动画 |
JPG | 有损 | 不支持 | 不支持 |
PNG | 无损 | 支持 | 不支持 |
GIF | 无损 | 支持 | 支持 |
应用途径:
1.内容图片(<img>)
- 属于html
- 内容图片是网页内容的一部分,有占位,如果加载失败,会出现占位标记
- <img>标签
- 单标签
- 行间元素,默认表现inline-block效果,可以直接适用盒模型属性
- <img>标签不是直接在网页中插入图像,而是指定一个链接图像文件的地址。<img>标签创建的是被引用图像的占位空间
- 属性:
- src(必需):指定链接路径
- alt(必需):规定图像的替代文本
- title:鼠标划过时的文字提示
- width(不需要单位,css中会优先于img中width)
- height(同上)
2.背景图片(css中background)
- 属于css
- 不占位,加载失败,无影响
- background基本属性:
- background-color : 背景色
- 大部分HTML元素的背景色默认透明。background-color:transparent;
- 同时设置背景图和背景色,图在上,色在下
2.background-image :背景图
- 值为url路径。background-image:url();
3.background-repeat : 背景图的重复方式
- 值:
- repeat
- repeat-x
- repeat-y
- no-repeat
4.background-attachment : 背景图的附着位置方式
- 值:
- scroll: 相对html元素定位,不动
- fixed :以浏览器窗口为参考固定(容易与background-position冲突)
- local :背景会随着容器里的内容而滚动
5.background-position 背景图的位置定位
- 设置背景图的起始位置,默认是html元素的左上角
- 有两个值:横向坐标值 纵向坐标值
- 如果只指定了一个值,那么该值为横向坐标值,纵向坐标值默认为50%(center)
- 值:像素值 / 百分比 / 范围值(right top bottom left)
- 可以是负值 !!如果background-attachment的值为fixed,那么background-position会无法正常工作
6.background 复合属性
- 声明顺序:background-color > background-image > background-repeat > background-attachment > background-position
六.超级链接(hyperlinks)
<a>标签:
- 行间元素
- 属性:
- href(指定链接路径,实现超级链接的功能)。 如果没有href属性,<a></a>只是超链接的一个占位符
- target:规定在何处打开链接文档 值。_self 默认值,当前窗口打开链接; _blank 在新窗口打开链接
- 如果页面中超级链接都需要在新窗口打开,需要在<head>标签中添加<base target="_blank">
链接的常见形式:
- 锚点(anchor):
- 用来跳转到链接中的指定位置
- 通过设置href为 # + id名,跳转到id名处
<div id="anchor"></div>
<a href="#anchor"></a>
- 相对路径(relative path):基于网站服务器的路径结构
- 绝对路径(absolute path):完整的绝对url:协议(http://) 域名(domain.com) 文件路径(/hello.html)
- 空链接(#)
- 邮箱链接(mailto) <a href="mailto:hhh@qq.com"></a> 点击时会启动电脑上的邮件客户端程序
七.css伪类
伪类:一种动态的类选择符,不是预先创建而是动态形成
超级链接的交互状态:
- 未被点击的状态(默认) :link
- 已被访问过的状态 :visited
- 鼠标悬停 :hover
- 激活状态(鼠标点击与释放之间时) :active
- 获得焦点时状态(适用表单) : **如果分开描述,需要按顺序编写
八.html列表结构
列表类型:
- 无序列表
<ul> <!--无序列表区-->
<li></li> <!--无序和有序列表的子级列表项-->
</ul>
- 有序列表
<ol start="5" reversed> <!--有序列表区-->
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ol>
属性:
- start (值:数值): 规定有序列表中首个列表项起始值
- reversed(值:reversed): 降序/反序 html5新属性
- 定义列表 ()
<dl> /*定义列表区*/
<dt>源代码</dt> /*子级列表标题*/
<dd>hello world</dd>
<dt>源代码</dt>
<dd>hello world</dd> /*子级列表描述*/
<dt>源代码</dt>
<dd>hello world</dd>
<dd>hello world</dd>
</dl>
- 列表标签都是块状元素
九.css列表样式
列表专有属性:list-style
list-style 复合属性
- 声明顺序:list-style-type > list-style-position > list-style-image
list-style-type :设置列表符号的类型
- 值:
- disc实心圆点(无序列表默认值)
- decimal数字(有序列表默认值)
- none
list-style-image :设置列表符号的图像
- 设定列表的项目符号的自定义图像
- 值:url 。但无法精确定位图片位置
list-style-position :设置列表符号的放置位置
- 设置列表的项目符号的位置
- 值:
- inside
- outside
- ul ol存在padding 。dd存在margin
- 可使用背景属性模拟项目符号 (background)