AI智能
改变未来

HTML+CSS网页编程


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: 表示链接的打开⽅式:

  1. _blank 新窗⼝
  2. _parent ⽗窗⼝
  3. _self 本窗⼝(默认)
  4. _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
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » HTML+CSS网页编程