HTML5+CSS3的基本样式理解

最新推荐文章于 2022-06-20 12:55:04 发布

哎呦灬不错呦。

最新推荐文章于 2022-06-20 12:55:04 发布

阅读量2.6k

点赞数 6

分类专栏： html5 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_52583582/article/details/109753082

版权

html5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

超链接

<a href="跳转的地址">可以是 文本/ img/ div...</a>
属性：
href：跳转地址	
target：_self 本页/ _blank 空白页，新页  设置网页的打开方式。

base标记

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 配合超链接使用做全局的设置 href用来设置相同的基础地址  target用于设置统一的打开方式-->
    <base href="https://shop.mogu.com/detail/" target="_blank">
</head>

锚点功能

超链接跳转到某一个界面的某一个部分

先要给链接的部分加一个id属性起一个id值
在a链接里href="#id值" 如要跳转到其他界面的某一个部分则 href=“界面地址#id值”

列表系列

无序列表
在这里插入图片描述


ul>li*n
type:标识的类型  
 <!-- type:square正方形 /circle空心圆  /desc实心圆 /none没有 -->
   <ul type="">
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
   </ul>

有序列表
在这里插入图片描述

<!-- type: 1 /a/A/I/i  start="数字" -->
   <ol type="1" start="6">
       <li>数据项1</li>
       <li>数据项2</li>
       <li>数据项3</li>
       <li>数据项4</li>
       <li>数据项5</li>
   </ol>

自定义列表
在这里插入图片描述

<!-- dl define list > dt title + dd data-->
   <dl>
       <dt>购物指南</dt>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
   </dl>

表格结构

二位结构水平（行）垂直（列）
在这里插入图片描述

宽度和高度自己适应结构

  <table  border="1px" cellpadding="0"  cellspacing="0" style="border-collapse:collapse"
   
   align="center"  width="500px" height="300px" >

    <tr bgcolor="red">
        <td>姓名</td>
        <td>基本工资</td>
        <td>岗位工资</td>
        <td>补助</td>
        <td>其他</td>
    </tr>
    <tr align="center">
        <td bgcolor="yellow">马杰伦</td>
        <td >800</td>
        <td>100</td>
        <td width="200px">0</td>
        <td>0</td>
    </tr>
    <tr align="center">
     <td>朱德华</td>
     <td>2000</td>
     <td>500</td>
     <td>50</td>
     <td>0</td>
 </tr>
 <tr>
     <td>张荣浩</td>
     <td>3000</td>
     <td>1000</td>
     <td>1000</td>
     <td>0</td>
 </tr>  
</table>

默认属性

border:边框 border=“1px”

cellpadding:
单元格内部边框和内容的距离

==cellspacing: ==
单元格与单元格之间的距离

align:水平对齐方式 left right center

(1)写在table里那就是表格大盒子对齐

(2)写在td单元格里那就是单元格内容对齐不要一个个的给td加应该加在tr身上

width:宽度

height:高度

bgcolor：背景色 table or tr or td

css属性: border-collapse:collapse细线边框属性

合并属性

跨行合并
rowspan =“n” n你要合并的行数 rowspan=“2”

删除个数=合并的列数-1

跨列合并
colspan=“n” n你要合并的列数 colspan=“3”

css语言引入(html文件里)的方法

css属性写法

{

属性名：属性值;

属性名：属性值;
…
}

行内引入

 <div  style="width:200px;height:200px;background-color: slateblue;">
       div元素
    </div>

缺点：1.代码冗余 2.结构不清晰 3. 后期维护困难

内部嵌入

  <!--内部 嵌入 -->
    <style>
          * {
             color:tomato;
         }

         p {
               font-size: 30px;
         }
         .list-data {

             font-size: 22px;
             color: springgreen;

         }
         .first {
             color: #000;
         }

         #one {
            color: #000;
         }      

    </style>
</head>

缺点：1.没有形成结构与样式相分离不利于后期代码复用和维护

外部链接

1.创建一个.css文件
2.把css样式代码写入文件里
3.引入 head>link

优点：彻底形成分离复用 + 好维护导入

优先级

行内 > 内部嵌入 >外部引入

行内:js获取行内样式是非常方便的优先级高覆盖外部样式，内部嵌入

内部嵌入:覆盖公共样式文件里的样式 common.css

哎呦灬不错呦。

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
8
评论
HTML5+CSS3的基本样式理解

超链接<a href="跳转的地址">可以是文本/ img/ div...</a>属性：href：跳转地址 target：_self 本页/ _blank 空白页，新页设置网页的打开方式。base标记<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫

专栏目录