HTML中引入CSS的方式
(1) 内联⽅式
<tag style=\"attr: val; attr: val...\"></html>
(2) 内部⽅式
<head><style>tag {attr: val; attr: val...}</style></head>
(3) 外部导⼊⽅式
<link type=\"text/css\" href=\"css文件路径\">
优先级:当样式冲突时,采⽤离被修饰的内容最近的样式,若没有样式冲突则采⽤叠加效果。
常见格式化标签:
<br> 换⾏<p>...</p> 换段<hr/> ⽔平分割线<ul>...</ul> ⽆序列表<ol>...</ol> 有序列表 其中type类型值:A a I i 1 start属性表示起始值<li>...</li> 列表项<dl>...</dl> ⾃定义列表<dt>...</dt> ⾃定义列表头<dd>...</dd> ⾃定义列表内容<div>...</div> 常⽤于组合块级元素,以便通过 CSS 来对这些元素进⾏格式化<span>...</span> 常⽤于包含的⽂本,您可以使⽤ CSS 对它定义样式,或者使⽤ JavaScript 对它进⾏操作。
选择符
(1) html选择符:
选择符{样式}
(2) class类选择符:
选择符.类名{样式}
(3) Id选择符:
#id{样式} (每个id只定义一个)
选择符的优先级: ID选择符>class选择符>html选择符>html属性
(4) 关联选择符
选择符1 选择符2 选择符3 ...{样式}
(5) 组合选择符
选择符1,选择符2,选择符3 ...{样式}
(6) 伪类选择符:
标签名:伪类名{样式....}
(7) 关系选择器:
div>p 选择所有作为div元素的⼦元素pdiv+p 选择紧贴在div元素之后p元素div~p 选择div元素后⾯的所有兄弟元素p
(8) 属性选择器:
[attribute]选择具有attribute属性的元素。[attribute=value]选择具有attribute属性且属性值等于value的元素。[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表,其中⼀个等于value的元素。[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符\"-\"分隔的字符串的E元素。[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
(9) 结构性伪类选择器:
:nth-child(n)匹配⽗元素的第n个⼦元素:first-child 匹配⽗元素的第⼀个⼦元素:last-child 匹配⽗元素的最后⼀个⼦元素
(10) 状态伪类选择器:
:hover 设置元素在其⿏标悬停时的样式:focus 设置元素在其获取焦点时的样式:active 设置元素在被⽤户激活(在⿏标点击与释放之间发⽣的事件)时的样式
html图像标签
<img >
常⽤属性如下:
src: 图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title:⽂字提示属性
width:图⽚宽度
height:图⽚⾼度
border:边框线粗细
html超链接标签
<a href=\"链接⽬标url地址\">显示⽂字</a>
常用属性:
href: 必须,指的是链接跳转地址
target: 表示链接的打开⽅式:
- _blank 新窗⼝
- _parent ⽗窗⼝
- _self 本窗⼝(默认)
- _top 顶级窗⼝
framename: 窗⼝名
title:⽂字提示属性(详情)
锚点链接:
定义⼀个锚点:
<a id=\"a1\"></a>
使⽤锚点:
<a href=\"#a1\">跳到a1处</a>
html表格标签
<table> 定义表格,常用属性:border,width,cellspacing,cellpadding<caption> 定义表格标题,常用属性: align<th> 定义表格的表头,常用属性: align,valign,bgcolor,rowspan,colspan,width,height<tr> 定义表格的⾏,常用属性: align,valign,bgcolor<td> 定义表格单元格,常用属性: align,valign,bgcolor,rowspan,colspan,width,height<thead> 定义表格的⻚眉,常用属性: align,valign<tbody> 定义表格的主体,常用属性: align,valign<tfoot> 定义表格的⻚脚,常用属性: align,valign