AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端知识大全之CSS（中）

2022-12-09 84
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS是前端的一个重要的组成部分，可以给HTML这个进行化妆起到美化的作用。

12.文本大小写的转换与颜色设置（transform ）

说明使用transform可以设置文本的大小写与首字母转换，前提是只能转换英文的，中文的转换不了


CSS

/* 示例：设置h1标签的颜色 */
p{
    color: blueviolet;
}
/* 示例：仅对英文生效!!! */
p.transform{
    /* 把p标签英文变成大写 */
text-transform: uppercase;
    /*把p标签英文变成小写   */
text-transform: lowercase;
    /* 把p标签首字母变成大写 */
text-transform: capitalize;
}

HTML

<!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>文本转换大小写</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <p class="transform">我是aa<p>
    <p class="transform">我是BB<p>
    <p class="transform">我是cc</p>
</body>
</html>

13.文字水平对齐

说明：可以使文字向左、右、居中、水平两侧对齐


CSS

/* 文本对比方式 */
p.a{
    /* 左 */
    text-align: left;
}
p.b{
    /* 中 */
    text-align: center;
}
p.c{
    /* 右 */
    text-align: right;
}
p{
    /* 左右两侧都对齐 */
    text-align: justify;
}

HTML

<!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>文本转换大小写</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <p class="a">p标签一号<p>
    <p class="b">p标签二号<p>
    <p class="c">p标签三号</p>
    <p>p标签四号,大家可以加一下我的公众号，”云边的快乐猫“</p>
</body>
</html>

14.图片与文字之间垂直对齐（vertical-align）

说明：主要用来设置文字的垂直对齐，一般有图片对照看着才更直观

有顶部、底部、上角标、下角标对齐


CSS

img.a{
    /* 基于图片顶部对齐 */
    vertical-align: text-top;
}
img.b{
    /* 基于图片底部对齐 */
    vertical-align: text-bottom;
}
img.c{
    /* 基于图片上角标对齐 */
    vertical-align: sub;
}
img.d{
    /* 基于图片下角标对齐 */
    vertical-align: super;
}

HTML

<!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>文本转换大小写</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <p ><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="a">  p标签一号<p>
    <p  class="b"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="b">p标签二号<p>
    <p class="c"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="c">p标签三号</p>
    <p class="d"><img src="/图片/壁纸/111.jpg" alt="width=50" height="50" class="d">p标签四号,大家可以加一下我的公众号，”云边的快乐猫“</p>
</body>
</html>

15.文字和文字与行和行的间距

CSS

h1{
    /* 示例：字体间距 */
    letter-spacing: 10px;
}
/* 示例：行与行的间距 */
p{
    line-height: 100px;
}

HTML

<!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>行间距</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <h1>我是h1标签</h1>
    <p>p标签一号</p>
    <p>p标签二号</p>
</body>
</html>

16.文字之线条样式（text-decoration）

说明：

（必须有）线条种类：实线----solid、双实线----double、圆点线----dotted、虚线----dashed、波浪线----wavy

（根据需求可有可无）线条位置：上划线---overline、删除线---line-through、下划线---underline

（根据需求可有可无）线条颜色：自定义

（根据需求可有可无）线条大小：自定义


CSS

/* 线条种类 实线----solid、双实线----double、圆点线----dotted、虚线----dashed、波浪线----wavy*/
h1{
    /*overline:上划线  可设置线条颜色  双实线  线条大小*/
    text-decoration: overline blueviolet double  5px;
}
h2{
    /*  line-through：删除线  可设置线条颜色  虚线 线条大小*/
    text-decoration: line-through blueviolet dashed 2px;
}
h3{
    /* underline：下划线  可设置线条颜色  波浪线 线条大小*/
    text-decoration: underline blueviolet wavy 5px;
}

HTML

<!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>行间距</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
</body>
</html>

17.字体的样式与大小（font-family、font-size）

说明：要看支持什么字体可以在浏览器的右上角的三个小点--设置--外观--自定义字体里面查看

字体样式

/* 带头角----serif、现代简约----sans-serif、等宽字体--monospace、草书字体---cursive、装饰性字体----fantasy、草书字体---BrushScript MT*/


/* 常用：微软雅黑--Microsoft Yahei、苹方简---PingFang SC其他：浏览器查看*/


字体大小


/* 字体大小px是静态的，不会随着网页的拉伸而变化，em是随着网页的拉伸动态变化的，推荐使用px */


CSS

/* 带头角----serif、现代简约----sans-serif、等宽字体--monospace、草书字体---cursive、装饰性字体----fantasy、草书字体---BrushScript MT*/
/* 常用：微软雅黑--Microsoft Yahei、苹方简---PingFang SC其他：*/
/* 字体大小px是静态的，不会随着网页的拉伸而变化，em是随着网页的拉伸动态变化的，推荐使用px */
h1{
    font-family: sans-serif;
}
h2{
    /* 当后面的字体不生效，双引号里面的备份字体才生效 */
    font-family: "BrushScript MT",Cursive;
}
h3{
    font-family: 宋体;
}
h4{
    font-family: 隶书;
}
h5{
    font-family: 仿宋体;
    font-size: 1em;
}
h6{
    font-family: 微软雅黑;
    font-size: 20px;
}

HTML

<!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>字体样式</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <h1>I'm a handsome guy</h1>
    <h2>mydafafa am a beautiful woman</h2>
    <h3>I would like to have dinner</h3>
    <h4>我是一个大帅哥</h4>
    <h5>我是一个大美女</h5>
    <h6>我想吃饭</h6>
</body>
</html>

18.字体倾斜和粗细的样式（ font-style、font-weight）

说明：

/* 字体样式 正常字体---normal、倾斜---italic、倾斜（部分浏览器不支持）---oblique*/

/* 字体粗细,注意，这里使用100~900或者后面的英文都可以  细体----lighter、正常字体---normal、加粗字体---bold、更粗字体---bolder */

/* 字体样式 正常字体---normal、倾斜---italic、倾斜（部分浏览器不支持）---oblique*/
/* 字体粗细,注意，这里使用100~900或者后面的英文都可以  细体----lighter、正常字体---normal、加粗字体---bold、更粗字体---bolder */
p.p1{
    font-style: normal;
    font-weight: 100;
}
p.p2{
    font-style: italic;
    font-weight: 500;
}
p.p3{
    font-style: oblique;
    font-weight: bolder;
}

HTML

<!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>字体样式</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <p class="p1">我是p1标签</p>
    <p class="p2">我是p2标签</p>
    <p class="p3">我是p3标签</p>
</body>
</html>

19.谷歌字体和Icon图标

说明：为什么要使用谷歌字体，因为谷歌字体是免费的，有1000+的种类,介于这个比较花里胡哨，就用的时候再查就好了

20.各种小图标的网站(Icon)

说明：这个网站有各种需要的小图标，可以直接去下载使用


Find the Perfect Icon for Your Project | Font Awesome


21.选择器的优先级

行内样式>ID选择器>类选择器>元素选择器>通用选择器

对应的权重值分别是1000>100>10>1>0

22.文本的边框（border）

说明：可以定义文本的边框，默认是定义是个边框的，如果需要单独定义那就要分别设置上下左右的边框属性。线条类型的属性是必须要定义的，颜色和大小可以根据需求要不要定义都可以


线条的类型：点状的边框---dotted、虚线边框---dashed、实线边框---solid、双倍边框--double、无边框---none、隐藏的边框--hidden


CSS

/* 线条的类型：点状的边框---dotted、虚线边框---dashed、实线边框---solid、双倍边框--double、无边框---none、隐藏的边框--hidden */
p.p1{
    /* 边框粗细  必需：边框的线条类型  边框的颜色 */
    border: 5px solid rebeccapurple;
}
p.p2{
    border: 10px dashed yellow;
}
p.p3{
    border: 5px dotted rebeccapurple;
}

HTML

<!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>字体样式</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <p class="p1">我是p1标签</p>
    <p class="p2">我是p2标签</p>
    <p class="p3">我是p3标签</p>
</body>
</html>

23.无序列表和有序列表和图片标记 （list-style-type、ist-style-image）

说明：可以给文字列表定义顺序

无序有序列表：list-style-type:定义

图片列表：list-style-image:定义

删除列表标记：list-style: none;

无序列表： 空心圆点---circle、实心圆点---disc、实心方块----square

有序列表 阿拉伯数字--decimal、罗马数字---upper-roman、英文小写字母---lower-alpha


CSS 

/*无序列表： 空心圆点---circle、实心圆点---disc、实心方块----square */
ul.a{
    list-style-type: disc;
}
/* 有序列表 阿拉伯数字--decimal、罗马数字---upper-roman、英文小写字母---lower-alpha */
ol.b{
    list-style-type: decimal;
}
/* 图片列表标记 url里面放图片路径*/
ul.c{
    list-style-image: url(/图片/壁纸/111.jpg )  ;
}
/* 删除定义的列表 */
ul.c{
    list-style: none;
}

HTML

<!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>列表</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <!-- 无序列表 -->
    <ul class="a">
        <li>大哥</li>
        <li>二哥</li>
        <li>三哥</li>
    </ul>
    <!-- 有序列表 -->
    <ol class="b">
        <li>刘备</li>
        <li>关羽</li>
        <li>张飞</li>
    </ol>
    <!-- 图片标记列表 -->
    <ul class="c">
        <li>三国</li>
        <li>真好玩</li>
    </ul>
</body>
</html>

24.CSS背景属性设置(background)

说明:可以用这个设置页面的背景图片

   /* 背景颜色：rgba是设置颜色的透明度，最后面那个值越小越透明0~1*/

/* 背景图片：url里面填写图片路径 */


   /*铺满还是不铺满页面： 铺满--repeat、不铺满---no-repeat */


   /*图片位置： right和bottom是设置图片的位置 水平样式：左--left、中间--center、右--right  垂直样式：顶--top、中--center、底部--bottom */


   /* 鼠标滚动：同时滚动---scroll、背景固定---fixed */


CSS

html,body{
    /* 背景颜色：rgba是设置颜色的透明度，最后面那个值越小越透明0~1*/
    /* 背景图片：url里面填写图片路径 */
    /*铺满还是不铺满页面： 铺满--repeat、不铺满---no-repeat */
    /*图片位置： right和bottom是设置图片的位置 水平样式：左--left、中间--center、右--right  垂直样式：顶--top、中--center、底部--bottom */
    /* 鼠标滚动：同时滚动---scroll、图片固定---fixed */
    background: rgba(0, 255, 0, 0.1) 
    url(/图片/个人/杂物/小图片.png) 
    no-repeat
    right bottom
    scroll 
    ;
}

HTML

<!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>列表</title>
    <!-- 头部标签 -->
    <!-- 这是css的路径 -->
    <link rel="stylesheet" href="Test.css">
</head>
<!-- 身体标签 -->
<body>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
    <p>人生不能重来，遇到的人请务必去珍惜</p>
</body>
</html>

文章标签：
前端开发
关键词：
前端css
CSS前端知识
卿相
目录
相关文章
小徐在进步
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
小徐在进步
262 91
土木林森
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用CSS3，打造炫酷视觉效果！
【10月更文挑战第31天】前端开发面临复杂布局的挑战，本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求，而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局，帮助开发者构建高性能、用户友好的网页应用。
土木林森
28 4
邹荣乐
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
232 1
六卿
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
58 3
前端基础(五)_CSS文本文字属性、背景颜色属性
六卿
|
3月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性：层叠性、继承性和优先级，并通过实例演示了样式冲突、叠加和选择器优先级的应用。
六卿
33 2
前端基础(九)_CSS的三大特征
有路有乔-六月
|
2月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
66 3
G0518
|
2月前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
71 2
半截诗
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）2
【前端基础篇】CSS基础速通万字介绍（上篇）
半截诗
26 2
半截诗
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）3
【前端基础篇】CSS基础速通万字介绍（上篇）
半截诗
19 1
半截诗
|
2月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍（上篇）1
【前端基础篇】CSS基础速通万字介绍（上篇）
半截诗
21 1

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    CSS伪元素实现的3D按钮
  • 3
    css属性列表 和 属性值含义
  • 4
    webpack window 使用sass来编译css样式
  • 5
    CSS3的新属性的一下总结
  • 6
    CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
  • 7
    符合WEB标准的下拉导航菜单（CSS菜单）演示
  • 8
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    19个基于 HTML5 和 CSS3 开发的优秀应用程序
  • 1
    构建高效响应式Web界面：现代前端框架的比较
    431
  • 2
    从前端到后端：构建现代化Web应用的技术探索
    149
  • 3
    uniapp上传图片 前端以及java后端代码实现
    266
  • 4
    通过学习mayfly，我学会了前端如何优雅设计字典值
    118
  • 5
    前端最常见的JS面试题大全
    109
  • 6
    前端代码整洁与规范之CSS篇
    240
  • 7
    如何优化前端网页性能提升用户体验
    88
  • 8
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
    661
  • 9
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
    163
  • 10
    layui：从崛起到蜕变，前端框架的华丽篇章
    229

    • 相关课程

    更多
  • CSS 快速掌握
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。