CSS 01

最新推荐文章于 2024-05-23 11:00:50 发布
最新推荐文章于 2024-05-23 11:00:50 发布
阅读量404 收藏 7
点赞数 8
分类专栏： 前端学习 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63504072/article/details/136590193
版权

1.定义

（1）基本写法（内部样式表，学习使用）：CSS代码写在style标签里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识CSS</title>
    <style>
        /* CSS代码 */
        /* 选择器 { CSS属性 } */
        /* 属性名和属性值成对出现，叫做键值对 */
        p {
            /* 调整颜色 */
            color: aqua;
            /* 调整字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>体验CSS</p>
</body>
</html>

效果：

（2）外部样式表（开发使用）写法：CSS代码写在单独的CSS文件中，在HTML使用link标签引入

CSS文件：

/* 这个文件放CSS代码 */
p {
    color: red;
}

HTML文件： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS引入</title>
    <!-- link引入外部样式表 rel：关系，样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是p标签</p>
    <!-- 行内写法：style=" CSS属性 " -->
    <div style="color: blue; font-size: 30px;">这是div标签</div>
</body>
</html>

行内写法一般配合JS使用

效果：

2.CSS选择器

基础选择器

（1）标签选择器

使用标签名作为选择器，选中同名标签设置相同样式

写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        /* 选中同名标签设置相同样式，无法差异化同名标签的样式 */
        p {
            color: red
        }
    </style>
</head>
<body>
    <p>第一个</p>
    <p>第二个</p>
    <p>123</p>
</body>
</html>

可以发现所有p标签都变红了

（2）类选择器

查找标签，差异化设置标签的显示效果

写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }

        .size {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class="red">12345</p>
    <p>09877</p>
    <!-- 一个标签可以用多个类名，class属性值写多个类名，之间用空格隔开 -->
    <div class="red size">这是div</div>
</body>
</html>

效果：

（3）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>
        /* 定义 */
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 使用 -->
    <div id="red">这是div</div>
</body>
</html>

（4）通配符选择器

<!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: aqua;
        }
    </style>
</head>
<body>
    <p>p标签</p>
    <div>div标签</div>
    <h1>h1标签</h1>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <strong>这是strong</strong>
</body>
</html>

效果：

3.画盒子：宽度高度背景色

通过修改这三个属性来画盒子

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画盒子</title>
    <style>
        .red {
            /* 宽度 */
            width: 100px;
            /* 高度 */
            height: 100px;
            /* 背景色 */
            background-color: brown;
        }

        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>
</html>

效果：

4.文字控制属性

（1）文字大小

<!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>
        /* 谷歌浏览器文字默认大小16px */
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>字体大小</p>
    <div>默认字体大小</div>
</body>
</html>

（2）文字粗细

<!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 {
            font-weight: 400
        }
        /* 加粗 */
        div {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h3>h3标题</h3>
    <div>div标签</div>
</body>
</html>

（3）字体倾斜

<!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>
        em {
            font-style: normal;
        }

        div {
            font-style: italic;
        }
    </style>
</head>
<body>
    <em>em标签</em>
    <div>div标签</div>
</body>
</html>

效果：

（4）行高

调节多行文本之间的行距

<!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 {
            font-size: 20px;
            /* line-height: 30px; */
            line-height: 2;
        }
    </style>
</head>
<body>
    <p>鸟山明，这个名字对于许多人来说并不陌生。他是日本漫画界的传奇人物，创作了无数脍炙人口的作品，其中最为人津津乐道的莫过于《龙珠》系列。这部作品不仅在日本本土赢得了极高的声誉，更在全球范围内收获了无数粉丝的喜爱。鸟山明以其独特的艺术风格和深刻的思想内涵，成为了影响几代人的艺术巨匠。成龙与鸟山明虽然分属不同的艺术领域，但两人都对艺术有着深厚的热爱和追求。成龙在得知鸟山明离世的消息后，内心充满了悲痛和不舍。他在微博上写道：“听到鸟山明先生离世的消息，我感到非常震惊和难过。他是一位伟大的艺术家，他的作品影响了无数人，包括我在内。他的离世是艺术界的一大损失，我们失去了一位真正的天才。”成龙的发文不仅表达了对鸟山明的敬意和怀念，更展现了两位艺术家之间的深厚情谊。他们的离世，让我们深感痛惜，但同时也提醒我们珍惜眼前人，珍惜那些为我们带来美好回忆的作品。</p>
</body>
</html>

 

（4.1）行高实现文字垂直居中

行高属性值等于盒子高度属性值

<!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 {
            height: 100px;
            background-color: skyblue;

            /* 注意：只能是单行文字垂直居中 */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

 

（5）字体族

<!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 {
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <div>测试文字</div>
</body>
</html>

效果：

 

（6）字体复合属性

<!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 {
            font: italic 700 30px/2 楷体;
        }
    </style>
</head>
<body>
    <div>测试文字</div>
</body>
</html>

效果：

 

（7）文本缩进

<!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 {
            text-indent: 2em;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>鸟山明，这个名字对于许多人来说并不陌生。他是日本漫画界的传奇人物，创作了无数脍炙人口的作品，其中最为人津津乐道的莫过于《龙珠》系列。这部作品不仅在日本本土赢得了极高的声誉，更在全球范围内收获了无数粉丝的喜爱。鸟山明以其独特的艺术风格和深刻的思想内涵，成为了影响几代人的艺术巨匠。成龙与鸟山明虽然分属不同的艺术领域，但两人都对艺术有着深厚的热爱和追求。成龙在得知鸟山明离世的消息后，内心充满了悲痛和不舍。
        他在微博上写道：“听到鸟山明先生离世的消息，我感到非常震惊和难过。他是一位伟大的艺术家，他的作品影响了无数人，包括我在内。他的离世是艺术界的一大损失，我们失去了一位真正的天才。”成龙的发文不仅表达了对鸟山明的敬意和怀念，更展现了两位艺术家之间的深厚情谊。他们的离世，让我们深感痛惜，但同时也提醒我们珍惜眼前人，珍惜那些为我们带来美好回忆的作品。</p>
</body>
</html>

实现了首行缩进：

（8）文本对齐

<!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>
        h1 {
            /* 居中的是文字内容，不是标签 */
            text-align: center; 
            /* text-align: right; */
        }
    </style>
</head>
<body>
    <h1>文字</h1>
</body>
</html>

效果：

（8.1）图片居中

 图片居中要让图片img标签嵌套到其他标签中，然后让这个父标签实现文本居中 

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>
        h1 {
            /* 居中的是文字内容，不是标签 */
            text-align: center; 
            /* text-align: right; */
        }

        div {
            /* 图片居中须嵌套到其他标签中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>文字</h1>
    <br><br>
    <div>
        <img src="./day02/image/1.jpg" alt="">
    </div>
</body>
</html>

效果：

 （9）修饰线

<!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>
        a {
            text-decoration: none;
        }

        div {
            text-decoration: underline;
        }

        p {
            text-decoration: line-through;
        }

        span {
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <a href="#">a标签，去掉下划线</a>
    <div>div标签，添加下划线</div>
    <p>p标签，添加删除线</p>
    <span>span标签，添加顶划线</span>
</body>
</html>

效果：

（10）文字颜色

<!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>
        h1 {
            background-color: aqua;
            /* color: aqua; */
            /* color: rgb(0, 255, 0); */
            /* color: rgba(0,0,0,0.3); */
            /* color: #0000ff; */
            color: #00f;
        }
    </style>
</head>
<body>
    <h1>h1标签</h1>
</body>
</html>

 

5.一般使用谷歌浏览器调试查看效果

案例1

<!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>
        h1 {
            text-align: center;
            font-weight: 400;
            font-size: 30px;
            color: #333;
        }

        div {
            font-size: 14px;
            color: #999;
        }

        p {
            text-indent: 2em;
            font-size: 18px;
            color: #333;
        }

        .pic {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
    <div>央视网 | 2022年09月20日 14:18:56</div>
    <p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
    <div class="pic">
        <img src="./day03/1.jpg" alt="">
    </div>
    <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
    <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>

</body>
</html>

效果： 

案例2

<!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>
        h1 {
            color: #333;
        }

        p {
            text-indent: 2em;
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }

        a {
            color: #0069c2;
        }

        li {
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS（层叠样式表）</h1>
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现<a href="#">HTML</a>（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
        CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
    <p><strong>CSS是一种定义样式结构如字体、颜色、位置等的语言</strong>，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。</p>
    <ul>
        <li>CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。</li>
        <li>ID属性的操作类似于CLASS属性</li>
        <li>STYLE属性实际上可以替代整个<a href="#">选择器</a>机制</li>
    </ul>    
</body>
</html>

效果： 

李玉洁++
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day03（CSS01-基础选择器+字体文本样式）.rar
12-01
day03（CSS01-基础选择器+字体文本样式）.rar
程序员考试刷题-CSS01_W2020:CSS01_W2020
07-07
程序员考试刷题CSS01 IntroPython W2020 讲师：约翰·塞伦斯 教师办公室：5338 McGill Hall 办公时间：W 9-10am 集合时间：M/W 8-8:50am 地点：曼德维尔 B-210 课程说明 本课程将向新程序员介绍 Python 和 Jupyter ...
走进css——01
01-08
阅读者最好有一点css基础，才能更好深入了解 css中常见长度单位 em 相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸） rem r即root，始终相...
HTML+ CSS 01
04-15
其中包含HTML和CSS的，PPT教程，PDF格式教程，以及例子，源代码，HTML和CSS包含各种属性和用法！！！
CSS_01_Css学习教程_
09-29
前端css的学习应用以及举例说明，对css的基础知识进行了梳理
CSS浮动（CSS从入门到精通学习第四天）
m0_49067926的博客
05-22 968
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
前端学习CSS
Kongfutu的博客
05-19 270
CSS 语法CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式选择器{属性1：属性值1；属性2：属性值2；1. 选择器的声明中可以写无数条属性2. 声明的每一行属性，都需要以英文分号结尾：3. 声明中的所有属性和值都是以键值对这种形式出现的；示例：这是一个 p 标签选择器p{CSS二种导入万式下面是三种常见的 CSS 导入方式：1.内联样式 （Inline Styles）
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 1082
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
CSS+vue.js
weixin_56316833的博客
05-19 252
p {/*设置字体颜色*/color: red;/*设置字体大小*/
百度页面奔跑的白熊html、css
2302_80141844的博客
05-16 1016
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
HTML+CSS+JS简易计算器
2201_75813676的博客
05-18 314
index.css idnex.js 运行结果
tailwindcss 使用
HYeeee的博客
05-22 164
3.0可不用配置，默认就是该模式，无法关闭。按需加载样式，定义在extend中的样式也一样，没被用到，不会加载。另外，如果在一个页面中，有动态计算的样式，会因为在编译阶段没有该样式导致不生效;这里的需求是：显示卡片个数根据页面宽度自适应，1600及以上显示4个，以下显示3个。模式下，如果样式可预见，可以在某个页面处固定写死那些动态生成的。模式下动态定义的样式不会解析出来。函数 —— （推荐方式）批量生成配置，从而获得对应。这个最大问题在于只能是。
css卡片翻转 父元素翻转子元素不翻转效果
weixin_43858851的博客
05-22 135
css卡片翻转 父元素翻转子元素不翻转效果
CSS学习笔记之高级教程（一）
wz_1992的博客
05-22 798
1、圆角：border-radius border-radius 属性可以接受一到四个值。规则如下： 四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角） 三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角） 两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
解决IE11通过主机名访问和IP地址访问，CSS渲染效果不一致问题
最新发布
shenweihong的博客
05-23 233
这个问题在Microsoft Edge，谷歌都不存在，只在老的IE版本(如IE11)才有。IP地址访问才是我想要的效果，主机访问菜单半透明向下箭头不见了，背景图片分了好几部分。spingboot:版本2.6.13。
【css3】04-css3转换
m0_68467925的博客
05-22 280
2d旋转 ；3d旋转；案例：会旋转的魔方
vue js css 刻度尺选取体重身高
好人一生平安
05-22 160
css**
CSS单位px、rem、em、vw、vh的区别
zheshiyangyang的博客
05-22 991
这几天在写个人网站，因为要适配和，因此了解到了一个：“”()，现在我们来讨论一下中的单位，只有掌握好了这些单位，我们才可以熟练使用“不同的单位修改盒子的宽度。
【CSS】媒体（媒介 / media）查询
小秀的博客
05-22 358
媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。
html 考勤页面 包含CSS
05-26
HTML 考勤页面可以包含 CSS 样式，通过 CSS 可以为页面元素添加样式，使其更加美观和易于使用。以下是一个简单的 HTML 考勤页面示例，其中包含了 CSS 样式。 ```html <!DOCTYPE html> 考勤页面 body { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值