html、css的初级认知

来源：互联网发布：mysql数据库引擎编辑：程序博客网时间：2024/05/17 03:30

HTML ——超文本标记语言（Hyper Text Markup Language ）

W3C——万维网联盟

我眼中的Doctype：用于声明文档使用哪种规范（html、xhtml）

分类：严格过渡

HTML 与 XHTML：html为web网页设计语言

xhtml为基于xml的置标语言

1.语法格式：

<html>

</html>

2.标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<ul>

</ul>

<ahref="链接地址">链接标签</a> <span>行内元素</span>

</select>

<tablesummary="表格摘要">

</colgroup>

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

3.表单元素

</form>

留言板<textareacols="行宽限制字数" cols="行宽限制字数"></textarea>

4.分割窗口

</frameset>

5.图片

CSS——层叠样式表（CascadingStyleSheets）

1.嵌入方式：

(1) 内联

<head>

p { color:#000; }/*选择器 { 规定的样式 }（详见后）*/

</style>

</head>

(2) 外链（外部链接一个css文件）

<head>

</head>

(3) 内嵌（在html标签内嵌入）

(4) 导入（将几个css文件导入到一个新的css文件中）

@import url( "要导入的css文件" );

@importurl( "要导入的css文件" );

2.选择器：

(1)派生选择器 -- 通过上下级关系

ul li { width：80px; height：60px;}

(2)id选择器

#manv { width：900px; margin：0 auto;} /*一个id名在一个页面只能用一次外边距margin：上右下左；*/

(3)类别选择器

.list1 { width:300px; } /*类别选择器支持派生，可多次调用*/

</ul>

(4)属性选择器 -- 拥有指定属性

input[type="text"] { width:150px;}

(5)通用选择器 -- 定义整个页面标签属性

* { margin:0;}

【优先级】 ID选择器的优先级高于类别选择器，一个class里可以调用多个类名，有自己的样式执行自己的，

没有自己的执行离它最近的，后面的样式覆盖前面的，行内样式高于内部和外部样式

3.css常用属性：

基本语句构成：选择器{ 属性1：值1；属性2：值2；}

(1) 盒模型：内填充padding：上右下左；

边框border：边框宽度边框类型边框颜色； /* 四个边框：top、right、bottom、left；边框类型：实线solid;点状dotted;双线double;虚线 dashed*/

{ margin：20px；【border：3px[padding：10px；（width：100px；）]】}

/*可操作大小：width+padding

内容：width

该div距其他div的距离：margin*/

(2)背景：背景颜色background-color：#fff；/*#fff为背景颜色也可以写成white*/

背景图片background-image：url(”背景图片链接“) 重复类型； /* 重复类型：no-repeat不重复；repeat-x横向重复；repeat-y纵向重复 repeat 重复 */

(3)关于字体：字号 font-size 字体样式 font-style / font-weight

下划线 text-decoration 对齐方式 text-align

首行缩进 text-indent 行间距 line-height

(4)列表样式：list-style

(5)定位：position：/* 默认的,没有定位static;绝对的absolute"分层";相对的relative;相对于浏览器窗口的绝对定位fixed;继承父级inherit */ ;

距左侧：left：0；距上方：top：0;距右侧：right：0；距下方：bottom：0；

显示在第几层：z-index : 2;

(6)浮动：float：/* 左浮动left; 右浮动right; */；

清除浮动：clear：/*both; left; right;*/；

(7)显示属性：display：/* 隐藏none;行内显示inline; 块状显示block; */；

(8)规定当内容溢出元素框时发生的事情： overflow：/*自适应,溢出则出滚动条auto;溢出隐藏hidden;溢不溢出都有滚动条scroll*/；

    (9)链接（伪类）：a:link {color: #FF0000}    /* 未访问的链接 */
                   a:visited {color: #00FF00} /* 已访问的链接 */
                   a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
                   a:active {color: #0000FF}  /* 选定的链接 */

【注意】a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后

0 0