CSS简单介绍1

最新推荐文章于 2022-05-02 14:20:46 发布
最新推荐文章于 2022-05-02 14:20:46 发布
阅读量518 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44969215/article/details/107292902
版权

CSS的基本信息

1、css表示层叠样式表，通常起到美化HTML的作用

2、css有三种导入HTML中的方式
  2.1、内嵌式、行内式 ：直接在标签内添加style=" "
  2.2、内部样式 ：在head中使用<style></style>
  2.3、外部样式 ：在head中使用<link rel="stylesheet" herf=" ">

3、css代码的语法：
样式名称：样式值1 样式值2 样式值3
例如：border: 1px solid red;

4、css的内容注释
css代码的注释和html的注释不一样，它是通过/**/来注释信息的。

5、css的选择器
  5.1、标签选择器：直接写标签名，那么所有该标签都会受到影响。例如：div
  5.2、类选择器：.类的名称，那么所有的class=该类的名称的标签都会受到影响。例如：class="i1"
  5.3、id选择器：#id的名称,那么id=该名称会受到影响。例如：id="i1"
  5.4、通配选择器：页面所有标签都会受到影响。*{ }
  5.5、子代选择器：只有该子代的标签会受到影响。例如：div>p,标签只有在div下的子代所有p标签会受到影响,而后代的p不会受到影响。
  5.6、后代选择器：表示该标签下的所有的后代的某个标签受到影响。例如：div p{ },div标签下的所有的后代中的p标签受到影响。

关于文本限制复制

1、user-select:用户是否可以选择，如果使用了user-select=none;表示该设置中的文本信息无法复制。

.check_label{
    user-select: none;
}
<input type="checkbox" name="checkCode"> <label class="check_label">下次自动登录</label>

在这里插入图片描述

关于相同标签的设置不同的属性

在列表中，需要对于不同的li设置不同的属性，可以通过:nth-of-type()设置。

<ul id="menu">
   <li>123456</li>
   <li>456789</li>
   <li>789456</li>
   <li>456123</li>
   <li>321654</li>
   <li>654321</li>
   <li>159753</li>
   <li>852456</li>
</ul>

#menu>li:nth-of-type(n+2){
    background-color: linen;
}

在这里插入图片描述
以上是关于nth-of-type的简单介绍实例，下面详细来介绍关于这个nth-of-type:
1、关于对第一个li设置不同的属性：
  1.1、first-of-type

#menu>li:first-of-type{
    background-color: linen;
}

  1.2、nth-of-type

#menu>li:nth-of-type(1){
    background-color: linen;
}

效果：
在这里插入图片描述
2、关于对最后一个li设置不同的属性
  2.1、last-of-type

#menu>li:last-of-type{
    background-color:greenyellow;
}

  2.2、nth-of-type

#menu>li:nth-of-type(8){
    background-color: linen;
}

效果：
在这里插入图片描述
3、关于该所有的li设置属性
  nth-of-type

#menu>li:nth-of-type(n+1){
    background-color: linen;
}

在这里插入图片描述
4、关于单个的li设置属性
  nth-of-type(n)，n表示需要改变属性的li的位置

#menu>li:nth-of-type(4){
    background-color: linen;
}

在这里插入图片描述
5、奇数的li的属性的设置
  nth-of–type(odd); odd表示奇数

#menu>li:nth-of-type(odd){
    background-color:yellow;
}

效果图
在这里插入图片描述
6、关于偶数的li的属性的设置
  nth-of-type(even)：even表示偶数

#menu>li:nth-of-type(even){
    background-color: lawngreen;
}

在这里插入图片描述
7、not() 除了该标签之外，它用于取消某一个标签和其他标签具有相同的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .i2{
            border: 1px solid blue;
            width: 100px;
            height: 80px;
         }
        .i1{
            border: 1px solid green;
            width: 100px;
            height: 80px;
        }
        div:not(.i1)：not(.i2){
            border: 1px solid red;
            width: 100px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="i1"></div>
    <div class="i2"></div>
</body>
</html>

关于input设置属性

在css中设置input的属性，可以使用一种标签选择器来实现，input[type=text]，它可以对于所有<input type="text">受到影响。

input[type=text],input[type=password]{
    width:50px;
}
 
 <input type="text" name="" id="">
 <input type="text" name="" id="">
 <input type="password" name="" id="">

效果图：
在这里插入图片描述

关于定位postion

1、相对定位 relative：相对于原来的位置进行偏移，但是保留原先原始的在浏览器中占用的空间。

.i1{
     border: 1px solid red;
     position: relative; 
     top:50px;
     left: 20px;
 }
<div class="i1">755555</div>

在这里插入图片描述

2、固定定位 fixed：固定在浏览器上，滚动条不能影响该定位的位置，同时不会保存原先的位置空间

 
        .i2{
            border: 1px solid red;
            position: fixed;  
            bottom:50px;
            right: 20px;
        }
        <div class="i2">456</div>

在这里插入图片描述

3、绝对定位 absolute：当父节点和祖先节点没有定位的时候，绝对定位会根据坐标定位在网页的坐标位置上。如果父节点和祖先节点有定位，那么会根据顺序，优先原则，会根据优先找到的那个父节点或者祖先节点来定位。

  3.1、祖先节点或者父节点没有设置定位，根据网页的坐标位置定位。

.i1{
    width: 150px;
    height: 150px;
    background-color: lawngreen;
    position: absolute;
    top: 100px;
    left: 200px;
}
<div>
  <div class="i1">123456</div>
</div>

效果
在这里插入图片描述
  3.2、父节点或者祖先节点有定位，根据父节点或者祖先结点来定位。

.i1{
     width: 150px;
     height: 150px;
     background-color: lawngreen;
     position: absolute;
     top: 100px;
     left: 200px;
}

.i2{
      border: solid green 1px;
      height: 300px;
      position: relative;
      top: 100px;
      left: 100px;
 }

<div class="i2">
   <div class="i1">456789</div>
</div>

在这里插入图片描述
4、static 表示定位和原先没有设置相同。

.i1{
    width: 150px;
    height: 150px;
    background-color: lawngreen;
    position: static;
    top: 100px;
    left: 200px;
}

.i2{
    border: solid green 1px;
    height: 300px;
    position: relative;
    top: 100px;
    left: 100px;
}

<div class="i2">
    <div class="i1">456789</div>
</div>

在这里插入图片描述
5、粘性定位 sticky：当DOM节点没有超越滚动条以外的区域时，它为相对定位，超越后，它为固定定位。
  5.1、设置top，当没有滚动条时，并它的距离在top的范围内，就不会产生影响，当有滚动条时，它的定位方式变为固定定位。

.i3{
    border:solid 1px black;
    position: sticky; /*粘性定位*/
    
    top: 0px;
}
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i3">123</div>

效果：
在这里插入图片描述
  5.2、当产生滚动条时，移动滚动条，当该div到达了固定的位置时就会产生效果。
在这里插入图片描述
  bottom底部设置，当到达底部，进入范围内后，div会自动变为固定定位。

.i3{
    border:solid 1px black;
    position: sticky; /*粘性定位*/
    
    bottom:100px;
    right: 0px;
    /* left: 100px; */
}

  <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div>
    <div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div><div class="i1">789</div>
    <div class="i2">456</div>
    <div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>

    <div class="i3">123</div>

效果：
在这里插入图片描述

关于层级的设计

1、z-index 用户设计标签模块之间的层级定位，它使用范围在该标签使用了定位：position。如果没有使用定位，则该标签不起作用。

  <div style="position: relative;width: 500px;height: 500px;z-index: 1; background-color: black;"></div>
    <div style="position: absolute;top:100px; left:100px ;width: 100px;height: 100px;z-index: 2; background-color: blue;"></div>

在这里插入图片描述

关于浮动的介绍

浮动有左浮动 float:left;和右浮动float:right，清理浮动效果有两种，一种是clear:both;另一种是overflow:hidden;

  1、clear:both;取消左浮动和右浮动。在不需要受影响的div中设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float:left;
        }
        .right{
            float:right
        }
        .i1{
            width: 100px;
            height: 100px;
            background-color: lime;
        }
        .i2{
            width: 100px;
            height: 100px;
            background-color: magenta;
        }
        .i3{
            width: 150px;
            height: 100px;
            background-color: rgb(64, 61, 80);
            clear:both;
        }
    </style>
</head>
<body>
    <div class="left i1"></div>
    <div class="right i2"></div>
    <div class="i3"></div>
</body>
</html>

效果图：

在这里插入图片描述
  2、overflow:hidden;取消浮动，它用于取消子类的浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float:left;
        }
        .right{
            float:right
        }
        .i1{
            width: 100px;
            height: 100px;
            background-color: lime;
        }
        .i2{
            width: 100px;
            height: 100px;
            background-color: magenta;
        }
        .i3{
            width: 150px;
            height: 100px;
            background-color: rgb(64, 61, 80);
            /* clear:both; */
        }
        .i4{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="i4">
    <div class="left i1"></div>
    <div class="right i2"></div>
    </div>
    <div class="i3"></div>
</body>
</html>

效果图：
在这里插入图片描述

内边距和外边距

1、margin表示外边距，两个标签之间的外部间距，
  1.1、设置两个div的上下的外边距，两个div设置的外边距不会叠加。
  1.2、当标签内部使用外边距时，如果外标签没有设置边框，就是有边框坍塌的危险，可以使用overflow:hidden;实现解除边框坍塌。一般不建议在内部使用外边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .m{
            margin-bottom:50px;
            border: 1px solid red;
            width:100px;
            height: 100px;
        }
        .m1{
            margin-top: 50px;
            border:1px solid green;
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="m"></div>
    <div class="m1"></div>
</body>
</html>

效果图：
在这里插入图片描述
  1.1、设置两个div的左右的外边距，两个div设置的外边距会叠加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .m{
            margin-right:50px;
            border: 1px solid red;
            width:100px;
            height: 100px;
            float: left;
        }
        .m1{
            margin-left: 50px;
            border:1px solid green;
            width: 100px;
            height:100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="m"></div>
    <div class="m1"></div>
</body>
</html>

在这里插入图片描述
2、内边距padding：内间距指盒子和内部内容之间的内部的距离
使用padding, 会增大盒子的大小.使用box-sizing: border-box;取消增大.
  2.1、直接使用padding，不设置box-sizing:border-box。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .m{
            padding:50px;
            border: 1px solid red;
            width:100px;
            height: 100px;
            float: left;
        }
   
    </style>
</head>
<body>
    <div class="m"></div>
</body>
</html>

效果图：
在这里插入图片描述
  padding中设置box-sizing:border-box;这可以取消增大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .m{
            padding:50px;
            border: 1px solid red;
            width:100px;
            height: 100px;
            float: left;
            box-sizing: border-box;
        }
   
    </style>
</head>
<body>
    <div class="m"></div>
</body>
</html>

在这里插入图片描述

小白CAD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单蓝色介绍CSS网页模板
01-14
【简单蓝色介绍CSS网页模板】是一个适用于初学者和快速原型设计的网页模板，它强调了简洁的设计风格和蓝色调的视觉效果。这个模板基于CSS（层叠样式表）技术，用于控制网页的布局和样式，使得网页看起来既专业又美观...
css滤镜属性语法介绍
10-30
CSS滤镜是一种强大的视觉效果工具，允许开发者通过简单的代码实现图像处理功能，如模糊、阴影、色彩调整等效果。本文将详细介绍CSS滤镜属性的语法及各种滤镜效果的使用方法。 #### 二、基本语法 CSS滤镜属性可以...
CSS简单介绍
weixin_52284319的博客
01-08 195
CSS样式 进行页面美化，布局控制 概念 Cascading Style Sheet 层叠样式表， 层叠：多个样式可以作用在同一个html的元素上，可以同时生效。 好处 功能比较强大， 将内容展示和样式控制进行分离 降低耦合度，解耦 分工协作更方便 提高css样式的可复用性 使用： 般情况下有三种方式表达CSS样式 内部样式(内联式),一般存放的位置在head标签内,需要借助标签style 行内样式,直接在标签的内部通过style属性进行样式控制 外联式,单独创建一个CSS文件,文件的命名格式为
CSS的简单介绍
辉小歌的博客
03-16 257
什么是CSS? Cascading Style Sheet 层叠级联样式表 CSS: 表现(美化网页) 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 发展史 CSS 1.0 CSS 2.0 DIV(块) + CSS,HTML与CSS构造分离的思想，网页变得简单，SEO CSS 2.1 浮动，定位 CSS 3.0 圆角，阴影，动画…浏览器兼容性 <style> </style>可以编写css的代码，每一个声明最好使用分号结尾 语法: 选择器{ 声明
css简单介绍
QDY5945的博客
10-27 257
css层叠样式表，主要作用就是解决内容与表现分离的问题。html标签有自己的意义当然也是有自己的默认样式的，但有时候我们想修改他的样式，这时候就需要了css。 例：给字体加上颜色，我们有如下几种方法：...
CSS3视频教程 1 CSS3介绍
05-18
**CSS3视频教程 1 CSS3介绍** 在深入学习CSS3之前，首先我们需要理解什么是CSS。CSS，全称层叠样式表（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。自1996年...
简单介绍CSS hack的使用
01-19
1.IE条件注释法该方法安全性好，但是不利于开发维护。比如涉及到针对不同版本IE的css。 <!–[if IE]><![endif]–> 只在IE下有效<!–[if IE 6]><![endif]–> 只在IE6有效<!–[if gt IE 6]><!...
html+css简单介绍与使用
07-14
综上所述，"html+css简单介绍与使用"这个主题覆盖了HTML的基本结构和标签，CSS的样式定义以及JavaScript的基础和交互性。通过这些文件的学习，你可以掌握创建静态网页的基本技能，并为进一步学习动态网页开发打下...
css - 简单介绍
大自然的代码
11-27 376
CSS 概述 - CSS 指层叠样式表 (Cascading Style Sheets) - 样式定义如何显示 HTML 元素 - 样式通常存储在样式表中 - 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 - 外部样式表可以极大提高工作效率 - 外部样式表通常存储在 CSS 文件中 - 多个样式定义可层叠为一样式解决了一个普遍的问题 HTML 标签原本被设计为用
CSS--简单介绍
罗俊
07-05 558
前言 CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式...
对css的简单介绍
yaojxing的博客
04-08 530
对于css的简单理解。css初级入门应该知道的东西。
CSS基础之简单介绍
weixin_45121123的博客
06-19 96
元素 元素是文档结构的基础，在CSS中，每个元素都会生成一个框(或者说盒) 表现形式 替换元素：替换元素的内容并非有浏览器直接生成，典型的莫 过于img元素了； 非替换元素：大部分html元素都是非替换元素，如div元素、p元素等 块级元素：填充父元素的内容区 行内元素：在文本行内生成元素框 声明CSS [1] 外部样式表 永久样式表(persistent style sheet) 如果指定rel属性为stylesheet，没有指定title属性，那么它 将成为一个永久样式表 候选样式表(alternat
CSS基本样式简单介绍
u014469692的博客
03-21 855
具体详情内容请查阅《css参考手册》一、基本结构样式width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 其中，width，padding，margin如果使用百分数进行设置，实际上以自己的父盒子的宽度进行参考。border 不能用 百分比设置。 未设置 box-sizing...
CSS介绍
顺其自然~专栏
05-02 4558
CSS是什么 CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”（层层叠加的样式），它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。 CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS。 CSS 发展史 20 世纪 90 年代初 HTML 语
CSS篇一一简短介绍下CSS
weixin_53144068的博客
12-12 872
什么是CSS? CSS是Cascading Style Sheet的缩写，层叠样式表，是一种用来表现文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。 CSS拥有对网页对象和模型样式编辑的能力。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。 1.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式
简单介绍html和css3
最新发布
05-22
CSS3（Cascading Style Sheets）是一种用于描述网页样式的语言。它通过为 HTML 元素添加样式来控制网页中的布局、颜色、字体等方面的外观。CSS3 引入了许多新的特性，如圆角、渐变、阴影、动画等，使得网页设计更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值