CSS

最新推荐文章于 2024-01-15 00:00:00 发布

HHarvey

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/HHarvey/article/details/89336106

版权

CSS引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--CSS第二种引入方式-->
    <!--相当于将<style>标签中的渲染代码写到test文件中，再拿过来-->
    <link href="test.css" rel="stylesheet">

    <!--CSS第三种引入方式-->
    <!--类似第二种方法，用导入的方式-->
    <style>
        @import "test.css";
    </style>


    <!--CSS第四种引入方式-->
    <style>
        p{
            color: green;
            font-size: 30px;
        }
    </style>

</head>
<body>

<!--CSS第一种引入方式-->
<!--标签中的属性和对应值就是css代码-->
<div style="color:green;background-color: coral"></div>

</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /**{}可以让全局跟着渲染*/
        /**{*/
            /*background-color: tan;*/
        /*}*/

        /*通过#和id*/
        #littleP{}

        /*通过.class控制class为ccc的标签*/
        .ccc{}
        
        /*控制标签是div，class是ccc的标签,不能有空格*/
        div.ccc{}

        /*逗号代表并列，将多个标签用同样方式渲染*/
        #littleP,div.cuihua{}

        /*后代选择器。空格代表找后代，子代和孙代甚至更多都能拿到*/
        .div1 div

        /*子代选择器。>可以找到class为div1下的class为div2的标签，只找下一代*/
        .div1>.div2{}

        /*空格和>混合使用，找到所有div后代并且其子代有p标签*/
        .div1 div>p{}

        /*相邻选择器。+匹配所有紧挨着class为div1的同级div标签*/
        .div1 + div{}

    </style>
</head>

<body>

<div>hello div</div>
<p id="littleP">pppp</p>
<p id="littlePP">ppp</p>
<p class="ccc">pp</p>
<p class="ccc">p</p>
<div class="ccc">div</div>
<a href="">aaa</a>

<div>hello div before</div>
<div class="div1">

    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>

    <p>p ele</p>
    <div class="div2">div2</div>
</div>
<p>after div1 p</p>
<div>after div1</div>

<p>
<div>p中的div</div>
</p>

</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*匹配有alex属性的标签*/
        [alex]{
            color: red;
        }
        /*匹配p标签中有alex属性并且value=dasb的标签*/
        p[alex="dasb"]{
            font-family: "Times New Roman";
            font-size: 30px;
        }
        /*匹配所有alex属性中有b的标签*/
        [alex*="b"]{
            color: teal;
        }
    </style>
</head>

<body>
<!--属性选择器-->

<div>hello1</div>
<div alex="sb LI">alex</div>
<div alex="dasb">hello1</div>
<p alex="dasb">hello2</p>

<div class="div1 div2">hello1</div>

</body>
</html>

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*超链接字体的颜色*/
        a:link{
            color: red;
        }
        /*访问过的超链接的颜色*/
        a:visited {
            color: blue;
        }
        /*超链接的悬浮颜色*/
        a:hover {
            color: green;
        }
        /*被点击时的颜色*/
        a:active {
            color: yellow;
        }
        /*控制box的大小*/
        .box{
            width: 100px;
        }

        .top,.down{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }
        /*设置top的悬浮颜色*/
        .top:hover{
        background-color: red;
        }
        /*设置box的悬浮颜色，这样悬浮在top上会变红色，悬浮在box上两个嵌套标签都会变红色*/
        /*效果想证明通过嵌套可以通过控制一个标签的悬浮从而达到控制该标签下嵌套的所有标签的悬浮*/
        .box:hover .down{
        background-color: red;
        }
        /*after，紧跟在class为add标签的后面*/
        .add:after {
            content: "欢迎加入前端学习";
            color: red;
        }
    </style>

</head>

<body>
    <a href="css_引入方式.html">hello-world</a>
    <!--用一个box嵌套两个，可以通过调试box而改变任意两个被嵌套的标签-->
    <div class="box">
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="add">hello harvey</div>
</body>
</html>

优先级

当多个命令匹配同一个标签时，优先级最高优先。
优先级遵循相加机制，当嵌套标签时，#div{ }的优先级是100，#div p{ }(匹配id为div标签的后代标签p)的优先级为100+1，高于只用id匹配。
当优先级相同时，后来者居上，即遵循最下面那行的匹配方式。
当用到 !important 时，优先级高于所有，若多个用到importance的匹配命令比较，则遵循优先级相同的机制。

https://www.cnblogs.com/yuanchenqi/articles/5977825.html

优先级 = 1000
直接使用style <div class="div1" id="id1" style="color: green">优先级</div>

优先级 = 100
id选择器，#id{......}

优先级 = 10
class选择器，.div1{......}

优先级 = 1
标签选择器，div{......}

优先级 = 无限大
div1{color: rebeccapurple!important;}

内联标签调整画布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*display可以让内联标签拥有块级标签才可以调整大小的属性，结合background-position调整图片位置*/
        /*可以用一张有很多小图标的整合图通过调整图片位置来展现这张大图里包含的不同的小图标，有些位置只需要用到其中一个小图标*/
        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

</body>
</html>

文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            /*首字母大写*/
            text-transform: capitalize;
            /*字间距*/
            word-spacing: 20px;
            /*字母间距*/
            letter-spacing: 10px;
            /*段间距*/
            height: 100px;
            /*背景色*/
            background-color: aquamarine;
            /*左右居中*/
            text-align: center;
            /*行高属性，(上下居中)*/
            line-height: 100px;
        }
    </style>
</head>
<body>

<div>文本属性文本属性文本属性</div>
<div>hello world hello world hello world</div>

</body>
</html>

border--边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            /*border:5px dashed blueviolet;*/
            /*边框颜色*/
            border-color: blueviolet;
            /*边框样式*/
            border-style: solid;
            /*边框厚度*/
            border-width: 5px;
            /*设置边框的左边框颜色*/
            border-left-color: blue;
        }
    </style>
</head>
<body>

<div class="div1"></div>

</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*去掉前面的实心点或者序号*/
        
        ol,ul{
            list-style: none;
        }
        
    </style>
</head>
<body>


<ol>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ol>

<ul>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ul>

<dl>
    <dt>河北省</dt>
    <dd>廊坊</dd>
    <dd>保定</dd>
    <dd>石家庄</dd>
</dl>
</body>
</html>

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span{
            width: 100px;
            height: 100px;
        }

        .div2{
            background-color: yellow;
            /*块级标签改为内联标签*/
            /*display: inline;*/
            display: none;
        }

        p{
            background-color: red;
            /*display: inline;*/
        }

        span{
            background-color: palevioletred;
            /*既有内联标签的特性又有块级标签的特性*/
            display: inline-block;
        }
        a{
            background-color: green;
            display: inline-block;
        }
        .outer{
            /*可以将inline-block默认的空隙取消，让两个文本紧贴在一起*/
            word-spacing: -8px;
        }
    </style>
</head>
<body>


<div class="div2">divvvvv</div>
<p>pppppp</p>


<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>


</body>
</html>

内边距，外边距

border,padding,margin

border（边框）：围绕在内边距和内容外的边框

padding：用于控制内容与边框之间的距离

margin：用于控制元素与元素之间的距离；基本用途是控制元素周围的空间距离，在视觉上达成相互隔开的效果

1、边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了。

2、margin collapse（边界塌陷或者说边界重叠）

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场

1.兄弟div
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，而左右则不会。

2.父子div
如果父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin ；
解决方法：

1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            border: 40px solid rebeccapurple;
            padding: 40px;
            /*margin: 20px;*/
            /*margin-bottom: 40px;*/
            /*margin: 10px 20px 30px 40px;*/
            margin-top: 30px;
            margin-bottom:40px;
        }

        .div2{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /*border: 20px solid red;*/
            /*padding: 5px;*/
            /*margin-top: 40px;*/
        }
        .outer{
            height: 1000px;
            background-color: aquamarine;
            /*border: 1px red solid;*/
            /*padding: 1px;*/
            overflow: hidden;
        }

        .outer2{
            width: 1000px;
            height: 1500px;
            background-color: firebrick;
        }
        body{
            border: 2px solid darkcyan;
            margin: 0px;
        }
    </style>
</head>
<body>

<div class="outer2">

    <div class="outer">

        <div class="div1">hello div1</div>
        <div class="div2"></div>
        <span>uuu</span><span>ooo</span>
    </div>
</div>


</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: beige;
            /*紧贴左边浮起，与正常文本不在一个平面上，下面的正常文本会顶上来占据浮起来的文本的位置*/
            float: left;

        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            float: left;
            /*不允许左边有浮动对象，只会对自身做变动，无法影响其他元素的位置*/
            /*比如此处，不允许左边有，那我会另起一行*/
            clear: left;

        }
        .div3{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
            /*清除右边浮动对象，但无法影响其他元素位置，所以在靠左浮动的情况下无法达到效果*/
            clear: left;

        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }

    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>

清除浮动推荐方法：

利用伪类的after，将class = clearfix添加到需要清除浮动的标签中即可，如果本来就有class，空格隔开。

 .clearfix:after{
            content:"";
            display: block;
            clear: both;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin:0;padding:0;
        }

        .container{
            border:1px solid red;
            width:300px;
            /*也可解决浮动塌陷，但不推荐*/
            /*overflow: hidden;*/
        }
        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
        #box3{
            background-color:pink;
            height:40px;
        }

        .clearfix:after{
            content:"";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

<div class="container clearfix">
    <div id="box1">box1 向左浮动</div>  <!--这样就能让这两个标签单独一行，box3单独一行了-->
    <div id="box2">box2 向右浮动</div>
</div>
<div id="box3">box3</div>
</body>
</body>
</html>

定位属性

1 static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

2 position: relative／absolute

relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute 绝对定位。设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

3 position:fixed

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }

        .div1{
            width: 200px;
            height: 100px;
            background-color: beige;


        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            /*position: relative;*/
            position: absolute;
            left: 100px;
            top:  100px;


        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: green;
            /*position: relative;*/
            /*top:-100px;*/
            /**/



        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;

        }

        .outer{
            position: relative;
        }
        .returnTop{
            width: 80px;
            height: 50px;
            /*一直在某个位置，哪怕滚动条也左右不了*/
            position: fixed;
            bottom: 20px;
            right: 5px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>

<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>

<div style="height: 2000px;background-color: darkgoldenrod"></div>

<div class="returnTop">返回顶部</div>


</body>
</html>

抽屉网作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        a{
            text-decoration: none;  /* 去掉文字下划线*/
        }

        boby{
            font-family: "Times New Roman";
            font-size: 12px;
        }

/********************************head部分*******************************/
        .head-box{
            background-color: #494acd;
            height: 44px;
            width: 100%;
            position: fixed;
        }
        .head-content{
            width: 1016px;
            height: 44px;
            line-height: 44px;
            margin: 0 auto;
            position: relative;
        }
        .head-content .logo{
            display: inline-block;
            width: 121px;
            height: 23px;
            float: left;
            margin-top: 11px;
        }
        .head-content .action-menu{
            float: left;
            margin-left: 5px;
        }
        .head-content .action-menu a.tb{
            display: inline-block;
            margin-left: -3px;
            padding: 0 16px 0 13px;
            color: #cdd0cf;
        }
        /*悬浮颜色*/
        .head-content .action-menu a.tb:hover{
            color: #f4fdff;
            background-color: #5a5bff;
        }
        .head-content .action-menu a.active, .head-content .action-menu a.active:hover{
            color: white;
            background-color: #204982;
        }
    </style>
</head>
<body>
<div class="head-box">

    <div class="head-content">

        <a href="#" class="logo"></a>

        <div class="action-menu">
            <a href="#" class="tb active">全部</a>
            <a href="#" class="tb">42区</a>
            <a href="#" class="tb">段子</a>
            <a href="#" class="tb">图片</a>
            <a href="#" class="tb">挨踢1024</a>
            <a href="#" class="tb">你问我答</a>
        </div>

        <div class="key-search">
            <form action="/" method="post">
                <input type="text" class="search-txt">
                <a href="#" class="i">
                    <span class="ico"></span>
                </a>
            </form>
        </div>

        <div class="action-sign">
            <a href="#" class="register-btn">注册</a>
            <a href="#" class="login-btn">登录</a>
        </div>
    </div>
</div>
</body>
</html>

HHarvey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS引入方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <!--相当于将<style>标签中...
复制链接

扫一扫

CSS

“相关推荐”对你有帮助么？