vue3学习14：html基础知识学习（css）

最新推荐文章于 2024-06-04 19:12:09 发布

<编程路上>

最新推荐文章于 2024-06-04 19:12:09 发布

阅读量678

点赞数 1

分类专栏： vue3 文章标签： css html 学习

本文链接：https://blog.csdn.net/weixin_43788986/article/details/125762079

版权

vue3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

CSS 指的是层叠样式表(Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中。

<style>
 css在里面写       
</style>

标签选择器
结构：标签名 { css属性名：属性值； }
类选择器
.类名 { css属性名：属性值； }
id选择器
#id属性值 { css属性名：属性值； }
通配符选择器
结构：* { css属性名：属性值； }

class类名与id属性值的区别
1class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
2 id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器以 . 开头；id选择器以 # 开头

字体样式
字体大小
font-size：数字 + px
字体粗细
font-weight：
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
字体样式（是否倾斜）
font-style：normal正常（默认值）；italic倾斜

<body>
    <p>段落文字段落文字段落文字</p>
</body>
<style>
        p {
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
        }
</style>

在这里插入图片描述
字体系列
font-family：字体
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

<style>
p {
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
 </style>

文本样式
文本缩进
text-indent：数字+px；数字+em（1em = 当前标签的font-size的大小）
文本水平对齐方式
text-align：
可使用的text-align的标签
1.文本
2. span标签、a标签
3. input标签、img标签
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
文本修饰
text-decoration：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
行高：控制一行的上下行间距
line-height：数字+px；倍数（当前标签font-size的倍数）

<body>
    <span><p>段落文字段落文字段落文字</p></span>
</body>
<style>
        span {
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            text-indent:1em;
            text-align: justify;
            text-decoration:overline
        }
</style>

在这里插入图片描述

颜色
文字颜色：color
背景颜色：background-color
取值方法：
1关键词：red，green
2.rgb表示法：rgb ( 255 , 0 , 0 ) ：红色；rgb ( 0 , 0 , 0 ) ：黑色；rgb ( 255 , 255 , 255 ) ：白色
3.rgba表示法：rgba ( 0 , 0 , 0 , 0.5 )；最后一位0-1，1为完全不透明，0为完全透明
4.十六进制表示法：#fff ：白色，#000 ：黑色

color: #c8a;

在这里插入图片描述

<编程路上>

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3学习14：html基础知识学习（css）

CSS 指的是层叠样式表(Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中。标签选择器结构：标签名 { css属性名：属性值； }类选择器.类名 { css属性名：属性值； }id选择器#id属性值 { css属性名：属性值； }通配符选择器结构：* { css属性名：属性值； }class类名与id属性值的区别1class类名相当于姓名，可
复制链接

扫一扫