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样式文件的选择器优先级别为:行内样式表 > 内嵌样式表 > 链接样式表 > 导入样式表。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,717评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,501评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,311评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,417评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,500评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,538评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,557评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,310评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,759评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,909评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,548评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2 352

推荐阅读更多精彩内容

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