CSS学习笔记（基础）

时间：2020-05-25 19:43:52 阅读：49 评论：0 收藏：0 [点我收藏+]

css

——道阻且长，行则将至

1.什么是CSS?

2.CSS导入方式

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

行内样式

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

内部样式表

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

外部样式表

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

3.CSS选择器

1.基本选择器

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

标签选择器

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

类选择器

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

id选择器

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

2.层次选择器

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

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

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

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

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

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

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

/*  通用选择器  */
.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.为什么要美化网页？

有效的传递页面信息
美化网页，吸引用户
凸显页面主题
提高用户体验

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.文本样式

颜色 color字体颜色 background背景颜色
文本对齐方式 text-align
首行缩进 text-indent
行高 line-height 行高和高度一致就可以上下居中

阴影 text-shadow

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

装饰

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

文本图片对齐：水平：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.什么是盒子？

技术分享图片

margin：外边距

padding：内边距

border：边框

2.边框

边框的粗细
边框的样式

边框的颜色

<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;

解决方案：

增加父级元素的高度

增加一个空的div清除浮动

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

overflow

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

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

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

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>

技术分享图片

2. 绝对定位

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

没有父级元素定位的前提下，相对于浏览器边框定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

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

     <!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"  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. 总结

待做

CSS学习笔记（基础）

原文：https://www.cnblogs.com/supfit/p/12960444.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)