CSS

最新推荐文章于 2024-01-15 00:00:00 发布
最新推荐文章于 2024-01-15 00:00:00 发布
阅读量78 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44373403/article/details/103661928
版权

CSS基础

在这里插入图片描述

1.什么是CSS？

CSS概述:
Cascading Style Sheets : 层叠样式表

主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离，提高代码复用性

CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>
2.CSS选择器

元素选择:

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

            <style>

                  /**

                   元素的名称{

                        属性名称:属性的值;

                        属性名称:属性的值;

                        }

                   */

                  span{

                        color: red;

                  }

            </style>

      </head>

      <body>

            <span>HelloWorld!</span>

            <span>HelloWorld!</span>

            <span>HelloWorld!</span>

            <span>HelloWorld!</span>

      </body>

</html>

ID选择器:

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

            <style>

                  /**

                   * 以#号开头  ID在整个页面中必须是唯一的s

                  #ID的名称{

                        属性名称:属性的值;

                        属性名称:属性的值;

                        }

                   */

                  #span1{

                        color: blue;

                  }

                  #span2{

                        color: red;

                  }

            </style>

      </head>

      <body>

            <span id="span1">HelloWorld!</span>

            <span id="span2">HelloWorld!</span>

            <span>HelloWorld!</span>

            <span>HelloWorld!</span>

      </body>

</html>

类选择器:

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

            <style>

                  /**

                   以 . 开头 

                  .类的名称{

                        属性名称:属性的值;

                        属性名称:属性的值;

                        }

                   */

                  .fruit{

                        color: yellow;

                  }

                  .vegetable{

                        color: red;

                  }

            </style>

      </head>

      <!--

       水果类，改成黄色

       蔬菜类，改成红色

    -->

      <body>

            <div class="fruit">香蕉</div>

            <div class="vegetable">黄瓜</div>

            <div class="fruit">苹果</div>

            <div class="vegetable">茄子</div>

            <div class="fruit">哈密瓜</div>

      </body>

</html>

其他选择器：

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

  • 属性选择器:

    a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

  • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

  • 子元素选择器: 父选择器 > 儿子选择器

  • 伪类选择器: 通常都是用在A标签上

3. 引入方式

内部样式：

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

            <style>

                  /**

                   * 正常的使用模式就是内部样式

                   */

                  .fruit{

                        color: yellow;

                  }

                  .vegetable{

                        color: red;

                  }

            </style>

      </head>



      <body>

            <div class="fruit">香蕉</div>

            <div class="vegetable">黄瓜</div>

            <div class="fruit">苹果</div>

            <div class="vegetable">茄子</div>

            <div class="fruit">哈密瓜</div>

      </body>

</html>

外部样式:

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

            <!--

             外部样式: 通过link标签引入一个外部的css文件

                              多个页面使用同一个格式的时候，提取CSS出来，做一个文件

                              提高代码的复用性

             -->

            <link rel="stylesheet" href="style.css" />

            

      </head>

      <body>

            <div class="fruit">香蕉</div>

            <div class="vegetable">黄瓜</div>

            <div class="fruit">苹果</div>

            <div class="vegetable">茄子</div>

            <div class="fruit">哈密瓜</div>

      </body>

</html>

行内样式:

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

      </head>

      <body>

            <!--通过行内样式修改属性-->

            <div class="fruit" style="color: yellow;">香蕉</div>

            <div class="vegetable">黄瓜</div>

            <div class="fruit">苹果</div>

            <div class="vegetable">茄子</div>

            <div class="fruit">哈密瓜</div>

      </body>

</html>
4.浮动
<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

      </head>

      <body>

            <!--

                  css浮动:浮动的元素会脱离正常的文档流，在正常的文档流中不占空间（会导致看不到）

                         float属性:

                            left

                            right

                        

                        clear属性: 清除浮动

                            both : 两边都不允许浮动

                            left: 左边不允许浮动

                            right : 右边不允许浮动

                        流式布局:拉动页面的时候，它根据页面缩小改变

        -->

            <div style="float:left;width: 200px ;height: 
200px;background-color: red;"></div>

            <div style="width: 250px ;height: 200px;background-color: 
blue;"></div>

            <div style="width: 200px ;height: 200px;background-color: 
yellow;"></div>

            <div style="width: 200px ;height: 200px;background-color: 
green;"></div>

      </body>

</html>
5.盒子模型
<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

      </head>

      <body>

            <!--

                  内边距：

             padding-top:

                  padding-right:

                  padding-bottom:   

                  padding-left:

                  

                  padding:10px;  上下左右都是10px

                  padding:10px 20px;  上下是10px 左右是20px

                  padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px

                  padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

                  

                  外边距:

                  margin-top:       

                  margin-right:                 

                  margin-bottom:          

                  margin-left:

        -->

            <div style="border:3px solid red ; width: 400px; height: 
400px;" >

                   <div style="border:1px solid gray; width: 150px; 
height: 150px;padding: 10px 20px 30px;">肾7plus</div>

                   <div style="border:1px solid yellow; width: 150px; 
height: 150px;">华为P9</div>

                   

            </div>

      </body>

</html>

绝对定位

<!DOCTYPE html>

<html>

      <head>

            <meta charset="UTF-8">

            <title></title>

      </head>

      <body>

            <!--

             CSS绝对定位:

                 position: absolute

                 top: 控制距离顶部的位置

                 left: 控制距离左边的位置

        -->

            <div style="border: 5px solid red; width: 400px; height: 
400px;position: absolute;top: 200px;left: 200px;">

                  黑马程序员

            </div>

      </body>

</html>
尘迦子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
css投影
weixin_41824429的博客
10-08 6682
css投影
CSS表格
m0_57774967的博客
04-24 5598
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS——rem
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
CSS——less
qq_48613863的博客
04-09 8669
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
CSS遮罩层
weixin_44282093的博客
07-19 9305
css遮罩层
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
CSS中 设置( 单行、多行 )超出显示省略号
热门推荐
明天也要努力的博客
12-05 13万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
【CSS】滚动条样式详解
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
CSS Tutorial
06-20
CSS Basic CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box ...
bootstrap.css
01-27
bootstrap的css文件
这演示的叫啥数学模型来着，似曾很熟
最新发布
07-25
这演示的叫啥数学模型来着，似曾很熟
b131学生成绩分析和弱项辅助系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
学生成绩分析和弱项辅助系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现学生成绩分析和弱项辅助系统的功能。其中管理员管理用户，新闻公告。 学生成绩分析和弱项辅助系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，学生成绩分析和弱项辅助系统都可以轻松应对。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。教师信息管理页面，此页面提供给管理员的功能有：查看已发布的教师信息数据，修改教师信息，教师信息作废，即可删除，还进行了对教师信息名称的模糊查询 教师信息信息的类型查询等等一些条件。试卷信息管理页面，此页面提供给管理员的功能有：根据试卷信息进行条件查询，还可以对试卷信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
vue2之jessibuca视频插件使用教程之字体文件
07-25
vue2之jessibuca视频插件使用教程之字体文件
b126小型医院医疗设备管理系统-springboot+vue.zip（可运行源码+sql文件+文档）
07-25
小型医院医疗设备管理系统在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务 总之，小型医院医疗设备管理系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 职员信息管理页面，此页面提供给管理员的功能有：职员信息的查询管理，可以删除职员信息、修改职员信息、新增职员信息，还进行了对用户名称的模糊查询的条件。设备信息管理页面，此页面提供给管理员的功能有：查看已发布的设备信息数据，修改设备信息，设备信息作废，即可删除，还进行了对设备信息名称的模糊查询 设备信息信息的类型查询等等一些条件。库房信息管理页面，此页面提供给管理员的功能有：根据库房信息进行条件查询，还可以对库房信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值