首页 > 其他分享 >【CSS】第九讲:文本属性(上)

【CSS】第九讲:文本属性(上)

时间:2024-02-03 21:32:47浏览次数:19  
标签:十六进制 颜色 text RGB 对齐 第九 文本属性 CSS 属性

不积跬步无以至千里@放纵lili

一、颜色属性

(一)、基本语法:

color:颜色英文单词/颜色的十六进制/颜色的RGB

(二)、属性:

1、颜色英文单词。

如:red(红色)、blue(蓝色)

示例:

【CSS】第九讲:文本属性(上)_CSS

2、颜色的十六进制数

使用“#”加一个十六进制数表示颜色值。例如:#ff0000(红色)

【CSS】第九讲:文本属性(上)_文本属性_02

3、颜色的RGB值

RGB代码的颜色值,例如:rgb(255,0,0)----->红色

【CSS】第九讲:文本属性(上)_文本属性_03

二、text-align 水平对齐属性

(一)、基本语法

text-align:left/right/center;

(二)、属性值

1、left 左对齐(默认对齐)

【CSS】第九讲:文本属性(上)_CSS_04

2、right 右对齐

【CSS】第九讲:文本属性(上)_文本属性_05

3、center 居中对齐

【CSS】第九讲:文本属性(上)_文本属性_06

三、text-indent 首行缩进属性

(一)、基本语法

text-align:长度/百分数

(二)、属性值:

1、length

某个具体的值,单位为px/pt/em

2、百分数(%)

相对于父级元素的百分比

我们更常用的是px和em

【CSS】第九讲:文本属性(上)_文本属性_07


标签:十六进制,颜色,text,RGB,对齐,第九,文本属性,CSS,属性
From: https://blog.51cto.com/u_16292324/9570199

相关文章

  • 【CSS】第九讲:文本属性(上)
    不积跬步无以至千里@放纵lili一、颜色属性(一)、基本语法:color:颜色英文单词/颜色的十六进制/颜色的RGB(二)、属性:1、颜色英文单词。如:red(红色)、blue(蓝色)示例:2、颜色的十六进制数使用“#”加一个十六进制数表示颜色值。例如:#ff0000(红色)3、颜色的RGB值RGB代码的颜色值,例如:rgb(255,0,0)-----......
  • CSS给代码添加行号
     pre{width:96%;margin:auto;border-radius:15px15px;border:3pxsolid#000;background-color:#445;padding-left:10px;color:#fff;counter-reset:line;/*初始化计数器*/}......
  • Blazor中使用npm、ts、scss、webpack且自动导入到html
    1、新建一个BlazorApp项目2、新建文件夹WebLib,并在终端中打开执行指令npminit-y在WebLib目录下新建tsconfg.json文件{"compilerOptions":{"noImplicitAny":false,"noEmitOnError":true,"removeComments":false,"sourceMa......
  • css
    波浪<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>波浪</title> </head> <styletype="text/css"> *{ padding:0; margin:0; } .blue{ width:100%; height:......
  • js+css 父div,里面有很多子div,当子div在父div中放不下时候,自动滚动子div,向左横向滚动,
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <style>    #parentDiv{  ......
  • 第九天
    packageObjectDemo;importjava.util.Objects;publicclassApplication{publicstaticvoidmain(String[]args){Demo01demo01=newDemo01(10,"张三");Demo01demo02=newDemo01(20,"李四");Demo01demo04=newDemo01(20,&q......
  • css 相对定位与绝对定位
     这种效果,如果来实现呢?一般会有一些三方的组件,比如Icon图标 van-icon。  也可以手工写下: <divclass="container"><divclass="item_dot"></div></div>容容.container{position:relative;/*容器采用相对定位*/...}右侧角标  .item_d......
  • 代码随想录算法训练营第九天| 28. 实现 strStr() 459.重复的子字符串 字符串总结 双
     28.实现strStr()给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从0开始)。如果 needle 不是 haystack 的一部分,则返回  -1 。题目链接:28.找出字符串中第一个匹配项的下标-力扣(LeetCode)思路:标......
  • 从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
    项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/vue-ts-scaffold目录前言脚手架技术栈简介vue3TypeScriptPiniaTailwindCSSElementPlusvite详细步骤Node.js安装创建以typescript开发的vue3工程集成Pinia安装pinia修改main.ts创建一个store在组件中使用store集......
  • js获取/设置css变量
    -<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><st......