CSS引入方式；基本选择器；常用标签

最新推荐文章于 2024-04-03 21:51:26 发布

该睡觉觉了

最新推荐文章于 2024-04-03 21:51:26 发布

阅读量69

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/109753485

版权

html+css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

day02

超链接

<a href='连接地址' target:_self(当前页打开/_blank(新页打开)></a>

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>

列表序列

无序列表

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

有序列表

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

自定义列表

<dl>
    <dt>11</dt>
    <dt>11</dt>
    <dt>11</dt>
</dl>

表格结构

<table width='670px' height='260px' align='center'>
        <tr bgcolor='#c8c8c8' align="center">
            <td bgcolor="#29a7e1">尺码</td>
            <td>规格</td>
            <td>肩宽</td>
            <td>胸围</td>
            <td>衣长</td>
            <td>适合体型</td>
        </tr>
        <tr align="center">
            <td bgcolor="#29a7e1">S</td>
            <td bgcolor="#e4e4e4">165/84A</td>
            <td bgcolor="#e4e4e4">46</td>
            <td bgcolor="#e4e4e4">100</td>
            <td bgcolor="#e4e4e4">67</td>
            <td bgcolor="#e4e4e4">100-120斤左右</td>
        </tr>
        <tr bgcolor='#c8c8c8' align="center">
            <td bgcolor="#29a7e1">M</td>
            <td bgcolor="#e4e4e4">170/88A</td>
            <td bgcolor="#e4e4e4">47</td>
            <td bgcolor="#e4e4e4">104</td>
            <td bgcolor="#e4e4e4">68</td>
            <td bgcolor="#e4e4e4">120-130斤左右</td>
        </tr>
        <tr bgcolor='#c8c8c8' align="center">
            <td bgcolor="#29a7e1">L</td>
            <td bgcolor="#e4e4e4">175/92A</td>
            <td bgcolor="#e4e4e4">48</td>
            <td bgcolor="#e4e4e4">108</td>
            <td bgcolor="#e4e4e4">70</td>
            <td bgcolor="#e4e4e4">135-145斤左右</td>
        </tr>
        </tr>
    </table>

默认属性

border: border=‘1px’;

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

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

align:水平对齐的方式 left right center

bgcolor:背景色适用于table tr td

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

合并属性

跨行合并

rowspan=‘n’ n表示你要合并的行数合并的列数-1=删除的个数

跨列合并

colspan=‘n’

css样式引入

行内引入

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

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

内部嵌入

<style>
    *{
        
    }
    .item{
        
    }
    #box{
        
    }
</style>

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

外部链接

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

缺点：无

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

优先级

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

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

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

学习分享

今天学的知识比较简单,但是都是需要记忆,勤加练习

该睡觉觉了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录