HTML基础样式(一)

一、HTML标签

1、无序列表                  有序列表

     <ul>                     <ol>
   <li></li>                 <li></li>
      </ul>                    </ol>
2、定义列表
定义列表是项目及其注释的组合。
其中<dl></dl>标签对表示定义列表;
<dt></dt>标签对表示每个定义的名称(项目名);
<dd></dd>标签对表示每个定义名称的详细内容(注释)。
例:
<>
<body>
<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(外部样式表文件地址);
</stytle>
</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样式文件的选择器优先级别为:行内样式表 > 内嵌样式表 > 链接样式表 > 导入样式表。
              





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值