CSS简单操作

于 2020-10-01 09:59:10 发布
阅读量293 收藏 1
点赞数 1
文章标签： css html intellij idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BitZ2/article/details/108893325
版权

CSS简单操作

1 、什么是CSS

Cascading Style Sheet 层叠样式表

css：美化网页

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

1.2 发展史

css1.0

css2.0 DIV块+CSS、HTML与CSS结构分离的意思、网也变得简单，SEO

css2.1 浮动、定位

css3.0 圆角、阴影、动画…… 浏览器的兼容性

1.3 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--写CSS代码-->
    <style>
        h1{
           color：red;
        }
    </style>
</head>
<body>
<h1 >标题1</h1>
</body>
</html>

建议使用下面这种方式

在这里插入图片描述

css的优势

1.内容和表现分离

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

3.样式丰富

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

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

1.4 CSS的三种导入方式

<!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: green">这是标题</h1>

</body>
</html>

拓展：外部样式的两种写法

  • 链接式

​ html

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

​ @import是CSS2.1特有的

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

2、选择器

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

2.1 基本选择器

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

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

3、id选择器: 全局唯一 #id名{}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        /*标签选择器*/
         h1{
             color: red;
         }
        /*id选择器*/
        #A{
            color: green;
        }
        /*class选择器*/
        .B{
            color: black;
        }
    </style>
    
</head>
<body>

<h1 id="A">标题1</h1>
<h1 class="B">标题2</h1>

</body>
</html>

优先级： id > class >标签

2.2 层次选择器

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

2、子选择器

3、相邻兄弟选择器

4、通用选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器练习</title>

    <style>
/*1.后代选择器*/
/*    body p{*/
/*        background: green;*/
/*    }*/

/*2.子选择器*/
/*     body>p{*/
/*         background: #1818de;*/
/*     }*/

/*3.相邻兄弟选择器  相邻是指向下（只一个）*/
/*      .active + p{*/
/*          background: red;*/
/*      }*/

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

</head>
<body>
   <p>p0</p>
   <p class="active">p1</p>
   <p>p2</p>
   <p>p3</p>
   <ul>
       <li>
           <p>p4</p>
       </li>
       <li>
           <p>p5</p>
       </li>
       <li>
           <p>p6</p>
       </li>
   <p class="active">p7</p>
       <p>p8</p>
</ul>
</body>
</html>

2.3 结构伪类选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        /* 选中ui第一个子元素*/
        ul li:first-child{
            background: #1818de;
        }
        /*选中ul最后一个子元素*/
        ul li:last-child{
            background: blueviolet;
        }
        /*选择当前p元素的父级元素，父级元素中的第一个元素，并且是当前元素*/
        p:nth-child(1){
            background:black ;
        }
        /*选择父元素下的 p元素的第二个*/
        p:nth-of-type(2){
            background: yellow;
        }

    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

2.4 属性选择器

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

    /*
    = 绝对等于
    *= 包含这个属性的等于
    ^= 以...开头的
    $= 以...结尾的

    属性名  [属性名 = 属性值（正则）

    a[属性名 = 属性值（正则）]{
    
    }
    */

</head>
<body>
</body>
</html>

3、美化网页元素

3.1 字体样式

<!--
font-family:字体
font-size: 字体大小
font-weight: 字体粗细
color : 字体颜色
-->

3.2 文本样式

1、颜色 color rgb rgba

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

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

4、行高 line-height

5、装饰 text-decration

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式练习</title>

    <style>
        .l1{
            font-size: large;
            font-size-adjust: inherit;
            rgb: #00ff00;
            text-align: center;   /*排版 居中*/
            text-indent: 2em;     /*段落首行缩进*/

        }
        .l2{
            text-indent: 2em;
            font-size: medium;
            line-height: normal;
        }
        .l3{
            text-align: right;
        }

    </style>

</head>
<body>

<p class="l1">
    项目复杂的时候一定要用到注释，这样方便自己或者他人理解
</p>

  <p class="l2">
      注释不会被执行
  </p>
<p class="l3">
    写注释是一个非常好的习惯

</p>

</body>
</html>

3.3 阴影

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

3.4 超链接伪类

正常情况下 a，a:hover

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

代码：

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

    <style>
        a{
            text-decoration: none;
            color: #1818de;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: darkorange;
            font-size: 20px;
        }
        /*鼠标按下未释放的状态*/
        a:active{
            color: red;
        }
        /*本文阴影*/
        .A{
            text-shadow: #1818de 5px -50px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/b.png" alt="">
</a>
<p><a href="#">码出高效：Java开发手册</a>
</p>
<p >
    <a href="#">作者：孤尽老师</a>
</p>
<p class="A">￥99</p>

</body>
</html>

3.5 列表

练习

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

<div class="nav">
    <h2>商品列表</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">电子书</a></li>
        <li><a href="#">手机</a>&nbsp;&nbsp;<a href="#">电脑</a>&nbsp;&nbsp;<a href="#">电子产品</a></li>
        <li><a href="#">服装</a>&nbsp;&nbsp;<a href="#">衣物</a>&nbsp;&nbsp;<a href="#">手表</a></li>
        <li><a href="#">电脑硬件</a>&nbsp;&nbsp;<a href="#">耳机</a>&nbsp;&nbsp;<a href="#">汽车</a></li>
        <li><a href="#">电子产品周边</a>&nbsp;&nbsp;<a href="#">日常用品</a>&nbsp;&nbsp;<a href="#">器材</a></li>
        <li><a href="#">耳机</a>&nbsp;&nbsp;<a href="#">动漫手办</a>&nbsp;&nbsp;<a href="#">运动</a></li>

    </ul>
</div>

</body>
</html>

.nav{
    width: 400px;
    font-size: large;
    font-weight: bold;
    text-indent: 1em;
    background: red;
}
h2{
    font-size: 25px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 25px;
}
ul{
    background: gray;
}
ul li{
    list-style: none;
    text-indent: 1em;
    line-height: 40px;
    background: url("../images/a.png") 300px 5px no-repeat;

}
a{
    text-decoration: none;
    color: #000;
}
a:hover{
    background: coral;
}

4、盒子模型

4.1 模型

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2边框

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

    <style>
        /*border:样式 粗细 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: lime;
        }
        div:nth-of-type(1) input{
            border: 1px solid black;
        }
        div:nth-of-type(2) input {
            border: 1px solid red;
        }
        h2{
            background: blue;
            margin: 0;
        }
    </style>
    
</head>
<body>

<div id="box">
    <h2>用户登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

4.3圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角练习</title>
    
    /*顺时针，左上 右上 右下 左下*/
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            border-radius: 50px  ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

5、浮动

块级元素：独占一行

h1~h6  p   div   列表……

行内元素：不独占一行

span a img  strong....

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

5.1 display

<!--
block 块元素
inline 行内元素
inline-block 块元素，但是可以内联，在一行
none 把元素隐藏，物理位置也不在了
-->
<style>
    div{
        width:100px;
        height:100px;
        display:none;
    }
    span{
        width:100px;
        height:100px;
        display:inline-block;
    }
</style>

5.2 float

左右浮动

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px red solid;
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.layer1{
    border: 1px green dashed;
    display: inline-block;
    float: left;
}
.layer2{
    border: 1px gray dashed;
    display: inline-block;
    float: right;
}
.layer3{
    border: 1px blue dashed;
    display: inline-block;
    float: right;
}
/*clear left 左侧不能有浮动元素
  clear right 右侧不能有浮动元素
  clear both 两侧都不能有浮动元素
*/
.layer4{
   border: 1px yellow dashed;
    font-size: 12px;
    line-height: 22px;
    display: inline-block;
    float: left;
    clear: both;
}

5.3 对比

  • display方向不可控制
  • float 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            border: 1px solid black;
        }
        div{
            margin: 1px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background: #d48e8e;
            border: 1px dashed #5f3f3f;
            font-size: 20px;
            position: relative;
            top: -20px;
        }
        #second{
            background: #1818de;
            border: 1px dashed blue;
            font-size: 20px;
            position: relative;
            bottom: -10px;
        }
        #third{
            background: #636304;
            border: 1px dashed yellow;
        }

    </style>

</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位：position：relative

相对于原来的位置，进行指定的偏移

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

方块定位练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            background: pink;
            display: block;
        }
        a:hover{
            background: #7070f5;
        }
        .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="a">链接1</a>
    <a class="a2" href="a">链接2</a>
    <a class="a3" href="a">链接3</a>
    <a class="a4" href="a">链接4</a>
    <a class="a5" href="a">链接5</a>
</div>
</body>
</html>

6.2 绝对定位

<!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: red;
            position: absolute;  /* absolute 绝对定位*/
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;  /* fixed 固定定位*/
            right: 0;
            bottom: 0;
            
            /*背景透明度*/
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

6.3 z-index

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

<head>
    <meta charset="UTF-8">
    <title>A</title>
    <link rel="stylesheet" href="css/style.css"
</head>
<body>
    <div id="content">
        <ul>
            <li><ima src="images/bg.jpg" alt=""</li>
            <li class="tipText">XXXXX</li>
            <li class="tipBg"></li>
        </ul>
    </div>
    </body>

透明度设置

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

#content{
   width:300px;
   padding:0px;
   margin:0px;
   overflow:hidden;
   font-size:12px;
   line-height:25px;
   border:1px #000 solid;
}
ul,li{
  padding:0px;
  margin:opx;
  list-style:none;
}
/*父级元素相对定位*/
#content ul{
position:relative;
}
.tipText,.tipBg{
  postion: absolute;
  width:300px;
  height:25px;
  top:216px;
}
.tipText{
  color:red;
 /*z-index:0;*/
}
.tipBg{
  background:#000;
  opacity: 0.5; /*背景透明度*/
}

最高无限

<head>
    <meta charset="UTF-8">
    <title>A</title>
    <link rel="stylesheet" href="css/style.css"
</head>
<body>
    <div id="content">
        <ul>
            <li><ima src="images/bg.jpg" alt=""</li>
            <li class="tipText">XXXXX</li>
            <li class="tipBg"></li>
        </ul>
    </div>
    </body>

透明度设置

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

#content{
   width:300px;
   padding:0px;
   margin:0px;
   overflow:hidden;
   font-size:12px;
   line-height:25px;
   border:1px #000 solid;
}
ul,li{
  padding:0px;
  margin:opx;
  list-style:none;
}
/*父级元素相对定位*/
#content ul{
position:relative;
}
.tipText,.tipBg{
  postion: absolute;
  width:300px;
  height:25px;
  top:216px;
}
.tipText{
  color:red;
 /*z-index:0;*/
}
.tipBg{
  background:#000;
  opacity: 0.5; /*背景透明度*/
}
BitZ2
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值