HTML和CSS入门
一，HTML
1.HTML的定义：
指的是超文本标记语言，它是用来描述网页的一种语言。
（1） 标记语言是一套标记标签。
（2）超文本标记语言是制作网页的标准语言。
注意：HTML不是一种编程语言，而是一种标记语言。
HTML不区分大小写。
（3）超文本：
可以加入图片，声音，动画，多媒体等内容。
可以从一个文件转到另一个文件，与世界各地主机的文件链接
2.HTML的标签：
（1）由尖括号包围，比如
(2)通常是成对出现，比如和
是开始标签，是结束标签。
双标签关系分为包含关系和并列关系两大类。
<head> </head>
包含 和
和 是并列关系。
(3)有些特殊情况是单个标签（极少情况）。例如
，称为单标签。
（4）一个标签可能有多个属性，属性先后顺序无关。
标题：h1~h6(一个页面建议只有一个h1)
段内换行：br(单独出现的标签，直接结束)
段内分组：span(通过css样式来格式化)
段落：p(
段落内容
)预留格式：pre
水平线：hr
空格字符 （特殊字符，全小写）
注释：<!..注释内容…>
（5）HTML 标签语义化
语义化定义：
就是仅通过标签名就能判断出该标签的内容。
语义化的作用：
• 网页结构层次更清晰。
•更容易被搜索引擎收录。
•更容易让屏幕阅读器读出网页内容。
二，CSS
1.CSS的语法
P{ /选择器/
font-size:12px; /*字号/
color:blue; /字体颜色/
font-weight:bold; /加粗/
}
注意：注释可跨行
12px,blue,bold等等都是属性值；
font-size;color;font-weight都是属性名；
最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号；
为了使用样式更加容易阅读，可以将每条代码写在一个新行内；
2.CSS应用方式
（1）外部样式表
页面结构HTML代码与样式CSS代码的完全分离
维护方便
如果需要改变网站风格，只需要修改公共CSS文件可以在同一个HTML文档内部引用多个外部样式表
（2）CSS优先级
多重样式可以层叠，可以覆盖样式的优先级按照“就近原则”:
行内样式>内嵌样式>链接样式>浏览器默认样式
（3）CSS单位
单位 说 明
px… 像素
cm …厘米
in…英寸
%…百分比
em…1em等于“当前元素”字体大小
(4)CSS颜色
颜色 描述
red,blue,green…颜色名
rgb(x,x,x) …RGB值 每个颜色分量取值0-255红色:rgb(255,0,0)灰色:rgb(66,66,66)
rgb(x%, x%,x%) …RGB 百分比值 0%-100% 红色:rgb(100%,0%,0%)
rgba(x,x,x,x) …RGB 值，透明度 a值:0.0(完全透明)与1.0(完全不透明)红色半透明:rgba(255,0,0,0.5)
#rrggbb …十六进制数 红色: #ff0000 红色:#f00去掉重复位
(5)CSS文本属性
居性 描述 取值
color …文本颜色 …red #f00 rgb(255,0,0)
letter-spacing …字符间距 …2px-3px
line-height …行高 …14px 1.5em 120%
text_align …对齐 …center left right justify
text-decoration…装饰线 …None overline underline line-through
text-indent …首行缩进 …2em
(6)CSS字体font
属性 描述 取值
font …文本颜色 …font: bold 18px’幼圆
Font-family …字体系列 …网页安全字体
Font-size…字号 …14px 120%
Font-style …斜体 …italic
Font-weight…粗体 …bold
(7)CSS背景
属性 描述 取值
background …背景:颜色图片 …repeat url(“images/bg1.gif ") repeat-x;
background-color …背景颜色 …red #f00 rgb(255,0,0)
background-imag …背景图片 …url(“logo.jpg” )
background-repeat…重复方式 …Repeat repeat-x repeat-y no-repeat
注意:空元素需要先定义元素的高度和宽度
(8)CSS超链接
·链接的四种状态
A:link 超链接的正常状态(没有任何动作前)
A:visited 访问过的超链接状态 a:active 必须位于a:hover 之后
A:hover 光标移动到超链接上的状态
A:active 选中超链接时的状态
. 按照以下次序:
a:hover必须位于a:link和a:visited 之后
a:active 必须位于a:hover 之后
(9)Border: 边框属性
属性 描述 取值
border-width ..................边框宽度 .......................px、thin、medium、 thick
border-style .................边框样式 ...........................dashed、dotted、 solid、double
border-color .............边框颜色................................ 颜色值
border .....................宽度、样式、颜色 .....................width style color
扫一扫
7736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
