CSS基础知识

1、CSS基本概念

1.1 - 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS： 表现（美化页面）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动···

1.2、发展史

CSS1.1

CSS2.0 DIV（块）+CSS ，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画··· 浏览器兼容性~

 

1.3、快速入门

style 样式表

css的优势：

1、内容和表现分离

2、页面结构变现统一，可以实现复用

3、样式十分丰富

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

5、利用SEO，容易被搜索引擎收录

 

1.4、CSS的3种导入方式

行内样式

内部样式

外部样式

拓展：外部样式两种写法

链接式： 

    <link rel="stylesheet" href="2%E3%80%81css%E7%9A%84%E5%A4%96%E9%83%A8%E5%BC%95%E7%94%A8.css">

导入式:(他是CSS2.1特有的）

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

 

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器（重点）

1、标签选择器：选择一类标签 标签{}

    <!--标签选择器，会选择到页面上所有的这个标签的元素-->
    <style>
        h3{
            font-size: 45px;
            color: aqua;
            background: #1564;
            border-radius: 25px;
        }
        p{
            font-size: 90px;
            
        }
    </style>
</head>
<body>
    <h3>hello html</h3>
    <p>这是我的第一个程序！</p>
</body>

</html>

2、类 选择器 class：选择所有class属性一直的标签，跨标签 .类名{}

<html> <head> <meta charset="utf-8"> <title>test</title>

    <style>
        /*类选择器的格式  .class的名称{}
        好处，可以多个标签归类，是同一个class的可以复用*/
        
        .panyaz{
            color: red;
        }
        .yaya{
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="panyaz">标题一</h1>
    <h1 class="yaya">我是标题</h1>
    <h1 class="panyaz">hello html</h1>
    <p class="panyaz">这是我的第一个程序！</p>
</body>

</html>

3、id选择器 #id名{}

<html> <head> <meta charset="utf-8"> <title>test</title>

    <style>
        /*id选择器：id必须保证全局唯一
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class选择器>类选择器
        */
        h3{
            font-size: 45px;
            color: aqua;
            background: #1564;
            border-radius: 25px;
        }
        p{
            font-size: 90px;
            
        }
    </style>
</head>
<body>
    <h1>hello html</h1>
    <h2>你好</h2>
    <h3>我是你爸爸</h3>
    <p>这是我的第一个程序！</p>
</body>

</html>

优先级：id>class>标签

 

2.2、层次选择器（高级）

1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你

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

 

2、子选择器：一代，儿子

/*子选择器*/
        body >p{
            background: #458484
        }

 

3、相邻兄弟选择器: 同辈

/*兄弟选择器:只有一个，相邻向下*/
        .active + p{
            background: #124451;
        }

 

4、通用选择器

 /*通用选择器,当前选中元素向下的所有元素*/
        .active~p{
            background: #254484;
        }

2.3、结构伪类选择器（高级）

伪类：条件

p:

<style>
        /*u1的第一个子元素*/
        ul li:first-child{
            background: #4184;
        }
        
        /*u1的最后一个子元素*/
        ul li:last-child{
            background: #454884;
        }
    </style>

 

2.4、属性选择器（常用）（高级）

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    
    <style>
        /*后代选择器*/
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #154995;
            text-align: center;
            color: gainsboro;
            text-decoration: none; /*去除文字下划线*/
            margin-right: 20px;
            font: bold 20px/50px Arial;
        }
        
        /*属性名. 属性名=属性值（正则）
        = 绝对等于
        *= 包含这个
        */
        /*存在id属性的元素*/
        /*a[id]{
            background: yellow;
        }*/
        
        /*id=first的元素*/
        /*a[id=first]{
            background: yellow;
        }*/
        
        /*class中有links 的元素*/
       /* a[class *= "links"]{
           background: yellow; 
        }*/
        
        /*选择href中以http开头的元素*/
       /* a[href ^= http]{
            background: yellow; 
        }*/
        
        /*选择href中以doc结尾的元素*/
        a[href $=doc]{
            background: yellow; 
        }
    </style>
    
</head>
<body>
    <p class="demo">
        
        <a href="http://www.baidu.com" class="links itme first" id="first">1</a>
        <a href="http://www.jd.com" class="links item active" target="_blank" title="test">2</a>
        <a href="images/123.html" class="links item">3</a>
        <a href="images/123.png" class="links item">4</a>
        <a href="images/123.jpg" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="/abc.pdf" class="links item">8</a>
        <a href="abc.doc" class="links item">9</a>
        <a href="abcd.doc" class="links item last">10</a>
    </p>
</body>
</html>

 

image-20211128175621922

= 绝对等于
*= 包含所有
^= 以什么开头
$= 以什么结尾

 

 

3、美化网页页面

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

 

span 标签：重点要突出的字，使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    
    <style>
        #span{
            font-size: 35px;
            color: red;
        }
    </style>
</head>
<body>
       <p >
           我在学习<span id="span" class="java">java</span>
    </p>
</body>
</html>

 

3.2、字体样式

<style> /** font-family:字体 font-size:字体大小 font-weight:字体粗细 color: 字体颜色 */ body{ font-family: monospace; color: aqua; } h1{ font-size: 50px; } .p1{ font-weight: 800; color: blue; } </style>

 

3.3、文本样式

1、颜色 color rgb rgba

2、文本对齐方式 text-align = center

3、首行缩进 text-indent:2em

4、行高 line-height:

5、装饰（去下划线） text=decoration:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
​
    <style>
        /*
        颜色：
        单词
        RGB 0~F
        GRBA A:0~1
        
        text-align: 排版，居中
        text-indent: 2em; 段落，首行缩进，一个em代表一个字符
        height:
        line-height:
        行高，和块的高度一致，就可以上下居中
        */
        h1{
            color: aqua;
            text-align:center;
        }
        p{
            text-indent: 2em;
            height: auto;
            line-height: inherit;
        }
        
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
         /*中划线*/
        .l2{
            text-decoration: line-through;
        }
         /*上划线*/
        .l3{
            text-decoration: overline;
        }
        
        /*文字和图片居中对齐
        水平对齐————参照物a,b
        */
        #img,#span{
            vertical-align: middle;
        }
        
    </style>
    
</head>
<body>
    <p class="l1">12345678</p>
    <p class="l2">12345678</p>
    <p class="l3">12345678</p>
    
    <p>
        <img src="girl.jpg" id="img"  alt="" height="80px" width="80px">
        <span id="span">你好这是一张图片</span>
    </p>
  
    <h1>故事介绍</h1>
    <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔!魁拔的每一次出现，都会给元泱境界带来巨大的灾难!即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。</p>
    <p>魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
       
</body>
</html>

 

3.4、阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #351488 10px -10px 2px;
        }

 

3.5、超链接伪类

正常情况下，a ,a:hover

   <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000;
        }
        /*鼠标悬浮的状态（只需要记住：hover）*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
    </style>

 

3.6、列表

#nav{
    width: 300px;
    background: #1545;
}
.title{
    color: chocolate;
    text-indent: 0.5em;
    background: red;
    border-radius: 20px;
    font-weight: 100;
   /* text-align: center;*/
}
/*list-style:
    none  去掉原点
    circle  空心圆
    decimal  数字
    square  正方形
*/
ul li{
    height: 30px; /*设置li的行高*/
    list-style: none   ; 
    text-indent: lem;
    font-family: cursive; /*设置字体*/
}
a{
    text-decoration: none; /*去除下划线*/
    color: black;
    font-size: 20px;  
}
a:hover{
    color: orange;  /*选中变色*/
    text-decoration: underline; /*添加下划线*/
}

3.7、背景

背景颜色

背景图片：repeat、渐变背景、https://www.grabient.com/

3.8、渐变

 

4、盒子模型

4.1、什么是盒子

 

margin: 外边距

padding：内边距

border：边框

content:内容

4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

4.3、内外边距

盒子的计算方式，你这个盒子到底有多大

<!DOCTYPE HTML> <!--告诉浏览器，我们使用什么规范-->
<html> <!--主标签-->
​
<head> <!--head代表网页头部-->
    <meta charset = "utf-8"> <!--meta标签，他用来面试我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <title>java script</title> <!--title标签代表网页标题-->
    
    <style>
        /*body:总有一个默认的外边距margin：0*/
        /*默认初始化操作*/
       /* h1,ul,li,a,body{
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }*/
        body{
            margin: 0px;
        }
        /*border:
           粗细 border-style: solid（实线）;
           颜色 border-color: red;
           宽度 border-width: 2px
        */
        #box{
            width: 300px;
            border-style: solid;
            border-color: red;
            border-width: 2px;
            margin: 0 auto;
            background-color: bisque;
        }
        input{
            border: 2px solid #451854;
        }
        h2{
            text-align: center;
            color: green;
            font-size: 20px
        }
        
    </style>
  
</head>
    <body> <!--body标签代表网页主题-->
        <div id="box">
            <h2>会员登录</h2>
            <form action="#">
                <div>
                    <spam>用户名：</spam>
                    <input type="text">
                </div>
                <div>
                    <spam>密码：</spam>
                    <input type="text">
                </div>
                <div>
                    <spam>邮箱：</spam>
                    <input type="text">
                </div>
            </form>
            
        </div>
    </body>
</html>

 

 

盒子模型总的面积：margin+border+padding+内容宽度

 

4.4、圆角边框

<!DOCTYPE HTML> <!--告诉浏览器，我们使用什么规范-->
<html> <!--主标签-->
​
<head> <!--head代表网页头部-->
    <meta charset = "utf-8"> <!--meta标签，他用来面试我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <title>java script</title> <!--title标签代表网页标题-->
  
    <style>
        /*左上   右上   右下   左上
        
        画圆：圆角至少等于宽高的一半：圆角=半径
        */
        
        div{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            border-radius: 150px; /*圆角边框*/
            
        }
    </style>
</head>
    <body> <!--body标签代表网页主题-->
    <div></div>
    </body>
</html>

4.5、盒子阴影

<!DOCTYPE HTML> <!--告诉浏览器，我们使用什么规范-->
<html> <!--主标签-->
​
<head> <!--head代表网页头部-->
    <meta charset = "utf-8"> <!--meta标签，他用来面试我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <title>java script</title> <!--title标签代表网页标题-->
  
    <style>
        /*
        */
        
        div{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            box-shadow: 10px 10px 1px yellow;
            background-color: aqua
            
        }
    </style>
</head>
    <body> <!--body标签代表网页主题-->
    <div></div>
    </body>
</html>

5、浮动

5.1、标准文档流 介绍

image-20211129193254553

块级元素：独占一行

h1~h6   p   div  列表···

 

行内元素：不独占一行

span  a   img   strong...

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

5.2、display

<!DOCTYPE HTML> <!--告诉浏览器，我们使用什么规范-->
<html> <!--主标签-->
​
<head> <!--head代表网页头部-->
    <meta charset = "utf-8"> <!--meta标签，他用来面试我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <title>java script</title> <!--title标签代表网页标题-->
        
    <style>
        /*
        block  块元素
        inline  行内元素
        inline-block 是块元素，但是可以内联，在一行！
        none 消失
        */
        div{
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            display: inline-block;
        }
        
        
        span{
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            display: inline-block;
        }
    
    </style>
</head>
    <body> <!--body标签代表网页主题-->
        <div>div块元素</div>
        <br>
        <span>span行内元素</spa>
    </body>
</html>

block 块元素 ​ inline 行内元素 ​ inline-block 是块元素，但是可以内联，在一行！ ​ none 消失

1、这个也是一种实现行内元素排列的方式，但是我们很多时候都是使用float

5.3、float

1、左右浮动 float

div{
    margin: 10px;
    padding: 5px;
​
}
#father{
    border: 1px #000 solid;
}
.l1{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.l2{
    border: 1px #8528 dashed;
    display: inline-block;  
    /*float: right;*/
}
.l3{
    border: 1px #6547 dashed;
    display: inline-block;  
    float: right;
    clear: both;
}
.l4{
    border: 1px #060 dashed;
    display: inline-block; 
    font-size: 10px;
    line-height: 30px;
    display: inline-block;
    float: right;
}

 

5.4、父级边框塌陷的问题

clear（清除浮动）

/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;  没有浮动
*/

 

解决方法

1、增加父级元素的高度~

#father{
    border: 1px #000 solid;
    height: 980px;
}

 

2、增加一个空的div标签，清除浮动

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

 

3、overflow

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

 

4、父类添加一个伪类：after

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

 

小结：

1、浮动元素后面增加空的div

简单，代码中尽量避免空的div

2、设置父元素的高度

简单，假设元素有了固定的高度，就会被限制

3、overflow

简单，下拉的一些场景避免使用

4、在父类中增加伪类：after（推荐）

写法稍微复杂一点，但是没有什么副作用，推荐使用

 

5.5、对比

display ：方向不可以控制

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

 

6、定位

6.1、相对定位

相对定位：position:relative;

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

top: -20px;
left: 20px;
bottom: -10px;
right:20px;

 

练习：链接卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    
    <style>
        #box{      
            width: 300px;
            height: 300px;
            margin: 30px;
            padding: 0px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ffa1f2;
            line-height: 100px;
            text-align: center;  /*文本居中*/
            color: white;
            display: block; /*将行元素转换为块元素*/
        }
        a:hover{
            background: blue;
        }
        .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>

 

6.2、绝对定位（absolute）

定位：基于xxx定位，上下左右

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

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

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

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

6.3、固定定位（fixed）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed:固定定位*/
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: -10px;
            
        }
    </style>
</head>
<body>
     <div>div1</div>  
     <div>div2</div>  
</body>
</html>

 

6.4、z-index

图层

z-index:默认是0，最高无限 ~999

opacity:0.5; //背景透明度

 

7、动画

 

8、总结

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2021-12-15 00:04  燈塔  阅读(171)  评论(0)    收藏  举报