CSS属性图

01文字属性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>文字属性</title>

<style>

p{

font-style: italic;

font-weight: bold;

font-size: 10px;

font-family:"楷体";

}

</style>

</head>

<body>

<!--

02字体属性补充

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>字体属性补充</title>

<style>

p{

/*

被注释掉的内容

*/

/*font-family:"乱七八糟的字体", "微软雅黑";*/

/*font-family: Arial, "微软雅黑";*/

font-family:"Microsoft YaHei";

}

</style>

</head>

<body>

03-文字属性的缩写

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>文字属性的缩写</title>

<style>

p{

/*

font-style: italic;

font-weight: bold;

font-size: 10px;

font-family:"楷体";

*/

font:bold italic 10px "楷体";

}

</style>

</head>

<body>

<!--

04-文本属性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>文本属性</title>

<style>

p{

text-decoration: none;

text-align: left;

text-indent: 2em;

}

a{

text-decoration: none;

}

</style>

</head>

<body>

<!--

05-颜色属性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>颜色属性</title>

<style>

p{

/*color: red;*/

/*color: rgb(255,0,0);*/

/*color: rgba(255,0,0,1);*/

color: #FF0000;

color: #F00;

/*color: rgba(255,0,0,0.2);*/

color: #ffee00;

color: #fe0;

color: #769abb;

}

</style>

</head>

<body>

<!--

关注微信公众号

更多好内容

如果你觉得我的文章对你有帮助,请支持我,你的支持是我最大的动力

CSS的各种重要属性的更多相关文章

  1. css的五种属性值----在路上（21）

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  2. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  3. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  4. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  5. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  6. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  7. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  8. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  9. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  10. css中的列表属性

    list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...

随机推荐

  1. Codeforces Round #631 (Div. 1) B. Dreamoon Likes Sequences 题解（思维+求贡献）

    题目链接 题目大意 让你构造一个严格单调上升的数组a满足\(1<=a_1<a_2<....a_n<=d\) 而且要使得这个数组的异或前缀和也满足严格单调上升,求有多少个满足条件 ...

  2. 10种CSS3实现的loading动画，挑一个走吧？

    这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...

  3. odoo13之右上角弹出提示框

    前言 在odoo中已经提供好了右上角弹出提示框的接口,我们只需要调用即可: 而提示框的实现又分为前端js实现和后段函数实现,前后端实现的效果相同. 实现效果图 前端实现提示框 在前端中显示提示框最常用 ...

  4. celery异步发送短信

    1.使用celery异步发送短信 1.1 在 celery_task/mian.py 中添加发送短信函数 # celery项目中的所有导包地址, 都是以CELERY_BASE_DIR为基准设定. # ...

  5. crash安装使用

     cash作为Linux内核调试的工具是必不可少少的一部分,但是他的下载并不是 yum install一下这么简单的,本文就来讲一下如何安装crash进行调试.  首先就是了解Linux的内核版本.这 ...

  6. 第15.25节 PyQt(Python+Qt)入门学习：Model/View开发实战--使用QTableView展示Excel文件内容

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 在前面的订阅专栏<第十九章.Model/View开发:QTableView的功能及属 ...

  7. 从go-libp2p开始

    这里是从一系列关于libp2p的go实现教程开始,go-libp2p 我们会讲述go的安装,go模块的设置,启动libp2p节点,并在它们之间发送消息. 安装go go-libp2p推荐使用包含 mo ...

  8. LeetCode初级算法之数组：1 两数之和

    两数之和 题目地址:https://leetcode-cn.com/problems/two-sum/ 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个整 ...

  9. js之数组乱序

    这是最近面试遇到的,不过忘记了,之前也有印象刷到过这道题,就再次记录一下加深印象吧,听到最多的答案是利用sort方法,不过也有说这种方法不好,利用了快排和插入排序,那就整理下吧 <!DOCTYP ...

  10. 【CSP-S 2019】树的重心（重心的性质）

    Description 给定一颗 \(n\) 个顶点的树 \(\text T\),共 \(n-1\) 次断边操作,每次将树分为两部分 \(\text T_1, \text T_2\),求: \[\su ...