css学习笔记

最新推荐文章于 2024-06-14 14:36:26 发布

熬夜的大蟒蛇

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量600

点赞数

文章标签： css 学习笔记

本文链接：https://blog.csdn.net/qq_45673892/article/details/131466727

版权

CSS的优势：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被引擎收录

CSS三种导入方式

就近原则，哪种样式距离修饰内容近，就选择那个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--内部样式-->
        h1{
            color:chartreuse;
        }
    </style>
</head>
<body>
<link rel="stylesheet" href="style.css">
<!--行内样式：在标签内编写style属性-->
<h1 style="color: aqua">hello,world!</h1>
</body>
</html>

外部样式两种写法
链接式：

<link rel="stylesheet" href="style.css">外部样式

导入式：

<style>
        @import url("style.css");
    </style>

选择器：选择页面某一个，或者某一类元素

标签选择器：会选择这个页面所有标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器会对统一标签进行选择-->
    <style>
        h1{
            color: #27c52e;
            background: aqua;
            border-radius: 34px ;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>好好学习</h1>
<h1>天天向上</h1>
<p>hello,world</p>
</body>
</html>

类选择器：可以复用。形式为：英文状态下点加类名加大括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .qingjiang{
            color: aqua;
        }
        .kuangshen{
            color: blue;
        }
    </style>



</head>
<body>
<h1 class="qingjiang">好好学习</h1>
<h2 class="kuangshen">好好学习</h2>
<h3>好好学习</h3>

</body>
</html>

id选择器：全句唯一，不可复用。形式为：英文状态下井号加ID名加大括号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#qingjiang{
    color: brown;
}
    </style>
</head>
<body>
<h1 id="qingjiang">世上无难事</h1>
<h1 >世上无难事</h1>

</body>
</html>

ID选择器>类选择器>标签选择器

层次选择器：

1.后代选择器在某个元素后边

<style>
        body p{
            background: aqua;
        }
    </style>

2.子选择器

body>p{
            background: blue;
        }

3.相邻兄弟选择器:对下边相邻的内容进行选择

.active+p{
            background: aqua;
        }

4.通用选择器：对向下所有兄弟

.active~p{
            background: aqua;
        }

5.结构伪类选择器

ul li:first-child{
            background: antiquewhite;
        }
        ul li:last-child{
            background: #27c52e;
        }
p:nth-child(1){/*对父元素的第几个元素进行操作*/
            background: blue;
        }
        p:nth-of-type(2){/*对p元素第几个操作*/
            background: red;
        }

6.属性选择器

=是绝对等于

*=包含这个元素

^=以这个开头

$=以这个结尾

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #title1{
      font-size: 80px;
        }
        /*font-family:字体
        font-size:字体大小
        font-weight：字体粗细
        color:字体颜色
        */
        body{
            font-family: 华文楷体;
            color: aqua;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

</head>
<body>
<h1>第一章</h1>
<p class="p1">“天家儿郎，凭我挑选，便是当着陛下的面，此话我亦敢言。”
    她高贵、冷艳、睥睨众生，世间无一人一事能令她动容。
    直到她遇见了那一杯顶级雨前龙井。
    他为贪腐尚书屈膝求情：“罪不祸及妻儿。”
    百官感念：太子仁善。</p>
<p>只有她知，罪是他揭露，尚书之位是他的人接手。
他为疑似谋逆亲王奔走：“二哥孝悌，孤不信他大逆不道。”</p>
</body>
</html>

文本样式

1.颜色rgb rgba

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       h1{
           /*rgb:000000-ffffff
           rgba a:0-1
            text-align:文字对齐方式
            text-indent: 2em;首行缩进
            line-height: 100px;行高
            行高跟块高一致就可以上下居中
           */
           color:rgba(128,128,188,0.9) ;
           text-align: center;
       }
        .p1{
            text-indent: 2em;
            line-height: 100px;
        }
        /*上划线中划线下划线*/
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
       .l3{
           text-decoration: overline;
       }
    </style>

</head>
<body>
<h1>第一章</h1>
<p class="l1">111111</p>
<p class="l2" >3333333</p>
<p class="l3" >22222222</p>
<p class="p1">“天家儿郎，凭我挑选，便是当着陛下的面，此话我亦敢言。”
    她高贵、冷艳、睥睨众生，世间无一人一事能令她动容。
    直到她遇见了那一杯顶级雨前龙井。
    他为贪腐尚书屈膝求情：“罪不祸及妻儿。”
    百官感念：太子仁善。</p>
<p>只有她知，罪是他揭露，尚书之位是他的人接手。
他为疑似谋逆亲王奔走：“二哥孝悌，孤不信他大逆不道。”</p>
</body>
</html>

2.文本对齐方式text-align:center;

3.首行缩进text-indent;

4.行高line-height=height单行文字水平居中

5.装饰text-decoration去装饰

6.图片文本水平对齐：vertical-align:middle

阴影

  /*阴影颜色，水平距离，垂直距离，阴影模糊程度*/
            text-shadow: aqua 10px 5px 1px;

超链接伪类

 a{
            text-decoration: none;
            color: black;
        }
        /*鼠标点击*/
        a:hover{
            color: yellow;
            font-size: 50px;
        }

列表

#nav{
    width: 300px;
}
.title{
    line-height: 40px;
    text-indent: 1em;
    font-size: 18px;
    font-weight: bold;
    background: blue;
}
/*list-style:
none去掉黑点
circle变成空心圆
decimal变成数字
suqare正方形*/
ul{
    background: gray;
}
ul li{
    list-style: none;
    height: 30px;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 15px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

渐变

body {
            /*background-color: #0093E9;*/
            background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

        }
/*graient网站*/

盒子模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            border:1px solid cornflowerblue;
        }
        form{
            background: yellow;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:2px dashed deeppink;
        }
    </style>
</head>
<body>
<div id="box">
   <h2>会员登录</h2>
    <form action="#">
    <div>
        <span>用户名：</span>
        <input type="text">
    </div>
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

边框border:

边框颜色：

边框距离：

边框样式：

外边距margin

内边距padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            border:1px solid cornflowerblue;
        }
        h2{font-size: 30px;
            background-color: yellow;
            line-height: 30px;
            margin: 0 auto;
            color: #27a82a;
        }
        form{
            background: yellow;
        }
        div:nth-of-type(1){
            border:3px solid black;
            padding: 10px;
        }
        div:nth-of-type(2) input{
            border:2px dashed deeppink;
        }
    </style>
</head>
<body>
<div id="box">
   <h2>会员登录</h2>
    <form action="#">
    <div>
        <span>用户名：</span>
        <input type="text">
    </div>
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

display:把行和块进行调整通过display：inline-block,使得行和块互通。float：是把行块元素进行左右浮动，进行这种操作，会出现一些元素突出，可以使用第一：把父区域高度调大。第二：把设置div通过clear:both,和margin:0,padding:0设置。第三通过overflow来设置hidden完成。第四父元素添加伪类after:content:";display:block;clear:both;(最常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #contend{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="contend">
    <img src="image/1.jpg" alt="">
    <p>《哈哈哈哈哈第二季》是由爱奇艺、腾讯视频出品的励志旅行真人秀，“五哈旅行团”由邓超、陈赫、鹿晗、彭昱畅、郭京飞、王勉组成，共11期。 [4-5] [7]
        节目由嘉宾们组成“五哈旅行团”从繁忙琐碎的日常生活中挤出时间开启穿越中国的旅途，讲好“与我有关”的普通人的生活故事。 [3]
        节目于2021年11月20日起每周六、周日晚20:00播在爱奇艺、腾讯视频联合播出，于2022年1月30日完结</p>。
</div>
</body>
</html>

相对偏移:相对于原来的位置进行偏移，它仍然在标准文档流中，原来的位置会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位相对于自己原来的位置进行偏移-->
    <style>
        div{
            margin:10px;
            padding:5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0px;
        }
        #first{
            background-color: #27c52e;
            border: 1px dashed #0093E9;
            position: relative;
            top: -20px;

        }
        #second{
            background-color: #c5332f;
            border: 1px dashed #a85c9a;
        }
        #third{
            background-color: #269189;
            border: 1px dashed #291d19;
            position: relative;
            bottom: 40px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

方块练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            line-height: 100px;
            background: deeppink;
            text-align: center;
            color: black;
            display: block;
        }
        a:hover{
            background: #0093E9;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top:-100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

绝对定位：

1.父元素没有定位，相对于浏览器定位。

2.父元素定位，相对于父元素定位

3.在父元素内移动。

绝对偏移:相对于浏览器或父元素进行偏移，它不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位相对于自己原来的位置进行偏移-->
    <style>
        div{
            margin:10px;
            padding:5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0px;
            position: relative;
        }
        #first{
            background-color: #27c52e;
            border: 1px dashed #0093E9;


        }
        #second{
            background-color: #c5332f;
            border: 1px dashed #a85c9a;
            position: absolute;
            left: 100px;
        }
        #third{
            background-color: #269189;
            border: 1px dashed #291d19;

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位：fixed

z-index:

#content{
    width: 280px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size:12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;

}
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 280px;
    height: 25px;
    top: 120px;
}
.tipText{
    color: #0093E9;
    z-index: 999;
}
.tipBg{
    background: #291d19;
    /*opacity:0.5;*/
}

熬夜的大蟒蛇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记

display:把行和块进行调整通过display：inline-block,使得行和块互通。float：是把行块元素进行左右浮动，进行这种操作，会出现一些元素突出，可以使用第一：把父区域高度调大。第二：把设置div通过clear:both,和margin:0,padding:0设置。绝对偏移:相对于浏览器或父元素进行偏移，它不在标准文档流中，原来的位置不会被保留。相对偏移:相对于原来的位置进行偏移，它仍然在标准文档流中，原来的位置会被保留。类选择器：可以复用。2.父元素定位，相对于父元素定位。
复制链接

扫一扫