1.实例演示选择器组合实现优先级提权方式; 2.实例演示字体与字体图标; 3.实例演示盒模型常用属性的缩写方案 -

首页 > 博客列表 > 1.实例演示选择器组合实现优先级提权方式; 2.实例演示字体与字体图标; 3.实例演示盒模型常用属性的缩写方案

博主信息

博文 16

粉丝 0

访问量 22621

专题推荐

更多>

1、选择器优先级提权演示代码：

<title>选择器优先级提权</title>
    <style>
        h2 {
            color: red;
        }
        .bt h2 {
            color: lawngreen;
        }
        #dbt {
            color: violet;
        }
        #box {
            border: 1px solid red;
            width: 500px;
            height: 200px;
            background-color:lightgreen;
        }
        #box div{
            /* background-color: violet; */
        }
        body #box{
            background-color:lightslategray;
        }
    </style>
</head>
<body>
    <!-- 1. 实例演示选择器组合实现优先级提权方式; 
        2.实例演示字体与字体图标;
        3.实例演示盒模型常用属性的缩写方案 -->
    <!-- 内联样式不属于选择器 -->
    <!-- 选择器优先级提权有一个规则：id > class > 标签；[0,0,1][0,1,0][1,0.2] -->
    <div id="box">
        <div class="bt">
            <h2 id="dbt">大标题，大标题</h2>
        </div>
    </div>

2、字体与字体图标演示演示代码：

<title>字体与字体图标演示</title>
    <style>
        .fonts {
            color: red;
            /* 设置文字大小 */
            font-size: 30px;
            /* 设置文字字体  */
            /* font-family: SimHei; */
            font-family: LiSu;
        }
        .fonts p{
            color:red;
        }
        p{
            font-size: 50px;
            color:blue;
            /* font-family:YouYuan; */
            src: url(./icon/cilun.png);
    </style>
</head>
<body>
    <div class="fonts">
        <h1>一段文字标题</h1>
        <p>文字主体内容：借钱这事儿，大家可能都遇到过：一时资金周转不开，借钱救个急。
            从资金管理角度说，借钱是负债，要考虑个人资金流动性与偿债能力，要考察借贷成本能否覆盖资金收益。
            可是眼下，出现了一个趋势：借钱越发随意，可能为了购买奢侈品、换个苹果手机，也可能为了办健身卡、上学习课，甚至买颗白菜也可以分期……
            与此映照，多家互联网借贷平台的广告画风殊异：老年人坐不惯经济舱，可以借钱升舱；父亲手头紧，借钱给孩子过生日。
            这劲头，似乎越来越奇怪了</p>
    </div>
    <div>
     /* 给字体加图标： */
        <p>设置按钮</p>
        <p>电话电话</p>
    </div>

3、实例演示盒模型常用属性的缩写方案

<title>实例演示盒模型常用属性的缩写方案</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            /* 边框 通过border设置，值由3部分组成，边框粗细（px）、边框样式、边框颜色。
            border-winth:1px;设置边框粗细；
            border-style:solid;设置边框样式，solid (实线)、dashed (虚线)、dotted (点线)。
            border-color:red; 设置边框颜色； */
            /* 边距的简写：（值不分顺序） */
            border: 5px red solid;
            /*  内边距(边框与内容之间的距离)padding 的简写语法：padding 是按顺时针的方式赋值；[上、右、下、左] ，
            padding：2px；   表示 上、右、下、左 内边距各2px；
            padding: 2px 5px;    表示 上下2px,左右5px;
            padding: 5px 6px 8px;    表示 上5px,左、右各6px,下8px;
            padding: 50px 20px 30px 18px;    表示上50px, 右20px,下30px,左18px;
             */
            padding: 50px 30px;
            background-color: skyblue;
            /*   margin外边距（盒子与盒子之间的距离）；简写语法和padding一样；
            是按顺时针的方式赋值；[上、右、下、左] ，
            margin：2px；       表示 上、右、下、左 内边距各2px；
            margin: 2px 5px;     表示 上下2px,左右5px;
            margin: 5px 6px 8px;     表示 上5px,左、右各6px,下8px;
            margin: 50px 20px 30px 18px;    表示上50px, 右20px,下30px,左18px; */
            /* 外边距 margin 简写语法： */
            margin: 30px 20px 15px 9px;
            /*   盒子模型分为w3c盒子模型和ie盒子模型，w3c盒子模型的范围包括 
            margin border padding content,并且content部分不包括其他元素。
            ie盒子模型，范围包括 margin border padding content ,但是border和padding计算到content内的； */
            /* 设置盒子模型为ie盒子模型  （不影响盒子总体大小）*/
            box-sizing: border-box;
            /* 设置盒子模型为w3c盒子（默认、会影响盒子总体大小） */
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box">
        盒子模型
    </div>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html一些基本概念

2020-12-14 19:10:02

1、选择器优先级提权 演示代码：

2、字体与字体图标演示 演示代码：

3、实例演示盒模型常用属性的缩写方案

1、选择器优先级提权演示代码：

2、字体与字体图标演示演示代码：