CSS学习笔记（基础）

2022-10-18 07:36:37

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.什么是盒子？

CSS学习笔记（基础）

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>

CSS学习笔记（基础）

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学习笔记（基础）

码农公寓

css

1.什么是CSS?

2.CSS导入方式

3.CSS选择器

1.基本选择器

2.层次选择器

3.结构伪类选择器

4.属性选择器（常用）

4.美化网页元素

1.为什么要美化网页？

2.字体样式

3.文本样式

4.超链接伪类

5.列表

6.背景

背景颜色

背景图片

渐变

7. 背景透明度

5.盒子模型

1.什么是盒子？

2.边框

3.内、外边距

4.盒子的长宽计算方式

5.圆角边框

6.阴影

6. 浮动

1.标准文档流

2.display

3.float

4.父级边框塌陷的问题

5.对比

7.定位

1.相对定位

2. 绝对定位

3. 固定定位fixed

4. z-index

8. 动画

9. 总结

相关文章