目录

CSS参考手册:http://css.doyoe.com/

1、字体简写:font:font-style || font-variant || font-weight || font-size || /line-height || font-family

2、字体分样式

字体倾斜:font-style:"normal | italic | oblique";

小型大写字母:font-variant:"normal | small-caps | inherit";

字体粗细:font-weight:"normal | bold | bolder | lighter | [100-900]";

字体大小:font-size:"length | percentage";

文本行高:line-height:"normal | number | length | % | inherit"

字体名称:font-family:"font-name";

引入自定义字体:@font-face:font-family:"";src:url("URL.ttf") format("truetype");

字体颜色:color:"inherit | color_name | hex_number | rgb_number | transparent";

3、文本样式

文本缩进:text-indent:"length";

文本水平对齐方式:text-align:"left | right | center | justify | inherit";

文本垂直对齐方式:vertical-align:"baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % | inherit ";

文本装饰线:text-decoration:"none | underline | blink | overline | line-through";

文本阴影:test-shadow:"h-shadow v-shadow blur color";

文本转大小写:text-transform:"none | capitalize | uppercase | lowercase | inherit";

文本间空格换行:white-space:"normal | pre | nowrap | pre-warp | pre-line | inherit";

文本溢出:overflow-warp:"normal | break-word";

文本溢出显示:text-overflow:"clip | eliellipsis | string";

文本单词间距:word-spacing:"normal | length | inherit";

文本字符间距:letter-spacing:"normal | length | inherit";

文字颜色填充:-webkit-text-fill-color:"transparent";

文字描边:-webkit-text-stroke:"width | color";

4、背景图简写:background:"color | image | position | /size | repeat | attachment | clip | origin";

5、背景图分样式

背景色:background-color:"transparent | color_name | hex_number | rgb_number | inherit";

背景图:background-image:"url(URL)";

背景图定位:background-position:position_value | x% y% | xpos ypos;

背景图大小:background-size:length | % | cover | contain;

是否重复:background-repeat:"repeat | repeat-x | repeat-y | no-repeat | inherit ";

是否固定:background-attachment:scroll | fixed | inherit ;

背景的绘制区域:background-clip:padding-box | border-box | content-box;

background-position 属性相对于什么位置来定位:background-orign:padding-box | border-box | content-box;

内容

1、字体简写

 p{
font-style:italic;
font-weight:bold;
font-size:14px;
line-height:22px;
font-family:宋体;
}
简化:
p{
font:italic bold 14px/22px 宋体
}

2、字体分样式

2.1字体倾斜:font-style:"normal | italic | oblique";(正常 | 斜体 | 倾斜的文字)

italic与oblique的区别:字体有粗体、斜体、下划线、删除线等诸多属性,有些字体本身具有斜体,可以使用italic,有些字体本身没有斜体,需要使用oblique。

CSS部分:

 .normal{
font-style: normal;
}
.italic{
font-style: italic;
}
.oblique{
font-style: oblique;
}

HTML部分:

<p class="normal">正常文字</p>
<p class="italic">斜体文字</p>
<p class="oblique">倾斜文字</p>

展示效果:

2.2 小型大写字母:font-variant:"normal | small-caps | inherit";(正常 | 小型大写 | 继承父级)

CSS部分:

 .normal{
font-variant: normal;
}
.small{
font-variant: small-caps;
}

HTML部分:

 <p class="normal">Ahjdk</p>
<p class="small">Ahjdk</p>

展示效果:

2.3字体粗细:font-weight:"normal | bold | bolder | lighter | [100-900]";(正常 | 粗 | 更粗 | 更细 | 100-900)

CSS部分:

 .normal{font-weight: normal;}
.bld{font-weight: bold;}
.bolder{font-weight: bolder;}
.lighter{font-weight: lighter;}
.fw100{font-weight:;}
.fw200{font-weight:;}
.fw300{font-weight:;}
.fw400{font-weight:;}
.fw500{font-weight:;}
.fw600{font-weight:;}
.fw700{font-weight:;}
.fw800{font-weight:;}
.fw900{font-weight:;}

HTML部分:

    <p class="normal">I'm文字啊</p>
<p class="bold">I'm文字啊</p>
<p class="bolder">I'm文字啊</p>
<p class="lighter">I'm文字啊</p>
<p class="fw100">I'm文字啊</p>
<p class="fw200">I'm文字啊</p>
<p class="fw300">I'm文字啊</p>
<p class="fw400">I'm文字啊</p>
<p class="fw500">I'm文字啊</p>
<p class="fw600">I'm文字啊</p>
<p class="fw700">I'm文字啊</p>
<p class="fw800">I'm文字啊</p>
<p class="fw900">I'm文字啊</p>

展示效果:

2.4字体大小:font-size:"length | percentage";(长度 | %)

2.5文本行高:line-height:"normal | number | length | % | inherit"(正常 | 数值 | 长度 | % | 继承父级)

2.6字体名称:font-family:"font-name";(字体名)

2.7引入自定义字体:@font-face:font-family:"myfont";src:url("URL.ttf") format("truetype");

@font-face {
font-family : “自定义字体名称”;
src : url(“字体文件在服务器上的相对或绝对路径”) format(“字体类型”);
}
例如:
@font-face {/*该写法是兼容所有的浏览器*/
font-family : bgg;
src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */
url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/fontawesome-webfont.woff') format('woff'), /* chrome、firefox */
url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/
url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */
}

2.8字体颜色:color:"inherit | color_name | hex_number | rgb_number | transparent";(继承 | 颜色名称 | 十六进制 | RGB | 透明)

CSS部分:

 .color{color: red;}
.hex{color: #ff2200}
.rgb{color: rgb(255,34,0)}

HTML部分:

 <p class="color">都是红色</p>
<p class="hex">都是红色</p>
<p class="rgb">都是红色</p>

展示效果:

3、文本样式

3.1文本缩进:text-indent:"length";(块元素使用)

3.2文本水平对齐方式:text-align:"left | right | center | justify | inherit";(居左 | 居右 | 居中 | 两端对齐 | 继承父级)(块元素使用)

3.3文本垂直对齐方式:vertical-align:"baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % | inherit ";(基线 | 下标 | 上标 | 顶部 | 文本顶部 | 中间 | 底部 | 文本底部 | 长度 | % | 继承父级)(行内元素使用)

3.4文本装饰线:text-decoration:"none | underline |  overline | line-through";(没有 |下划线 | 上划线 | 贯穿线 )

CSS部分:

 h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}

HTML部分:

 <h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>

效果展示:

3.5文本阴影:test-shadow:"h-shadow v-shadow blur color";(水平阴影,可负值 | 垂直阴影,可负值 | 模糊的距离 | 阴影的颜色 )

参考文献:https://www.cnblogs.com/gaoxue/articles/2287314.html?tdsourcetag=s_pcqq_aiomsg

https://www.jb51.net/css/497917.html?tdsourcetag=s_pcqq_aiomsg

3.6文本转大小写:text-transform:"none | capitalize | uppercase | lowercase | inherit";(正常 | 首字母大写 | 仅有大写 | 仅有小写 | 继承父级)

3.7文本间空格换行:white-space:"normal | pre | nowrap | pre-warp | pre-line | inherit";(忽略空白 | 类<pre>标签|不换行,直到遇到 <br> 标签为止|保留空白符序列,但是正常地进行换行 | 合并空白符序列,但是保留换行符|父级继承)

3.8文本溢出:overflow-warp:"normal | break-word";(允许内容顶开或溢出指定的容器边界 | 内容在边界内换行。如果需要,单词内部允许断行)

3.9文本溢出显示:text-overflow:"clip | eliellipsis | string";(裁剪 | 省略号 | 字符串)

overflow: hidden;    /*条件1:超出部分隐藏*/
white-space: nowrap;/*条件2:强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示...*/

3.0文本单词间距:word-spacing:"normal | length | inherit";(没有额外的空间|固定空间,允许负值 | 继承父级)

3.11文本字符间距:letter-spacing:"normal | length | inherit"; (没有额外的空间|固定空间,允许负值 | 继承父级)

3.12文字颜色填充:-webkit-text-fill-color:"transparent";

-webkit-text-fill-color会覆盖color定义的字体颜色,目前仅wekit内核浏览器支持,可用于制作镂空字体与渐变字体;

 -webkit-text-fill-color:transparent;(亦可使用color,必须将文本颜色设为透明,不然不能覆盖)
-webkit-text-stroke:1px #000;

 background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;(亦可使用color,必须将文本颜色设为透明,不然不能覆盖)
/*使其更加柔和*/
-webkit-text-stroke:1px transparent;

3.13文字描边:-webkit-text-stroke:"width | color";

CSS部分:

 .p2 {
-webkit-text-stroke: 2px red;
}
.p3 {
position: relative;
z-index:;
}
.p3::before {
content: attr(data-text);
position: absolute;
-webkit-text-stroke: 2px red;
z-index: -1;
}

HTML部分:

<p class="p2">有描边</p>
<p class="p3">重叠描边</p>

展示效果:

参考文献:https://www.zhangxinxu.com/study/201705/text-stroke-position.html

4、背景图简写

background:"color | image | position | /size | repeat | attachment | clip | origin";

background:
url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
url(test2.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
url(test3.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
拆分为:
background-image: url(test1.jpg), url(test2.jpg), url(test3.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-attachment: scroll, scroll, scroll;
background-position: 10px 20px, 10px 20px, 10px 20px;
background-size: 50px 60px, 70px 90px, 110px 130px;
background-origin: content-box, content-box, content-box;
background-clip: padding-box, padding-box, padding-box;
background-color: #aaa;           

5、背景图分样式

5.1背景色:background-color:"transparent | color_name | hex_number | rgb_number | inherit";(透明 | 颜色名称 | 十六进制 | RGB | 继承)

5.2背景图:background-image:"url()";

5.3背景图定位:background-position:"position_value | x% y% | xpos ypos";(方位值 | % | 水平值,垂直值)

默认值:0% 0%;仅规定了一个关键词,那么第二个值将是"center | 50%";可混合使用 % 和 position 值

5.4背景图大小:background-size:"length | % | cover | contain";(长度 | % | 完全覆盖 | 扩展至其宽度和高度的任意一边完全适应内容区域)

5.4.1仅规定了一个关键词,那么第二个值将是"auto";

5.4.2100% 100%与cover与contain区别

100% 100%:图片完全覆盖,不留空白,不被隐藏

cover:等比例铺满,可能有被隐藏部分

contain:等比例缩放,可能有部分留白

5.5是否重复:background-repeat:"repeat | repeat-x | repeat-y | no-repeat | inherit ";(垂直水平重复 | 水平重复 | 垂直重复 | 不重复 |继承父级)

5.6是否固定:background-attachment:"scroll | fixed | inherit ";(随着页面其余部分的滚动而移动 | 当页面的其余部分滚动时,背景图像不会移动 | 继承父级)

5.7背景的绘制区域:background-clip:"padding-box | border-box | content-box";(内边距 | 边框盒 | 内容框)

5.8background-position 属性相对于什么位置来定位:background-orign:"padding-box | border-box | content-box";(内边距 | 边框盒 | 内容框)

必须保证背景是background-repeat:"no-repeat" 才会生效;

5.9背景渐变:gradient:"linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient"(线性渐变 | 径向渐变 | 重复线性渐变 | 重复径向渐变)

5.9.1线性渐变:background: linear-gradient(directioncolor-stop1color-stop2, ...);background: linear-gradient(anglecolor-stop1color-stop2);

5.9.2径向渐变:background: radial-gradient(center, shape size, start-color, ..., last-color);

参考文献:https://www.w3cplus.com/content/css3-gradient

20190328-CSS样式一:字体样式font-、文本样式text-、背景图样式background-的更多相关文章

  1. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  2. js随笔,css和js禁止网页选择文本,table的class样式使得td的class样式失效,jquery获得元素坐标

    css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...

  3. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

  4. python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  5. CSS中的字体属性和文本属性

    1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...

  6. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  7. CSS3全览_文本+视觉+盒子+背景颜色

    CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...

  8. HTML 学习笔记 CSS样式(字体)

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  9. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

随机推荐

  1. javascript的数组之reverse()

    reverse()方法将数组中所有元素的位置颠倒,修改原数组,并返回一个原数组的引用. var array1 = ['one', 'two', 'three']; var reversed = arr ...

  2. 将本地jar包打包到本地仓库和上传到私服

    1.本地jar打包到本地仓库 mvn install:install-file -Dfile=jar包完整地址或相对地址 -DgroupId=自定义的groupID -DartifactId=自定义的 ...

  3. harbor在谷歌云上搭建 日志

    参考:https://github.com/vmware/harbor/blob/master/docs/installation_guide.md 日志: [root@instance-1 harb ...

  4. 吴恩达机器学习笔记52-异常检测的问题动机与高斯分布(Problem Motivation of Anomaly Detection& Gaussian Distribution)

    一.问题动机 异常检测(Anomaly detection)问题是机器学习算法的一个常见应用.这种算法的一个有趣之处在于:它虽然主要用于非监督学习问题,但从某些角度看,它又类似于一些监督学习问题. 给 ...

  5. Java运行原理及内存分析

    Java运行原理及内存分析 一.Java运行原理 二.Java内存分析

  6. TensorFlow tf.gradients的用法详细解析以及具体例子

    tf.gradients 官方定义: tf.gradients( ys, xs, grad_ys=None, name='gradients', stop_gradients=None, ) Cons ...

  7. ThinkPHP 数据库操作(三) : 查询方法、查询语法、链式操作

    查询方法 条件查询方法 where 方法 可以使用 where 方法进行 AND 条件查询: Db::table('think_user') ->where('name','like','%th ...

  8. java面向对象三大特性:封装、继承、多态

    一.封装 封装也称信息隐藏,是指利用抽象数据类型把数据和基于数据的操作封装起来,使其成为一个不可分割的整体,数据隐藏在抽象数据内部,尽可能的隐藏数据细节,只保留一些接口使其与外界发生联系.也就是说用户 ...

  9. python的StringIO

    有时候需要将 information 保存在本地,可以这样写: file = open("filename","w") file.close() file.cl ...

  10. Guava 源码分析(Cache 原理 对象引用、事件回调)

    前言 在上文「Guava 源码分析(Cache 原理)」中分析了 Guava Cache 的相关原理. 文末提到了回收机制.移除时间通知等内容,许多朋友也挺感兴趣,这次就这两个内容再来分析分析. 在开 ...