初识入门css

1,什么是CSS

如何学习

1.CSS是什么

2.CSS怎么用(快速入门)

3.CSS选择器(重点+难点)

4.美化网页(文字,阴影,超链接,列表,渐变....)

5.盒子模型

6.浮动

7.定位

8.网页动画(特效)

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片,网页浮动.....

1.2 发展史

css1.0

css2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO(搜索引擎优化)

css2.1 浮动,定位

css3.0 圆角,阴影,动画..... 浏览器兼容性~

1.3快速入门

建议使用这种规范

css优势:

1.内容和表现分离

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

3.样式十分丰富

4.建议使用独立于HTML的CSS文件

5.利于SEO,容易被搜索引擎收录!

1.4 CSS的3种导入方式

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

<!--    内部样式-->
    <style>
        h1{
            color:red;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级:就近原则   -->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color:red">我是标题</h1>

</body>
</html>

 

拓展:外部样式两种写法

  • 链接式:

    属于html标签

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
  • 导入式:

@import是css2.1特有的

<!--导入式-->
<style>
    @import url("css/style.css");
</style>

首页link和import语法结构不同,前者<link>是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签,同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。

本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。

2,选择器

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

2.1 基本选择器

1,标签选择器:选择一个标签

标签{}

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

    <style>
        /*标签选择器,会选择到页面上所有的这个标签的元素*/
        h1{
            color: red;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

2,类选择器 class:选择所有class属性一致的标签,跨标签

.类名{}

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

    <style>
        /*类选择器格式  .class的名称{}
        好处:可以多个标签归类,是同一个class,可以复用
        */
        .qinjiang{
            color: aqua;
        }
        .kuangshen{
            color: antiquewhite;
        }
    </style>

</head>
<body>

<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="kuangshen">标题3</h1>

</body>
</html>

3,ID选择器:全局唯一!

#id名{}

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

    <style>
        /*
        id选择器:#id名称{}
        id必须保证全局唯一!不遵循就近原则
        id选择器>类选择器>标签选择器
        */
        #qinjiang{
            color: aqua;
        }
        .style1{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 id="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级:id>class>标签

2.2 层次选择器

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

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

2,子选择器,一代,儿子

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

3,相邻选择器 同辈

      /*相邻选择器,只有一个,相邻(向下)*/
       .active + p{
           background: bisque;
       }
    </style>

4,通用选择器

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

2.3 结构伪类

        /*ul的第一个子元素*/
        ul li:first-child{
            background: bisque;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
            background: aqua;
        }
        /*选中p1:定位到父元素,选择当前的第一个元素
        选择当前P元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!
        按顺序
        */
        p:nth-child(2){
            background: aquamarine;
        }
        /*选中父元素下的p元素的第二个
        按类型*/
        p:nth-of-type(1){
            background: red;
        }

 

2.4 属性选择器(常用)

id+class结合~

<!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: 10px;
           background: aquamarine;
           text-align: center;
           color: blue;
           text-decoration: none;
           margin-right: 5px;
           font:bold 20px/50px Arial;
       }
       /*属性名,属性名 = 属性值(正则)
       = 绝对等于
       *=包含这个元素
       ^=以这个开头
       $=以这个结尾
        */
       /*存在id属性的元素          a[]{}*/
       /*a[id]{
           background: yellow;
       }*/
       /*a[class*="links"]{
           background: yellow;
       }*/
       /*选中href中以http开头的元素*/
       /*a[href^=http]{
           background: yellow;
       }*/

       a[href$=pdf]{
           background: red;
       }
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test" >2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.jpg" class="links item">4</a>
    <a href="images/123.png" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="abc.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>

= 绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾

CSS,JS,JQuery,vue都会用到

3,美化网页

3.1 为什么要美化网页

1,有效的传递页面信息

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

3,凸显页面的主题

4,提高用户的体验

span标签:重点要突出的字,使用span套起来

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

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

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

</body>
</html>

3.2 字体样式

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

    <!--
    font-family: 字体
    font-size:  字体大小
    font-weight: 字体粗细
    color:字体颜色
    -->
    <style>
        body{
            font-family: 新宋体;
            color: darkred;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

3.3 文本样式

1,颜色 color

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

3,首行缩进 text-indent:2em;

4,行高 line-heigh: 单行文字上下居中!

5,装饰 text-decoration

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

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

    <!--
    颜色:
    单词
    RGB 0~F
    RGBA A:0~1
    text-align:排版
    text-indent: 2em; 段落首行缩进
    行高,和块的高度一致,就可以上下居中
    -->

    <style>
        h1{
            color:rgba(0,255,255,0.9) ;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .L1{
            text-decoration: underline;
        }
        /*中划线*/
        .L2{
            text-decoration: line-through;
        }
        /*上划线*/
        .L3{
            text-decoration: overline;
        }
    </style>
</head>
<body>

<p class="L1">12345</p>
<p class="L2">12345</p>
<p class="L3">12345</p>

<h1>介绍</h1>
<p class="p1">
    牛奶中钙离子能够与铁剂在十二指肠吸收部位发生竞争,使铁吸收减少,降低疗效。而且牛奶中的磷也可能使铁剂沉淀,影响铁的吸收。
</p>
<p class="p2">
    膏方是中药,牛奶中的钙磷铁易与中药里的有机化合物发生化学反应,生成难溶物,破坏牛奶和药物的有效成分。
</p>
</body>
</html>
--------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    水平对齐~参照物, a,b
    -->
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p>
    <img src="images/a.png" alt="">
    <span>ahdjdchokddkddffff</span>
</p>

</body>
</html>

3.4 阴影

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

 

3.5 超链接伪类

正常情况下,a,a:hover

 /*默认的颜色*/
        a{
            text-decoration: none;
            color:#000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size:50px;
        }

3.6 列表

3.7 背景

背景颜色

背景图片

 <style>
        div{
            width: 1000px;
            height:700px;
            border: 1px solid red;
            background-image: url("images/zjl.png");
            /*默认是全部铺平*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>

4,盒子模型

4.1 什么是盒子

 

margin:外边距

padding:内边距

border:边框

4.2 边框

1,边框的粗细

2,边框的样式

3,边框的颜色

 

4.3 内外边距

盒子的计算方式:你这个元素到底有多大?

margin+border+padding+内容宽度

4.4 圆角边框

4个角

 <style>
        div{
            width:100px;
            height:100px;
            border:10px solid red;
            border-radius: 100px;
        }
    </style>

4.5 盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--margin: 0 auto; 居中
要求:块元素,块元素有固定的宽度
-->
    <style>
        div{
            text-align: center;
        }
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>

5,浮动

5.1 标准文档流

块级元素:独占一行

h1~h6  p  div  列表...

行内元素:不独占一行

span   a   img  

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

5.2 display

这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float

<!--block 块元素
    inline 行内元素
    inline-block是块元素,但是可以内联,在一行!
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

5.3 float

1 左右浮动

5.4父级边框塌陷的问题

clear

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

解决方案:

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

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

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 相对定位

<!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 orangered;
            padding: 0;
        }
        #first{
            background-color: orangered;
            border: 1px dashed #f6b6f6;
            position: relative; /*相对定位:上下左右*/
            top:-20px;
            left: 20px;
        }
        #second{
            background-color: greenyellow;
            border: 1px dashed #97D9E1;
        }
        #third{
            background-color: darkgreen;
            border: 1px dashed #378fc1;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位:position:relative;

相对与原来的位置,进行指定的偏移,相对定位的话,它任然在标准文档流中,原来的位置会被保留

top:-20px; left: 20px;

bottom: -10px; right: 20px;

6.2 绝对定位

<!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 orangered;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: orangered;
            border: 1px dashed #f6b6f6;
        }
        #second{
            background-color: greenyellow;
            border: 1px dashed #97D9E1;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: darkgreen;
            border: 1px dashed #378fc1;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

定位:基于xxx定位,上下左右~

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

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

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

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

6.3 固定定位 fixed

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

6.4 z-index

图层~

z-index:默认是0,最高无限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/img.png" alt=""></li>
        <li class="tipText">学习微服务,找狂神</li>
        <li class="tipBg"></li>
        <li>时间:2022-01-16</li>
        <li>地点:首经贸</li>
    </ul>
</div>
</body>
</html>

opacity:0.5;/背景透明度/

#content{
    width: 556px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 15px;
    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: 556px;
    height: 25px;
    top:40px;
}
.tipBg{
    background-color:orange;
    opacity: 0.5; /*背景透明度*/
}
.tipText{
    color: white;
    z-index: 999;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值