HTML的基础样式(一)

一、HTML标签

1、无序列表                  有序列表

    <ul>                              <ol>

    <li></li>                    <li></li>

    </ul>                             </ol>

2、定义列表

定义列表是项目及其注释的组合。

其中<dl></dl>标签对表示定义列表;

<dt></dt>标签对表示每个定义的名称(项目名);

<dd></dd>标签对表示每个定义名称的详细内容(注释)。

例:

<body>

<dl>

<dt>咖啡</dt>

     <dd>黑色的热饮</dd>

<dt>牛奶</dt>

      <dd>白色的冷饮</dd>

</dl>

</body>

效果

  咖啡 

        黑色的热饮

  牛奶

        白色的冷饮

3、图片的属性

图片的注解:alt

图片大小的设置:wight height

图片边框的设置:border

4、属性名称

align

属性值

left --------图像靠左,文字靠右

right ------图片靠右,文字靠左

top --------文字往上靠

middle----文字靠中

bottom----文字靠下                                         

5、绝对路径----将图像文件的全部路径都写出来

     相对路径----当前html文件所在的目录,用于图像文件在本网站中的情况

6、超链接

<a href = "跳转文件的地址"  target = "窗口打开方式">远端点(链接文字)</a>

(1)文字超链接

<a href = "跳转文件的地址">链接文字</a>

(2)图片超链接

<a href = "跳转文件的地址"><img src = "1.jpg"></a>

注意:边框的问题,可以用border="0"去掉边框

(3)锚点超链接

锚点的地方采用:<a name = "锚点名称">目标位置</a>;标题的链接表示为:<a href = "#锚点名称">标题名</a>。

(4)邮件超链接

<a href = "mailto:邮箱地址">链接文字</a>

二、在HTML页面中引入css样式表的方法

1、

(1)将css样式表放置在HTML文件头部:内部样式表

<head>

<style type = "text/css">

选择器

</style>

</head>

(2)将css样式表放置在HTML文件主体:行内样式表

<body>

<html标签 style = "样式"></html>

</body>

(3)将css样式表放置在HTML文件外部:   链接样式表与导入样式表

链接样式表

<head>

<link rel = "stylesheet" type = "text/css" href = "样式表文件的地址">

</head>

导入样式表

<head>

<style type = "text/css">

@import url(外部样式表文件地址);

</style>

</head>

2、常用css样式属性

文本属性:text-align---------文本对齐

边框属性:border-style------边框样式

                  border-width-----边框宽度

                  border-color------边框颜色

定位属性:top------顶部边距(上边距)

                  left------左边距

width---宽度

height--高度

z-index--Z轴索引号,用于层

3、(1)选择器

               标签选择器 p{}

               类选择器.class{}

id选择器#id{} 

     (2)伪类选择器

            a:link--------设置超链接未被访问时的样式

a:active-----设置超链接被用户激活(在鼠标点击与释放之间)样式

a:visited----设置超链接被访问后的样式

a:hover------设置将鼠标指针移到超链接上时的样式

      (3)通用选择器(可以定义所有网页元素的显示格式,常用

                于清除页面中元素的边距)

*{

margin:0;

                padding:0;

            }

       (4)选择器集体声明(将声明相同的选择器归类为一组)

           h1,h2,h3,h4{}

           #one,.text,p{}

(5)选择器的嵌套


<p>河北<span>保</span>定</p>

            #one li{}(设置id名为one的标签里包含的li标签样式*/)

.two  p{}(设置class名为two的标签里包含的p标签样式)

          (6)优先级

CSS规定选择器的优先级从高到低为:行内样式 > id选择器 > 类选择器 > 标签选择器。

             若在同一HTML文档中引入了不同类型的CSS样式文件,则各CSS样式文件的选择器优先级别为:行内样式表 > 内嵌样式表 > 链接样式表 > 导入样式表。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,338评论 2 66
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,368评论 0 7
  • 前天(5月2日),英国王室最小的成员Charlotte公主一岁啦!肯辛顿宫的工作人员公开了小公主一年来收到的礼物清...
    留学咖啡馆阅读 506评论 0 0
  • 每日三省吾身,所以,总结,或许并不重要,习惯了,每天问问自己,有什么做的不好的地方,并且加以改进。 2016, 新...
    张粤丹阅读 203评论 0 0