1 css常用的一些属性

color: 文字颜色(前景色)

font-size: 文字大小

font-family: 字体,比如:微软雅黑, 黑体,宋体,仿宋体,”Times New Roman”

font-style: 就是设置字形是”正体”还是“斜体”(italic)

font-weight: 设置是否粗体

background: 背景色

border: 设置边框

text-decoration: 设置“装饰线”(下划线,中划线,上划线)

text-align: 对齐

width: 宽

height: 高

margin:边距

padding:内边距

line-height:线距

2颜色有如下表示法

​ 2.1常规的英文单词: red, blue, green, yellow, pink, purple

​ 2.2RGB表示法

​ 将一个颜色,使用红(R,red), 绿(G,green), 蓝(B,blue)来表示。

​ 这3个叫做“基本颜色”,都按0-255分为256个层级。

​ 所有颜色,都可以使用这3个颜色的不同层级(配比)来调配而成。

​ 形式:rgb(红的配比, 绿的配比,蓝的配比);

​ 举例:

​ color: rgb(255, 0, 0) //这是红色

​ color: rgb(0,255, 0); //这是绿色

​ color:rgb(0, 0, 255); //蓝色

​ color:rgb(255, 255, 0); //黄色

​ 2.3 RGBA表示法

​ A代表“透明度”,值从0到1的小数。0表示全透明。1表示不透明,此时就是RGB颜色

​ 形式:rgba(红的配比, 绿的配比,蓝的配比,透明度);

​ color: rgba(100, 30, 70, 0.5),

​ color: rgba(255, 0, 0, 0.66) //这是红色

2.4进制表示法

​ 形式:#6个16进制数字!

​ 前两个数字表示“红的配比”,中间两数字表示绿的配比,后两个数字表示蓝的配比

Color:#ffffff; #fafafa;

3字体属性

字体属性是用来设定“文字字形”的外观表现,主要包括:

color:颜色

font-family:字体名称

font-size:大小

font-style:是否斜体

font综合属性的语法:font:[ <' [font-style] '> || <' [font-weight] '> ]? <' [font-size] '> [ / <' [line-height] '> ]? <' [font-family] '> ];

4文本属性

文本属性通常指的是作为文字内容的整体性特性(而不是具体文字的表现特性)。

属性名称

含义

举例

其他说明

text-align

一段文字的对齐方式

text-align: center;

可用值:left, center, right

text-decoration

一段文字的”修饰线”

text-decoration:underline

可用值:underline(下划线),overline(上划线),line-through(中划线)

text-indent

设置一段文本的“首行缩进”的宽度(距离)

text-indent: 24px;

px是长度单位,表示“像素”

line-height

设定文字的“行高”

line-height: 30px; line-height: 2em;

em是长度单位,表示“字高”

letter-spacing

设定文字的“字符间距”

letter-spacing: 3px;

注意:中文的每个字都算一个字符

word-spacing

设定文字的“单词间距”

word-spacing: 15px;

注意:单词通常是以“空格”隔开的。因此,连续的中文即使很长也只能算一个单词。

Text-justify  文本的自动对齐

<p>You can use the mark tag to <mark>highlight高亮</mark> text.</p>

<p><del>This line of text is meant to be treated as deleted text.</del></p>

<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

<p><ins>This line of text is meant to be treated as an addition to the
document.</ins></p>

<p><u>This line of text will render as underlined 下划线</u></p>

<p><small>This line of text is meant to be treated as fine print.小字体</small></p>

<p><strong>This line rendered as bold text.</strong></p>

<p><em>This line rendered as italicized text.斜体</em></p>

CSS总结(一)的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. Nginx(五)、http反向代理的实现

    上一篇nginx的文章中,我们理解了整个http正向代理的运行流程原理,主要就是事件机制接入,header解析,body解析,然后遍历各种checker,以及详细讲解了其正向代理的具体实现过程.这已经 ...

  2. .NET Standard SDK 样式项目中的目标框架

    系列目录     [已更新最新开发文章,点击查看详细] 包表示形式 .NET Standard 引用程序集的主要分发载体是 NuGet 包. 实现会以适用于每个 .NET 实现的各种方式提供. NuG ...

  3. ansible-playbook-roles基本使用

    1. ansible-角色-roles基本使用  1.1) 创建roles目录结构 1 [root@test-1 ansible]# mkdir -p /ansible/roles/{common,n ...

  4. Java死锁编码及定位分析的demo

    死锁 死锁是什么 大学课程中的四个要素: (1)互斥(2)不可抢占(3)循环等待(4)请求保持 也就是下图所描述 产生死锁的主要原因 (1)系统资源不足(2)进程运行推进的顺序不合适(3)资源分配不当 ...

  5. java怎么产生随机数

    随机数的产生在一些代码中很常用,也是我们必须要掌握的.而java中产生随机数的方法主要有三种: 第一种:new Random() 需要借助java.util.Random类来产生一个随机数发生器,也是 ...

  6. phpstorm 注解路由插件

    idea-php-annotation-plugin 设置 插件 搜索 安装 重启

  7. C# 面试前的准备_基础知识点的回顾_03

    1.HTTP中Post和Get区别 这忒简单了吧,大家是不是感觉到兴奋了,长舒一口气了,终于出现了一个可以聊上10分钟的问题了. 根据HTTP规范,Get用于信息获取,而且应该是安全的和幂等的. 参数 ...

  8. 如何在construct3上开发游戏&游戏展示

    前言 为了更快体验做出游戏的快乐,我们可以直接采用construct3 提供的游戏模板.这里我用的是基础模板中的塔防游戏.我们在这个的基础上加进来"植物大战僵尸"的一些元素,包括内 ...

  9. Dijkstra算法 python实现

    1.Dijkstra算法的基本实现 \(O(n^2)\) 简介: Dijkstra算法是从一个顶点到其余各顶点的最短路径算法,解决的是有权图中最短路径问题.迪杰斯特拉算法主要特点是从起始点开始,采用贪 ...

  10. 浏览器缓存引起的bug总结

    缓存原理 浏览器缓存分为强缓存和协商缓存 先检查是否过期,没有过期直接使用本地缓存.如果过期,查看是否使用协商缓存 协商缓存流程: 后端返回headers: ETag: W/"1e3-175 ...