CSS学习笔记（基础）

其他 2020-05-25 19:51:33 阅读次数: 0

css

——道阻且长，行则将至

 

1.什么是CSS?

 

2.CSS导入方式

 ####    优先级：就近原则

  1. 行内样式

     <!--行内样式：在标签元素中，编写一个style属性，编写样式即可 多个以分号结尾-->
     <h1 style="color: coral;">标签</h1>

     

  2. 内部样式表

     <!--  内部样式表  -->
     <style>
         h1{
             color: black;
        }
     </style>

     

  3. 外部样式表

     <!--  外部样式表  -->
         <!--  链接式  -->
         <link rel="stylesheet" href="css/style.css">
        <!-- 导入式 一般不用 @import是 CSS2.1特有的-->
        <style>
             @import "css/style.css";
        </style>

     

3.CSS选择器

 

1.基本选择器

优先级： id选择器>class选择器>标签选择器

  1. 标签选择器

     <style>
         /*标签选择器，会选择到页面上所有为这个标签的元素*/
         h1{
             color: #ffffff;
             background: darkcyan;
             border-radius: 10px;
        }
         p{
             font-size: 80px;
        }
     </style>

     

  2. 类选择器

     <style>
         /*类选择器的格式：.class的名称{}
        好处：可以多个标签归类，相当于同一个class，可以复用
        */
         .title1{
             color: aqua;
        }
         .title2{
             color: crimson;
        }
         .title3{
             color: coral;
        }
     </style>

     

  3. id选择器

     <style>
         /*id选择器  id必须保证全局唯一
        格式: #id名称{ }
        */
         #title1{
             color: coral;
        }
         .title1{
             color: darkkhaki;
        }
         .title4{
             color: darkcyan;
        }
         h1{
             color: blueviolet;
        }
     </style>

     

2.层次选择器

  1. 后代选择器：在某个元素的后面（儿孙选择器）

     /* 后代选择器 */
     body p{
         background: crimson;
     }

     

  2. 子选择器：只有一代（儿子选择器）

    /*  子选择器  */
body>p{
    background: blueviolet;
}

     

  3. 相邻兄弟选择器: 同辈 向下一个（一个弟弟选择器）

    /*  相邻兄弟选择器  */
.active + p{
    background: darkcyan;
}

     

  4. 通用选择器： 同辈 向下所有（所有弟弟选择器）

    /*  通用选择器  */
.active~p{
    background: cornflowerblue;
}

     

3.结构伪类选择器

伪类： 条件

/*ul的第一个子元素*/
ul li:first-child{
    background: cornflowerblue;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: darkcyan;
}

/* 选择p1:定位到父元素选择到当前的第一个元素
   选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
   顺序
*/
p:nth-child(1) {
    background: darkkhaki;
}
/* 选中父元素下的类型为p元素的第二个
   类型
*/
p:nth-of-type(2){
    background: crimson;
}

a:hover{
    background: deeppink;
}

 

 

4.属性选择器（常用）

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 30px;
            background: cornflowerblue;
            text-align: center;
            text-decoration: none;
            color: crimson;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }
        /* 选择存在id属性的元素
           格式[属性名/属性名=属性值（可以是正则表达式）]{}
        */
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*a[id=first]{*/
        /*    background: yellow;*/
        /*}*/
        /* 选择class中有links的元素
            = :绝对等于
            *= ：包含
            ^= : 以...开头
            $= : 以...结尾
        */
        /*a[class*="links"]{*/
        /*    background: yellow;*/
        /*}*/
        /* 选择href中以http开头的元素 */
        /*a[href^=http]{*/
        /*    background: yellow;*/
        /*}*/
        /* 选择href中以pdf结尾的元素 */
        a[href$=pdf]{
            background: deeppink;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first" \>01</a>
    <a href="http://www.baidu.com" class="links item active" target="_blank" title="test">02</a>
    <a href="images/123.html" class="links item">03</a>
    <a href="images/123.png" class="links item">04</a>
    <a href="images/123.jpg" class="links item">05</a>
    <a href="abc" class="links item">06</a>
    <a href="/a.pdf" class="links item">07</a>
    <a href="/abc.pdf" class="links item">08</a>
    <a href="abc.doc" class="links item">09</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

 

 

4.美化网页元素

1.为什么要美化网页？

  1. 有效的传递页面信息

  2. 美化网页，吸引用户

  3. 凸显页面主题

  4. 提高用户体验

 

span标签：重点突出的字，使用span标签（本身没有效果，约定俗成）

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

<style>
   #title1{
       font-size: 50px;
   }
</style>
</head>
<body>

欢迎学习 <span id="title1">CSS</span>

</body>
</html>

 

2.字体样式

/*font-family:字体
font-size：字体大小
font-weight:字体粗细
color：字体颜色
*/
body{
    font-family: "Arial Black", 楷体;
    color: cornflowerblue;
}
h1{
    font-size: 70px;
}
.p1{
    font-weight: bold;
}
.p2{
    font-weight: lighter;
}

 

3.文本样式

  1. 颜色 color字体颜色 background背景颜色

  2. 文本对齐方式 text-align

  3. 首行缩进 text-indent

  4. 行高 line-height 行高和高度一致就可以上下居中

  5. 阴影 text-shadow

    /*阴影 水平偏移 垂直偏移 阴影半径 阴影颜色*/
text-shadow: 10px 0px 20px dodgerblue;

  6. 装饰

    /*下划线*/
.l1{
    text-decoration: underline;
}
/*中划线*/
.l2{
    text-decoration: line-through;
}
/*上划线*/
.l3{
    text-decoration: overline;
}
/*去除下划线： text-decoration: none;*/
a{
   	text-decoration: none;
}

  7. 文本图片对齐：水平：vertical-align: center; 上下：vertical-align: middle

    /*对齐：参照物 a,b*/
img,span{
    /*水平*/
    vertical-align: center;
    /*上下*/
    vertical-align: middle;
}

 

4.超链接伪类

/*默认的颜色*/
a{
	text-decoration: none;
	color: darkcyan;
}
/*未访问链接*/
a:link{
	color: black;
}
/*鼠标悬浮时*/
a:hover{
	color: orange;
	background: darkcyan;
	font-size: 25px;
}
/*鼠标点击未释放*/
a:active{
	color: white;
}
/*已访问链接*/
a:visited{
	color: khaki;
}

 

5.列表

/*ul li*/
/*list-style
    none 去掉圆点
    circle 空心圆
    decimal 数字
    square  正方形
*/
ul li{
    height: 25px;
    list-style: none;
    text-indent: 0em;
}

 

 

6.背景

背景颜色

background-color

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 2px solid red;
        /*  默认全部平铺  repeat*/
        background-image: url("images/1.png");

    }
    .div1{
        /*水平*/
        background-repeat: repeat-x;
    }
    .div2{
        /*垂直*/
        background-repeat: repeat-y;
    }
    .div3{
        /*不平铺*/
        background-repeat: no-repeat;
        /*定位*/
        background-position: 200px 2px;
    }
</style>

综合写法

/*  颜色  图片  图片位置   平铺方式*/
background:  #11aebc url("../images/down.png") 205px 7px no-repeat;

渐变

我的垃圾审美

渐变网站

<!--  镜像渐变 ，圆形渐变 -->
<style>
    body{
        background-color: #08AEEA;
        background-image: linear-gradient(45deg, #08AEEA 0%, #2AF598 100%);

    }

 

7. 背景透明度

 /*背景透明度*/
opacity: 0.5;
filter: alpha(opacity=50);

 

 

 

 

5.盒子模型

1.什么是盒子？

image-20200520153417967

margin：外边距

padding：内边距

border：边框

 

2.边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

    <style>
    /*body总有一个默认的外边距,所以我们通常将他们初始化为0px*/
    body{
        margin: 0px;
        padding: 0px;
    }
    /*border:粗细，样式，颜色*/
    #box{
        width: 300px;
        border:1px solid #11aebc ;
    }
    h2{
        font-size: 18px;
        color: white;
        line-height: 40px;
        background-color: #11aebc;
    }
    form{
        background-color: #29bcc9;
    }
    div:nth-of-type(1)>input{
        border: 2px solid #2AF598;
    }
    div:nth-of-type(2)>input{
        border: 2px dashed orange;
    }
</style>

     

3.内、外边距

 

margin: 0 auto; 居中

要求：块元素，块元素有固定的宽度

/*
margin:全部
margin:上下  左右
margin:上 右 下 左

padding如上
 */
#box{
    width: 300px;
    border:1px solid #11aebc ;
    margin: 0 auto;
}
h2{
    margin: 0 0 0 0;
}
div:nth-of-type(1){
    border: 1px solid yellow;
    padding: 10px;
}

 

4.盒子的长宽计算方式

margin+border+padding+内容宽度

 

5.圆角边框

 

<!--
border-radius: 四个角
border-radius: 左上和右下   右上和左下
border-radius: 左上  右上  右下  左下 顺时针方向
-->
<!--
 圆圈：圆角值等于半径值
 -->

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid #2AF598;
        border-radius: 100px 0px 0 0;
    }
</style>css

6.阴影

<!--  边框阴影 x轴  y轴 阴影半径 阴影颜色 -->
box-shadow: 0px 10px 10px red;

 

 

6. 浮动

1.标准文档流

块级元素：独占一行

h1~h6 p div 列表......

行内元素：不独占一行

span a img strong......

行内元素 可以被包含在 块级元素中，反之则不可以。

2.display

<!-—
        block:块元素
        inline:行内元素
        inline-block：是块元素，但是可以内联 在一行！
        none： 
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 2px solid #11aebc;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 2px solid #11aebc;
            display: inline;
        }
    </style>

 

3.float

/*左浮*/ 
float:left;

 

4.父级边框塌陷的问题

 

clear：

/*左侧不允许有浮动*/
clear:left;
/*左侧不允许有浮动*/
clear:right;
/*两侧都不允许有浮动*/
clear:both;
clear:none;

 

解决方案：

  1. 增加父级元素的高度

  2. 增加一个空的div清除浮动

    <div class="clear"></div>
<style>
.clear{
	clear:both;
	margin:0;
	padding:0;
}
</style>

  3. overflow

    在父级元素中增加一个：overflow: hodden;

  4. 在父类添加一个伪类：after 推荐使用

    #father:after{
	content:'';
    display:block;
    clear:both;
}

     

  5. image-20200521223243193

5.对比

  • display

    方向不可控制

  • float

    浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题~

 

7.定位

1.相对定位

相对定位position：relative

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

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

    <style>
        body{
            padding: 50px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 20px;
            line-height: 30px;
        }
        #father{
            border: 1px solid #11aebc;
            padding: 0;
        }
        #first{
            background-color: yellow;
            border: 1px dashed red;
            /*相对定位*/
            position: relative;
            top: -50px;
            left: 50px;
        }
        #second{
            background-color: cornflowerblue;
            border: 1px dashed black;
        }
        #third{
            background-color: aquamarine;
            border: 1px dashed orange;
            position: relative;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

image-20200521225850195

2. 绝对定位

定位：基于XXX定位，上下左右~

  1. 没有父级元素定位的前提下，相对于浏览器边框定位

  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  3. 在父级元素范围内移动

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

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>绝对定位</title>
     
         <style>
             body{
                 padding: 50px;
             }
             div{
                 margin: 10px;
                 padding: 5px;
                 font-size: 20px;
                 line-height: 30px;
             }
             #father {
                 border: 1px solid #11aebc;
                 padding: 0;
                 position: relative;
             }
             #father :after{
                 content: '';
                 display: block;
                 clear:both;
             }
             #first{
                 background-color: yellow;
                 border: 1px dashed red;
             }
             #second{
                 background-color: cornflowerblue;
                 border: 1px dashed black;
             }
             #third{
                 background-color: aquamarine;
                 border: 1px dashed orange;
                 position: absolute;
                 right: 30px;
             }
             #fourth{
                 background-color: red;
                 border: 1px dashed orange;
                 position: absolute;
                 right: 10px;
             }
             #firth{
                 color:white;
                 background-color: black;
                 border: 1px dashed orange;
                 position: absolute;
                 right: 60px;
             }
         </style>
     </head>
     <body>
     <div id="father">
         <div id="first">第一个盒子</div>
         <div id="second">第二个盒子</div>
         <div id="third">
             第三个盒子
             <div id="fourth">第四个盒子</div>
             <div id="firth">第五个盒子</div>
         </div>
     </div>
     </body>
     </body>
     </html>

 

3. 固定定位fixed

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

    <style>
        body{
            height: 1000px;
        }
        /*绝对定位相对于浏览器*/
        div:nth-of-type(1){
            width:100px;
            height: 100px;
            background-color: #2AF598;
            position:absolute ;
            right: 0;
            bottom: 0;
        }
        /*固定定位*/
        div:nth-of-type(2){
            width:50px;
            height: 50px;
            background-color: orange;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

 

4. z-index

图层

z-index：默认是0，最高无限

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

    <style>
        #content{
            width: 200px;
            padding: 0;
            margin: 0;
            overflow: hidden;
            font-size: 12px;
            line-height: 20px;
            border: 2px solid #11aebc;
        }
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /*  父级元素相对定位  */
        #content ul{
            position: relative;
        }
        .tipText,.tipBg{
            position: absolute;
            width: 380px;
            height: 25px;
            top: 125px;
        }
        .tipBg{
            background-color: black;
            /*背景透明度*/
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        .tipText{
            color: white;
            line-height: 25px;
            z-index: 16;
        }
    </style>
</head>

<body>
<div id="content">
    <ul>
        <li><img src="images/2B.jpg" alt="" width="200px" height="150px"></li>
        <li class="tipText">2B</li>
        <li class="tipBg"></li>
        <li class="time">时间：2099-01-01</li>
        <li class="address">地点：火星</li>
    </ul>
</div>
</body>
</html>

 

 

8. 动画

css3新特性

 

 

 

 

9. 总结

待做

猜你喜欢

转载自www.cnblogs.com/supfit/p/12960444.html
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022