css的基本运用

最新推荐文章于 2024-07-30 23:06:43 发布
最新推荐文章于 2024-07-30 23:06:43 发布
阅读量25 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_79203970/article/details/133842207
版权

css的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 align="center"><font color="pink" size="7">七步诗</font></h3>
    <p align="center"><font color="blue" size="2">yyds</font>
    
</body>
</html>

这里的方法需要被替换

    <!-- 
        文字颜色 color;
        文字大小 font-size；
        文本对齐 text-align；
        居中对齐 text-align:center；
     -->

<!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>

        h6{ color: red; font-size: 11px; text-align: center;}
        p{
            text-align: center;
            font-size: 60px;
            color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- 
        文字颜色 color;
        文字大小 font-size；
        文本对齐 text-align；
        居中对齐 text-align:center；
     -->
     <h6>永远都是</h6>
     <p>煮豆燃豆萁，豆在釜中泣。</p>
     <p>本是同根生，相煎何太急。</p>
</body>
</html>

文字的三属性

还是一样将文字的属性写在一个字典中

color ：字体颜色       font-size：字体的大小

font-family：字体的类型

（补充：txet-align字体的位置）

<!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>
        p{
            color:burlywood;
            font-size: 20px;
            text-align: center;
        }
        li{
            color:aqua;
            font-size: 24px;
            text-align: center;
            font-family: "楷体";
        }
        h3{
            color: blue;
            font-size: 23px;
        }
    </style>
</head>
<body>
    <p>我是段落标签</p>
    <ul>
        <li>小标题</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <h3>我是标签三</h3>

</body>
</html>

实体化三属性

注意：使用时要放在头文件

标签选择器

标签名{

}

如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>
        h3{
            color: blueviolet;
            font-size: 35px;
            font-family: "宋体";
            background: peachpuff;
        }
        h4{
            color: yellow;
            font-size: 35px;
            font-family: "宋体";
            background: peachpuff;
        }
        h5{
            color: blueviolet;
            font-size: 35px;
            font-family: "宋体";
            background: darkblue;
        }
        dl{
            width: 500px;
            height: 70px;
            background: tomato;
        }
        dt{
            width:300px;
            height: 30px;
            background: lawngreen;
        }
        dd{
            width: 100px;

            background: olivedrab;
        }
    </style>
</head>
<body>
    <h3>我是标题三</h3>
    <h5>我是标题五</h5>
    <h4>我是标题四</h4>
    <ul>
        <li>我是无序列表</li>
    </ul>
    <dl>
        <dt>项目名</dt>
        <dd>项目需求</dd>
    </dl>
    
</body>
</html>

测试span 和div的显示模式

 <!-- 区别：大盒子布局背景会自动铺满，小盒子只用于本身 -->

    <!--

        我们的显示模式比较典型的有两种：行内元素 和 块级元素

        最常见的行内元素 span，最常见的块级元素是 div

        行内元素span 是小盒子，小容器就是用来放一些小图片或者修饰性的一些内容

        块级元素 div 是大盒子，大容器--他是主要用来做网页布局的，因为div比较稳定，一般在网页里面使用频率最高的，布局是离不开div的

        ******** 跟着老师来推论，推论过程会累一点，但是印象会深刻

        第一情况：如果不写宽度和高度

        块级元素：大盒子div他会独占一行并且通栏显示

        行内元素：小盒子span他会一行并存，显示文字的大小，或者说文字的多少

        第二情况：写了宽度和高度

        块级元素：大盒子div他会显示你给的宽度和高度大小，一句话就是宽度和高度起作用。

        行内元素：小盒子spa就算你给了宽度和高度他也不会起作用。

     -->

<!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>
        div{
            background: darkblue;
        }
        span{
            background: tan;
        }
    </style>
<!--第二种情况
<style>
    div{
        width:60px;
        height:50px;
        background: darkblue;
    }
    span{
        width:60px;
        height:50px;
        background: tan;
    }
</style>
-->
</head>
<body>
    <!-- 区别：大盒子布局背景会自动铺满，小盒子只用于本身 -->
    <!-- 
        我们的显示模式比较典型的有两种：行内元素 和 块级元素
        最常见的行内元素 span，最常见的块级元素是 div
        行内元素span 是小盒子，小容器就是用来放一些小图片或者修饰性的一些内容
        块级元素 div 是大盒子，大容器--他是主要用来做网页布局的，因为div比较稳定，一般在网页里面使用频率最高的，布局是离不开div的
 
        ******** 跟着老师来推论，推论过程会累一点，但是印象会深刻
        第一情况：如果不写宽度和高度
        块级元素：大盒子div他会独占一行并且通栏显示
        行内元素：小盒子span他会一行并存，显示文字的大小，或者说文字的多少
        第二情况：写了宽度和高度
        块级元素：大盒子div他会显示你给的宽度和高度大小，一句话就是宽度和高度起作用。
        行内元素：小盒子spa就算你给了宽度和高度他也不会起作用。
     -->
    <div>大盒子</div>
    <span>小盒子</span>
    
</body>
</html>

解决显示问题

display：block（可以换成块）

display：inline（可以转换为行内）

<!--

        显示模式之间的转换 display

        1、display: block; 就是把行内元素转换为块级元素  重点

        2、display: inline; 就是把块级元素转换为行内元素； 用的较少知道就可以了

      -->

<!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>
    div{
        background: honeydew;
        display: inline;
        width: 60px;
    }
    span{
        background: firebrick;
        display: block;
        width: 500px;
        height: 600px;
    }
</style>
</head>

<body>
    <div>大盒子</div>
    <span>小盒子</span>
    
</body>
</html>

类的选择器

类的引用使用class

.名称   为引用方法

具体看代码

<!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>
        .one{
            color:aqua;
            background: salmon;
        }
        .yyds{
            color:brown ;
        }
    </style>
</head>
<body>
    <ul class="one">
        <li class="one">我是无序列表</li>
        <li class="yyds">我是标题五</li>
    </ul>
</body>
</html>

多个类的使用

class=“类一  类二”空格隔开即可

<!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>
        .color{
            color:aquamarine;
        }
        .size{
            font-size: 200px;
        }
        .s{
            font-weight: 500px;
            font-family: "宋体";
        }
    </style>

</head>
<body>
    <!-- 多个类的功能应用 -->
    <div class="color size s">一句话的应用</div>
</body>
</html>

id选择器

创建方法    #名称

使用方法    id="名称"

<!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>
        #one{
            color: darkgoldenrod;
        }
        #co{
            color: darkslategrey;
        }
        #zt{
            font-size: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li id="one">无序列表</li>
        <li id="co" >无序列表</li>
    </ul>
</body>
</html>

选择器的权重性

标签选择器 < 类选择器 < id选择器

<!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>
        #y1{
            color: blueviolet;
        }
        .y2{
            color: darkslategray;
        }
        div{
            color: brown;
        }
    </style>
</head>
<body>
    <div id="y1" class="y2">看看是什么颜色</div>
</body>
</html>

基贤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
css基础入门
YUWA的博客
12-31 849
css基础 层叠样式表css特性：层叠性，继承性[h系和a标签除外（浏览器内核有个默认样式）] 优先级：！important>行内样式（嵌入标签）>id选择器>类选择器>标签选择器>默认样式css基础 css选择器 行高相关属性 文本元素属性 连接伪类和a标签相关属性 背景属性 border相关属性 浮动布局float 定位相关属性position 元素之间的转换属性 css初始化css选
css基础【1】
m0_61044901的博客
03-07 132
1.什么是 CSS? CSS 指层叠样式表 (CascadingStyleSheets)。 它定义了如何显示HTML元素的样式【颜色\形状\尺寸.....】。 HTML超文本标记语言是用来创建网页的内容。 2.CSS的作用? 给网页[html]的元素/标记/标签设置样式的,以让HTML网页变得好看。 为了解决内容【[html]的元素】与表现【样式】分离的问题 3.在HTML网页中如何使用CSS? 1）内联定义 (Inline Styles） 在html开始标记中通过style...
CSS的基本使用
weixin_63680062的博客
02-06 3434
CSS的基本使用一 1.CSS基本语法 CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一份CSS属性和属性值 选择器名 { 属性 ： 属性值； 属性 ： 属性值； ······ } div { background-color : red; } 注意： css声明以分号结束，声明用{}括起来 建议一行写一个属性 若值为若干单词，要把值用引号引起来，如：font-family:“agency fb”; 2. CSS的使用 2.1 行内式 ​ 行内样式将样式定义在
HTML中的CSS超详细使用（附代码图文示例）【干货】
热门推荐
Jin_Xiang123的博客
12-15 1万+
本篇文章主要介绍HTML中的CSS详细使用（附代码图片示例）以及部分理论知识 为什么使用CSS： CSS（层叠样式表）是一种用来描述网页上元素样式的技术。使用CSS的主要原因包括以下几点： ①有效的传递页面信息 ②使用CSS美化网页使网页漂亮、美观、吸引用户 ③可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 ④具有良好的用户体验
CSS基本选择器
qq_45325885的博客
11-01 589
CSS基本选择器的使用 一、CSS的基本介绍 CSS是一种样式渲染表(Cascading Style Sheets)，主要是用来描述HTML语言的，能够控制HTML语言呈现出来的视觉效果。 二、基本选择器的使用 id选择器 id 选择器使用 HTML 元素的 id 属性来选择特定元素。 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！ 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。 这条 CSS 规则将应用于 id=“test” 的 HTML 元素： #te
HTML + CSS 基本案例
08-22
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是网页开发的基石，它们共同...总之，HTML和CSS是构建互联网世界不可或缺的技术，深入理解并熟练运用它们，对于任何IT从业者来说都是非常重要的。
HMTL+CSS的简单运用
03-08
在这个“HTML+CSS的简单运用”资源中，我们将会探讨如何利用这两者创建一个简单的用户登录界面。 HTML是网页内容的骨架，它定义了网页的结构和意义。在“简单用户登录界面HTML模板”中，我们可以预期看到以下几个...
web中css的运用
03-28
为了解决这一问题，合理运用CSS成为了一个关键的技术手段。 ### 二、CSS基础知识回顾 在深入讨论解决方案之前，我们先简单回顾一下CSS的基础知识。CSS是一种用于增强HTML文档样式的语言，它可以控制文档中元素的...
css:CSS基本练习模块
05-28
在IT行业中，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的样式语言，是网页...通过实践这些知识点，你可以更好地理解和运用CSS，创造出更具吸引力和功能性的网页设计。
css
03-19
1. **CSS基本概念** - **选择器**：CSS选择器是用于选取HTML或XML文档中元素的模式，如`h1`选择器选取所有的`<h1>`元素，`#id`选择器选取具有特定ID属性的元素，`.class`选择器选取具有特定类名的元素。 - **属性*...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1302
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 452
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
07-30 233
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 286
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 459
对于上云api开发学习过程中的错误教训积累总结
electron 主进程和渲染进程
qq_21087199的博客
07-29 319
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1320
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
最新发布
@Fonden
07-30 272
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 504
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值