CSS--引入方式、元素显示方式、三特性

最新推荐文章于 2024-07-16 20:51:21 发布

七拾四

最新推荐文章于 2024-07-16 20:51:21 发布

阅读量63

点赞数

分类专栏：前端1 文章标签： css

本文链接：https://blog.csdn.net/weixin_44348052/article/details/122440287

版权

前端1 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1 引入方式

    <!-- 外部样式表(链接式):样式单独写在css文件中,之后将其引用到html页面 -->
    <link rel="stylesheet" href="css.css">


    <!-- 内部样式表(嵌入式):放在html页面内<style>标签中,一般放在<head>,范围为当前html页面 -->
    <style>
        .div {
            text-align: center;
        }


    <div class="div">hehe</div>
    <!-- 行内样式表(行内式):在元素标签内部的<style>属性中设置css样式,范围为当前标签 -->
    <div style="text-align: right;font-size: 40px;">haha</div>

2 元素显示模式

    <!-- 块元素：独占一行、高宽外边距内边距可以设置、宽度默认为容器的100%、是一个容器及盒        子，可以存放行内/块级元素 -->
    <h1>标题标签都是块级的</h1>
    <h2>h1说得对，我们之间没有换行符也换行了</h2>
    <p>其实段落标签p也是块级。。</p>
    <div>div不用说了，经典盒子</div>
    <ul>
        没想到吧我ul也是
        <li>li就不用说了，也是的</li>
        <li>嗯嗯，比如我就是第二个li，自动分行了</li>
    </ul>
    <ol>
        哈 我ol也是哒！块级一级棒思密达
    </ol>
    <div class="block1">试试样式，我是个设置了高宽的div盒子</div>
    <div class="block2">再来试试，我没有设置高宽</div>


    <!-- 行内元素：相邻行内元素在一行、高宽设置无效、只能放置文本/行内元素、默认宽度就是它本身宽度 -->
    <!-- 注意：<a>内不能放<a>,但可以放块级元素 -->
    <a href="#">lalaland</a>
    <strong>我和a好像还在同一行</strong><b>我也在</b><em>me too</em><del>haha我也</del><ins>俺来也</ins>
    <br/>
    <span>我前面有个br换行符，我是span</span>
    <br/>
    <span class="line1">我是设置了宽高的span</span><br/>
    <span class="line2">我是没有设置宽高的span</span><br/>
    <span class="line2">span1</span><span class="line2">span2</span><span class="line2">span3</span><br/>

    <!-- 行内块元素：一行可以有多个，但是中间会有空隙、默认宽度是它本身的宽度、高宽外内边距都可以设置 -->
    <img src="1.jpg" /><br/>
    <input type="text" name="1" id="2" class="block-line1" value="表单1 设置了宽高"><br/>
    <input type="text" name="2" id="1" class="block-line2" value="表单2 没有设置宽高"><br/>
    <td class="block-line1">我是有宽高的td哒！</td>
    <td class="block-line2">我没有宽高，，</td>

    <!-- 模式转换 -->
    <!-- 1 转换为块状：display:block; -->
    <!-- 2 转换为行内：display:inline; -->
    <!-- 3 转换为行内块：display:inline-block; -->
    <span class="transfer">现在我是块状哒！前面没有分行而且独占一行哼哼</span>

3 三特性

/* 一、层叠性：样式发生冲突时，就近原则，显示与结构近的样式；没有冲突时不发生层叠 */
        
        .div1 {
            background-color: black;
        }
        
        .div2 {
            background-color: blue;
        }

/* 二、继承性：子标签继承父标签中的某些样式（text、font、line、color） */
        
        .fa {
            background-color: green;
        }

/* 
        三、优先级
            1 选择器相同：层叠性
            2 选择器不同：!important（无穷）>行内样式（1，0，0，0）>ID选择器（0，1，0，0）>类/伪类选择器（0，0，1，0）>元素选择器（0，0，0，1）>继承属性/*(全选)（0，0，0，0）
            3 浏览器为<a>指定了样式，需要另外修改
            4 复合选择器权重叠加，比如类选择器和元素选择器叠加（0，0，1，0）+（0，0，0，1）=（0，0，1，1）
        */
        
        span {
            background-color: pink;
        }
        
        .span1 {
            background-color: yellow;
        }
        
        #span2 {
            background-color: red;
        }
        
        .span3 {
            background-color: #fff!important;
            /* 最终显示的是这个 */
        }

七拾四

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS--引入方式、元素显示方式、三特性

1 引入方式  <link rel="stylesheet" href="css.css">  <style> .div { text-alig
复制链接

扫一扫