CSS样式

已于 2022-12-19 14:55:51 修改
阅读量302 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css 前端
于 2022-08-16 18:04:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhaoSong_/article/details/126371655
版权

提示：CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

文章目录

CSS

01CSS 样式表

cascading stytle sheet 层叠样式表
简单说就是如何修饰网页信息的显示样式

用来展示XHTML或者XML等样式的计算机语言

02CSS语法

  1. 每个CSS 样式由两部分组成，即选择符和声明符，声明又分为属性和属性值
  2. 属性必须放在花括号中，属性与属性值用冒号链接
  3. 每条声明用分号结束
  4. 当一个属性有多个属性值的时候，属性值与实行值不分先后顺序，用空格隔开
  5. 在书写样式过程中，空格、换行等操作

01内部样式

 <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
        <style>
      h1{
      color:red;
    }
    h2{
      color:yellow;
    }
     h3{
       color:blue;
     }
      </style>
  </head>
  <body>
      <h1>11111111</h1>
      <h2>222222222</h2>
      <h3>3333333333333</h3>
  </body>

02外部样式

2.1 link

属于XHTML标签，link引用的ＣＳＳ会同时被加载

<head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <link rel="stylesheet" href="../css/02.1.css"
      " type="text/css">   
  </head>
2.2 import

@imoprt 完全是CSS提供的一种方式， @import 引用的CSS会等到页面全部被下载完再被加载


<head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  
      <style>
        @import url(../css/02.1.css);
      </style>
  </head>

03行内样式

stytle作为属性直接写在标签后面

<body>
    <h1 style="color: gold;">11111</h1>
     <h2 style="color: blue;">1222222</h2>
      <div style="width:200;height:300px;color:gold;">我是div</div>
  </body>

04样式表优先级

  • !important优先级最高，
  • 就近原则
  • 优先级针对用一个标签，同一个属性，如果一个标签多了一个属性，那就会保留下来，
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <link rel="stylesheet" href="../css/02.1.css">
      <style>
        div{
          color: hotpink;
        }
      </style>
  </head>
  <body>
      <!--!important>行内>内部>外部--->
      <div style="color: green;">人生苦短，我学Python</div>
  </body>

!important放在哪，哪个优先级就最高

  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <link rel="stylesheet" href="../css/02.1.css">
      <style>
        div{
          color: hotpink!important;
        }
      </style>
  </head>
  <body>
      <!--!important>行内>内部>外部--->
      <div style="color: green;">人生苦短，我学Python</div>
  </body>

03CSS选择器

要使用CSS对HTMl页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器

3.1标签选择器

 <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <style>
        div{
          background-color: aqua;
          color: blue;
        }
      </style>
  </head>
  <body>
      <div>111111111</div>
      <h1>2222222222</h1>
      <p>1222222131321321</p>
      <div>78984464645</div>
  </body>

3.2类选择器

一个div可以设置多个类 名

看style标签里面的顺序，然后就近原则，显示的颜色是brown

  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <style>
        .ibm{
          background-color: blueviolet;
        }
        .qianfeng{
          color: brown;
        }
      </style>
  </head>
  <body>
      <div class="ibm qianfeng">zhaosong1111111</div>
      <div>zhaosng222222</div>
      <div>zhaosong 3333333</div>
      <div class ="ibm">zhaosng44444444</div>
      <div class=“"ibm">zhaosng5555555555</div>
      <div>zhaosong5666666</div>
  </body>

3.3id选择器

一个id名称只能对应文档中的一个具体的元素对象 （唯一性）

起名字要起英文，不能用关键字，（所有标记，和属性都是关键字）如：head标记

  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <style>
        #box{
          background-color: burlywood;
          color: blueviolet;
        }
        #box1{
          background-color: chartreuse;
        }
      </style>
  </head>
  <body>
      <div id="box1">人生苦短，我学Python</div>
      <div id="box">三国演义</div>
  </body>

3.4通配符选择器

*：含义就是所有的元素

<head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <style>
        *{
          /* 外边距*/
          margin: 0;
          padding: 0;
          /*内边距 */
        }
      </style>
  </head>
  <body>
      <h1>标题</h1>
      <div>晒斑</div>
      <ul>
        <li>11111</li>
        <li>22222</li>
        <li>323333</li>
      </ul>
  </body>

3.5伪类选择器

主要应用于a链接上
语法：

a:link{属性:属性值;}超链接的起始状态
a:visited{属性:属性值;}超链接被访问后的状态
a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态

顺序：Link ---->Visited ---->Hover-----> Active

顺序错误会使样式失效

<head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <style>
        /*未访问*/
        a:link{
          color: yellow;
        }
        /*访问之后*/
        a:visited{
          color: red;
        }
        /*鼠标移动到上面*/
        a:hover{
          color:orange;
        }
        /*点击，激活*/
        a:active{
          color: orchid;
        }
      </style>
  </head>
  <body>
      <a href="https://www.baidu.com">百度</a>
  </body>

3.6 群组选择器

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
      <style>
/*
        div{
          background-color: greenyellow;
        }
        h1{
          background-color: greenyellow;
        }
        p{
          background-color: greenyellow;
        }*/
   

     /*   群组选择器，提出公共代码，节约代码量   */
        div,p,h1,.boxp{
          background-color: greenyellow;
        }
      </style>
  </head>
  <body>
      <div>11111111111</div>
      <p>111111111111111</p>
      <h1>111111111111</h1>
      <div class="boxp">1212313212</div>
  </body>
</html>

3.7后代选择器

从右往左匹配

  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
     <style>
       /*  后代选择器， 包含选择器  */
       /*从右到左匹配，先匹配p便签，在匹配包含p 的div标签*/
        div p{
          color:blue;
          background-color: greenyellow;
      } 

      p b{
        color: palevioletred;
      }
     </style>
  </head>
  <body>
      <div>1111111</div>
      <p>
        <b>4546545</b>
      </p>
      <div>
        <p>1231314546545</p>
      </div>

  </body>

3.8选择器的权重

当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突，会选择权重高的来执行

选择器权重，CSS中用四位数表示权重，权重表达方式如：0,0,0,0，
类型(元素)选择器0001
Class选择器(类选择器)0010
id选择器0100
包含选择符为包含选择符的权重之和 (div p)
内联样式1000
!important10000
CSS选择器解析规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重符的样式
CSS选择器解析规则2：相同权重的选择符，样式遵循就近原则，哪个选择符最后定义，就选择哪个选择符样式。

04CSS属性

4.0CSS属性和属性值的定义

4.1CSS文本属性

属性描述说明
font_size字体大小单位是px,浏览器默认是16px，设计图常用的是12px
font_family字体当字体是中文字体、英文字体中有空格时，需要加双引号；<br />多个字体中间用逗号链接，先解析出第一个字体，如果没有解析第二个字体，以此类推
color颜色color:red; color:#ffo; color:rgb(255,0,0); 0-255
font-weight加粗font-weight:bloder(更粗的)/bold(加粗)/normal(常规)<br />font-weight:100-900; 100-500不加粗 600-900加粗
font-style倾斜font-style:ltalic(斜体字)/oblique(倾斜的文字)/normal(正常显示)
text-align文本水平对齐text-align:left;水平靠左<br />text-align:right;水平靠右<br />text-align:center;水平居中<br />text-align:justify;水平两端对齐，但是只对多行起作用
line-height行高line-height的数据=height的数据，可实现单行文本垂直居中
text-indent首行缩进text-indent可以取负值；text-indent属性只对第一行起作用
letter-spacing字间距控制文字和文字之间的间距
text-decoration文本修饰text-decoration:none没有/underline下划线/overline上划线/line-through删除线
font文件简写font是font-style font-weight font-size /line-height font-family的缩写。<br />font:italic 800 30px/80px “宋体”; 顺序不能变，必须同时指定font-size和font-family属性时才起作用
text-transform检索大小写text-transform: capitalize;首字母大写<br />text-transform:lowercase;全部小写<br />text-transform:uppercase;全部大写<br />text-transform:none; 没效果

image.png

4.2CSS列表属性

属性描述说明
list-style-type定义列表符合样式lilst-style-type:disc;(实心圆)/circle(空心圆)/square(实心方块)/none(去掉符号)
list-style-image将图片设置为列表符合样式list-style-image:url();
list-style-position设置列表项标记的放置位置list-style-position:outside;列表的外面默认值<br />list-style-position:inside;列表的里面
list-style简写lsit-style:none url() inside ;

4.3CSS背景属性

属性描述说明
background-color背景颜色background-color:red;<br />background-color:rgb(0,0,255);<br />background-color:#fff;
background-image背景图片background-image:url();
background-repeat背景图片的平铺background-repeat:no-repeat（不平铺）/repeat(平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺);
background-position背景图片的定位background-posotion:水平位置，垂直位置；可以给负值<br />水平位置：left center right<br />垂直位置：top center bottom
background-attachment背景图片的固定background-attachment:scroll(滚动)/fixed(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了)
background-size设置图片大小background-size：400px 400px<br />可以设置跟墙一般大<br />background-size：cover;将背景图片扩展至足够大，以使背景图像完全覆盖背景区域，可能有一部分会被裁掉<br />（cover 覆盖 contain包含）<br />background-size:contain;把图片图像扩展到最大尺寸，以使其宽度和高度完全适应内容区，铺不满盒子，留白
background复合属性background:yellow url() center fixed no-repeat<br />顺序随便<br />background-size只能单独用，不能复合

4.4CSS边框属性

一 边框属性
1.上边框：

border-top-style:样式
border-top-width:宽度
border-top-color:颜色
border-top:宽度，样式，颜色

2.下边框:

border-bottom-style:样式
border-bottom-width:宽度
border-bottom-color:颜色
border-bottom:宽度，样式，颜色

3.左边框:

border-left-style：样式
border-left-width:宽度
border-left-color:颜色
border-left:宽度，样式，颜色

4.右边框:

border-right-style:样式
border-right-width:宽度
border-right-color:颜色
Border-right：样式，宽度，颜色

二:(1)设置边框样式(border-style)常用属性值如下
·none:没有边框,即忽略所有边框的宽度(默认值)
·solid:边框为单实线
·dashed:边框为虚线
·dotted:边框为点线
·double:边框为双实线
·border-top-style:上边框样式
·border-right-style:右边框样式
·border-bottom-style:下边框样式
·border-left-style:左边框样式
·border-style:上边框样式 右边框样式 下边框样式 左边框
·border-style:上边框样式 左右边样式 下边框样式
·border-style:上下边框样式 左右边框样式
·border-style:上下边框样式

(2)设置边框宽度(border-width)

·border-top-width:上边框宽度
·border-right-width:右边框宽度
·border-bottom-width：下边框宽度
·border-left-width:左边宽宽度
·border-width:上边框宽度[右边框宽度,下边框宽度,左边宽宽度]

(3)设置边框颜色(border-color)

·border-top-color:上边框颜色
·border-right-color:右边框颜色
·border-bottom-color:下边框颜色
·border-left-color:左边宽颜色
·border-color:上边框颜色[右边框颜色 下边框颜色 左边框]

(4)综合设置边框

border:宽度 样式 颜色；
P{border-top:2px solid #ccc;}//定义上边框，各个值顺序任意
例如将二级标题的边框设置为双实线,红色,3像素宽,代码如下： h2{border:3px double red;}
常用的复合属性有font-字体,border-边框,margin-外边距和background-背景等。

4.5CSS浮动属性

  • 浮动
属性描述说明
floatfloat:left;元素靠左边浮动
floatfloat:right;元素靠右边浮动
floatfloat:none;元素不浮动
  • 浮动的作用：
  1. 定义网页中其他文本如何环绕该元素显示
  2. 就是让竖着的东西横起来
  • 清除浮动：
属性描述说明
clearclear:none;允许有浮动对象
clearclear:right;不允许右边有浮动对象
clearclear:left;不允许左边有浮动对象
clearclear:both;不允许有浮动对象

清除浮动只是改变元素 排序方式，该元素还是漂浮着 的，不占据文档位置。

05盒子模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素之间相关关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型

5.1内边距padding

/*  padding:30px;*/ /*内边距*/
     /* padding:30px 30px;*/
     padding-right: 10px;


      /*
      padding:
      1个值，四个方向都一样
      2个值，上下 ，左右
      3个值，上  左右 下
      4个值，上 右 下 左*/


      /*padding-方向:top bottom left right*/

5.2边框border

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lightly-HTML-Project</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background: yellow;
      border: 10px solid red
    }

    /*border 粗细 样式 颜色*/
    /*样式：solid double dashed dotted*/

    /*  border-top
        border-bottom
        border-left
        border-right
    */
    .box2{
      width: 100px;
      height: 100px;
      background: green;
      border-top: 5px solid blue;
      border-right: 10px dashed yellow;
  
    }
    .box3{
      width: 100px;
      height: 100px;
      background: pink;
      border-width:10px 20px 30px 40px ;
      border-color: yellow tomato black blue;
      border-style: solid dashed double dotted;

        /*
      border-width
      border-style
      border-color
      */
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

</html>

5.3外间距margin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lightly-HTML-Project</title>
  <style>
    div {
      width: 200px;
      height: 200px;
    }

    .box1 {
      background: red;
      border: 1px solid yellow;
      margin: 200px;
      /*margin:50px 40px 20px 40px*/
      /*
          margin-top:10px;
          margin-bottom:20;
          margin-left:30px;
          margin-right:40px;
          */

      float: left;
    }

    .box2 {
      background: green;
      border: 1px solid blue;
      margin-left: 100px;
      margin-bottom: 60px;
    }

    .box3 {
      background-color: black;
      margin: 0 auto;/*居中 上下是零，左右自动*/
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

</html>

5.3外间距特性问题

特性问题：
1. 兄弟关系，两个盒子垂直外边距与水平外边距问题？
 - 垂直方向，外边距取最大值
 - 水平方向，外边距会进行合并处理？
2. 父子关系，给子加外边距，但作用在父身上，怎么解决：

- 从子的margin-top===》父的padding-top，注意高度计算
- 给父盒子设置边框
- 加浮动
- overflow:hidden
  • 兄弟关系
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lightly-HTML-Project</title>
  <style>
    /*
    特性问题：
    1.兄弟关系，两个盒子垂直外边距与水平外边距问题？
     - 垂直方向，外边距取最大值
     - 水平方向，外边距会进行合并处理？
     2.父子关系，给子加外边距，但作用在父身上，怎么解决：
    */

   
     .box1,.box2,.box3,.box4{
      width: 200px;
      height: 200px;
    }

    .box1 {
      background: red;
      margin-bottom: 100px;
    }
    .box2 {
      background: yellow;  
      margin-top: 50px;
    }
     .box3 {
        float:left;
      background: black;
      margin-right: 50px;
    }
     .box4 {
        float:left;
      background: blue;
      margin-left: 150px;
    }
  
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>

</body>

</html>
  • 父子关系
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lightly-HTML-Project</title>
  <style>
    /*
    1.从子的margin-top===》父的padding-top，注意高度计算
    2.给父盒子设置边框
    3.加浮动
    4.overflow:hidden 
    */
    .contain {
      width: 500px;
      height: 500px;
      background-color: yellow;
      /*  padding-top:100px;*/
      border: 1px solid transparent;
  
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: tomato;
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <div class="contain">
    <div class="box"></div>
  </div>
</body>

</html>

06溢出

6.1溢出属性

属性属性值
overflowvisible:默认值，溢出内容会显示在元素外面
overflowhidden:溢出隐藏内容
overflowscroll:滚动，溢出内容以滚动方式显示
overflowauto:如果有溢出会添加滚动条，没有溢出则正常显示
overflowinherit:规定应该遵从父元素继承overflow属性的值
overflow-xx轴溢出
overflow-yy轴溢出
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: yellow;
            /* overflow: visible;  显示溢出*/
            /* overflow: hidden; 溢出隐藏，文本裁剪 */
            /* overflow: scroll;不管有屋溢出，都会有滚动条 */

            /* overflow: auto; 文本内容少就正常显示，内容多就出现滚动条 */

            /* overflow: inherit;继承父元素的效果 */
        }
        .box{
            /* overflow: auto; */
            overflow-x:auto ;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae necessitatibus maxime error, tempore voluptatum
        dignissimos, unde iste nam aliquid alias nostrum sapiente, ipsa dolor exercitationem enim totam! Inventore,
        accusamus optio.
    </div>
    <div class="box">
        <img src="IMG/beautiful.jpeg" alt="">
    </div>
</body>

6.2空余空间

该属性用来设置如何处理元素内的空白

属性属性值
white-spacenormal：默认值，空白会被浏览器忽略
nowrap:文本会在同一行上继续，知道遇到<br/>标签
/* nowrap ：不换行
        pre ：显示空格， 回车，tab 不换行
        pre-wrap:显示空格， 回车，tab 换行
        pre-line:显示回车，不显示换行
    */

6.3省略号显示

text-overflow:clip/ellipsis;
clip:默认值，不显示省略号
ellipsis:显示省略号

当单行文本溢出显示省略号需要同时设置以下声明：

  1. 容器宽度：width:200px;
  2. 强制文本在一行显示：white-space:nowrap;
  3. 溢出内容为隐藏：overflow:hidden;
  4. 溢出文本显示省略号：text-overflow:ellipsis;

07元素显示类型

image.png

块元素

display:block;
display:list-item;
p标签里放文本可以，不能放块级元素

行内元素

display:inline;

行内块元素

display:inline-block;

元素类型互相转换

08定位

image.png

8.1静态定位

 <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: yellow;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

8.2绝对定位，没有父元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
  
    <div class="box"></div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At aperiam repellat dolore totam mollitia, ullam
        exercitationem repudiandae id atque vitae in qui a rLorem ipsum, dolor sit amet consectetur adipisicing elit. At aperiam repellat dolore totam mollitia, ullam
        exercitationem repudiandae id atque vitae in qui a repellendus quLorem ipsum, dolor sit amet consectetur adipisicing elit. At aperiam repellat dolore totam mollitia, ullam
        exercitationem repudiandae id atque vitae in qui a repellendus quLorem ipsum, dolor sit amet consectetur adipisicing elit. At aperiam repellat dolore totam mollitia, ullam
        exercitationem repudiandae id atque vitae in qui a repellendus quepellendus quod veritatis rem, expedita veniam officiis.
    </div>
</body>

</html>

8.3绝对定位，有父元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: yellow;
            margin  :0 auto ;
            position: relative;
        }

        .child{
            width: 200px;
            height: 200px;
            background-color: red;
            left:100px;
            top:100px;
            position: absolute;
        }
    </style>
</head>

<body>
  
    <div class="box">
        <div class="child"></div>
    </div>
  
</body>

</html>

8.4固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 1500px;
            background-color: yellow;
        }
        .ad{
        width: 100px;
        height: 200px;
        background-color: red;
        position: fixed;
        right: 0;
        bottom:200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="ad"></div>
</body>
</html>

8.5粘性定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .header{
            background-color: yellow;
            height: 100px;
            width: 1000px;
        }
        .nav{
           background-color: red;
           width: 500px;
           height: 50px;
           margin: 0 auto; 
           position: sticky;
           top:0px;
        }
        .body{
            height: 1000px;
            background-color: green;

        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="body"></div>
</body>
</html>

8.6定位的层级

  • z-index:值越大，层级就越大，越靠上显示 可以设置负值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: yellow;
            position: relative;
            left: 100px;
            top:100px;
            z-index: 1;/*层级*/
        }
        .box2{
            background-color: red;
            position: relative;
            z-index: 100;
        }
        /* z-index值越大，层级就越大，越靠上显示 可以设置负值 */
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
 
</body>
</html>

09锚点

10精灵图

11宽高自适应

CSS3

image.png

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box>li{
            border: 1px solid  red;
        }
        /*当前元素后边的第一个兄弟*/
        /* .child+li{
            background-color: yellow;
        } 
        */
        /*当前元素后面所有的亲兄弟*/
        .child~li{
            background-color: yellow;
        } 
       .containner+p{
        background-color: blue;
       }
  
 
    </style>
</head>
<body>
    <ul class="box">
        <li>111
            <ul>
                <li>1111-111</li>
                <li>22222-222222</li>
                <li>333-3333</li>
            </ul>
        </li>
        <li class="child">222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <div class="containner">1111</div>
    <p>p-11111111</p>
    <p>p-22222222</p>
   <div> 
    <p>div-33333</p>
</div>
</body>
</html>

属性选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* [class]{
            background-color: yellow;
        } */
        /* div下所有的class */
        div[class]{
            background-color: blue;
        }
        p[class]{
            background-color: rebeccapurple;
        }
        /*完全匹配*/
        /* div[class=box1]{
            border: 1px solid pink;
        } */
        /*包含就匹配*/
        div[class~=box1]{
            border: 1px solid pink;
        }
        input[name]{
            background-color: yellow;
        }
        input[type=email]{
            background-color: aqua;
        }
        /* 模糊匹配 */
        /* class^=b 以b开头
        class$=b 以b结尾的
        class*=b 包含某个字符 */
        div[class^='b'],p[class*='1']{
            color:white
        }
    </style>
</head>
<body>
    <div class="box1">div11111</div>
    <div class="box2">div2222222222222</div>
    <div >333333</div>
    <div class="box1 box3"> div555555  </div>
    <p class="p1">p-1111</p>
    <p class="p2">p-222222</p>
    <p>p-33363333</p>
    <div>
        用户名：<input type="text" name="username"><br>
        密码:<input type="password" name="password"><br>
        年龄：<input type="number" name="age"><br>
        邮箱：<input type="email">
    </div>
</body>
</html>

结构伪类选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 940px;
            height: 100px;
            margin:0 auto;
            background: yellow;
        }
        .box div{
            float: left;
            width: 300px;
            height: 100px;
            background-color: red;
            margin-right: 20px;
        }

        .box div:last-child{
            margin-right: 0;
        }
        /* li:first-child{
            background-color: yellow;
        }
        li:last-child{
            background-color: brown;
        }
        /*第几个*/
        /* li:nth-child(2){
            background-color: blueviolet;
        } */ 
        /*偶数 nth-child(2n),nth-child(even)*/
        li:nth-child(2n){
            background-color: red;
        }
        /*奇数 nth-child(2n-1),nth-child(odd)*/
        li:nth-child(odd){
            background-color: burlywood;
        }
        .icon1{
            border: 1px solid black;
        }
        .icon1 p{
            background-color: antiquewhite;
        }
        /*独生子女*/
        .icon1 p:only-child{
            color: blueviolet;
        }
        /*没有孩子的，*/
        .empty1:empty{
            width: 200px;
            height: 200px;
            background-color: black;
        }
        /*根*/
        :root,body{
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>

     <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
     </ul>

     <div class="icon1">
        <p>1111</p>
        <p>2222</p>
     </div>
     <div class="icon1">
        <p>1111</p>   
     </div>
     <div class="empty1"></div>
     <div class="root1"></div>
</body>
</html>

目标伪类选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
            position: fixed;
            right: 0px;
            top:100px
        }
        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid black;
        }
        div{
            height: 600px;
            border: 1px solid #ccc;
        }
        div:target{
            background-color: yellow;
        }
    </style>
</head>
<body>
     <ul>
        <li>
            <a href="#a">京东秒杀</a>
        </li>
        <li>
            <a href="#b">双11</a>
        </li>
        <li>
            <a href="#c">频道优选</a>
        </li>
        <li>
            <a href="#d">特色广场</a>
        </li>
     </ul>

     <div  id="a">京东秒杀</div>
     <div  id="b">双11</div>
     <div  id="c">频道优选</div>
     <div  id="d">特色广场</div>
</body>
</html>

UI元素状态伪类选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled{
            /* background-color: rebeccapurple; */
        }
        input:disabled{
            background-color: yellow;
        }
        /*焦点会匹配此选择器*/
        input:focus{
            background-color: blue;
        }
        input[type=checkbox]{
            /*去掉默认样式*/
            appearance:none;
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        input:checked{
            background-color: red;
        }
        div::selection{
            background-color: yellow;
            color: red;
        }
    </style>
</head>
<body>
    <form action="">
        用户名<input type="text" name="username" ><br>
        密码<input type="password" name="password" ><br>
        记住用户名<input type="checkbox"><br>
        <input type="submit" disabled>

    </form>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt dolorem reprehenderit beatae magni, quas numquam accusantium optio explicabo corrupti aspernatur, fugiat, id repudiandae. Corrupti maiores recusandae eos ex placeat molestiae.</div>
</body>
</html>

否定伪类选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* li:not(:first-child){
            background-color: yellow;
        } */
        li:not(:nth-child(2n+1)){
            background-color: blue;
        }
        div:not(:empty){
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>
    <div>
        <ul><li>121</li></ul>
    </div>
    <div></div>
</body>
</html>

WebApp布局

渐变动画变形

Grid网格布局

过期的秋刀鱼-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web入门——css
qq_57357292的博客
05-27 1823
一、定义 简单来说，css就是在html上的代码将在web界面上如何呈现出来。举个例子： 如果不用css进行排版，仅仅用html文件代码，所生成的页面上会是如下这样，将内容依次向下排列。 如果用上css进行样式排版，生成的网页将会让人看起来比较舒服，如下图： 二、css的相关语法 一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。 如： /* 这是CSS的注释 */ /* 建议每条申明占一行 */ p{ color:red; text-align:center; /*
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
Web-CSS
lzhat的博客
12-07 336
css:由选择器和声明部分组成，     引入方式：     行内：     内部：       外部：     导入： @url("test.css")  《不在使用》 css选择器： ===基础选择器       id选择器 ===> #id {}            class选择器  ===> .myclass {}         标签/元素选择器
web前端——css（一篇教会网页制作）
最新发布
2301_78341216的博客
06-28 1342
web前端，css
WEB之CSS
weixin_47314449的博客
04-01 446
一、CSS简介二、CSS书写方式1、CSS语法2、CSS代码书写方式3、CSS文件中代码的注释三、走进CSS1、选择器 一、CSS简介        CSS是层叠样式表/级联样式表（Cascading Style Sheets）的缩写。在前端网页制作中负责给其内容添加样式，比如颜色、位置、大小、背景等等，用来美化页面，使网页更加美观。 二、CSS书写方式 1、CSS语法      &nb.
Web之CSS
tl2267190799的博客
02-28 706
前端的CSS使用
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
清除修改删除Vue自带的CSS样式
03-17
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - CSDN博客.html"是王...
DW在html中插入css样式方法
09-24
Dreamweaver（DW）是一款常用的网页设计工具，它提供了方便的CSS样式插入功能，帮助设计师高效地管理网页样式。下面我们将详细介绍如何在HTML中使用DW插入CSS样式。 首先，我们需要创建一个新的CSS文件。启动...
Web-css（一）
Half_orc的博客
01-28 916
简介 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 引入方式 1.内联引入 div sty
MySQL续_JS
MMMMMMMay
06-30 436
SQL续day_170629:应用dept表：应用emp表：IN 操作符  IN 操作符允许我们在 WHERE 子句中规定多个值。SQL IN 语法:SELECT column_name(s) FROM table_name WHERE column_name IN (value1,value2,...)example:我们查询empno为7900，7901，7902的三条信息：SELECT * ...
WEB之css篇
On the way
08-11 165
1、实现一个div在不同分辨率下的水平垂直居中 .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid pink; width: 100px; height: 100px; } 2、左右固定，中间自适应样式 <style> .b...
web css操作
qq_34681895的博客
11-29 395
浮动(float)： CSS的定位机制有3种：普通流（标准流）、浮动和定位。 普通流(normal flow)： 普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。 浮动(float)： 浮动的目的就是为了让多个块级元素同一行上显示。 元素的浮动是指...
web -- CSS样式
yuyuyuliang00的博客
04-12 595
web前端 CSS
Web：CSS概述
weixin_44330955的博客
08-19 966
1. CSS简介 css是层叠样式表(Cascading Style Sheets)的缩写 css可以用来为网页创建样式表，通过样式表可以对网页进行装饰 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的 而css就可以分别为网页的各个层次设置样式 总之，css用来设置网页中元素的样式 2. CSS编写位置 2.1 内联样式 使用css修改元素的样式的第一种方式是，内联样式，也叫行内样式 特点： 在标签内部通过style属性来设置元素的样式 缺点： 使用内联样式，只能对一个.
Web 基础之CSS (全文5w字，超级详细)
IDYS'BLOG
04-08 1041
文章目录CSS学习00. 使用CSS样式的方式0.0 HTML的局限性0.1 HTML <! DOCTYPE>声明标签0.2 内链（行内）样式表（行内式）0.3 嵌入式（内部）样式表（嵌入式）0.4 引入式（外部）样式表（链接式）0.5 CSS引入方式总结0.6 CSS 语法规范0.7 CSS代码风格01. 定义样式表1.1 HTML标记定义1.2 Class 定义1.3 ID 选择器1.4 优先级问题1.5 组合选择器（同时控制多个元素）1.6 伪元素选择器02. 常见属性2.1 颜色属性03
web——CSS基础
qq_44745063的博客
05-29 1645
作者：小 琛 欢迎转载，请标明出处 文章目录引入方式选择器字体样式文本样式例子1：新闻网页例子2：产品推荐图 css:在web中，用于渲染网页的工具 引入方式 三大引入方式：内嵌、外联、行内 内嵌：在html的head中，定义style，将所有渲染内容写在里面 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件 行间：写在某一个标签内 一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通
Dreamweaver中的CSS样式详解
"本章详细介绍了CSS样式表的各个方面，包括CSS入门、创建和应用CSS。CSS（层叠样式表）是一种将网页内容与样式分离的技术，使得网页外观的修改更为方便。章节主要关注Dreamweaver中的CSS操作，如‘CSS样式’面板的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

过期的秋刀鱼-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值