一、颜色的表示方式

1、 rgba(255,0,0,0.1)

 rgba是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha透明度。虽然它有的时候被描述为一个颜色空间

新增了RGBA、HSLA模式,其中的表示透明度通道,即可以设置颜色值的透明度,相较opacity,它们不具有继承性,即不会影响子元素的透明度

Red、Green、Blue、AlphaRGBA

2、Hue、Saturation、Lightness、AlphaHSLA

R、G、B 取值范围0~255

H 色调 取值范围:0~3600/360表示红色120表示绿色240表示蓝色

S 饱和度 取值范围:0%~100%

L 亮度 取值范围:0%~100%

A 透明度 取值范围:0~1

3、关于透明度:

1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;

2 、transparent 不可调节透明度,始终完全透明

RGBA、HSLA可应用于所有使用颜色的地方。

3、使用rgba 来控制颜色,相对opacity ,不具有继承性

二、文本

1、文本 (shadow阴影)

text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。

  • 水平偏移量 正值向右 负值向左;
  • 垂直偏移量 正值向下 负值向上;
  • 模糊度是不能为负值;

2、案例

html代码

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="p1">text-align文本水平对齐方式</p>
<p>This is a test sentence. 汉字 之间 无 空格 会 当作 一个 单词。 </p>
<p id="p3">abcdqwert yuiopasdfg hjklzxcvbn mnqwertyuioqwe rtyuiasdf ghjzxcvb qwetyuasdfg hzxcv bnasdfgh qwerty uwertyusdfghxcvb qwertyusdfghxcvbnoqwertyuioasdfghjklzxcvbnm</p>
<p id="p4">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>
<p id="p5">abcdqwert yuiopa sdfghjklzx cvbnmnqwe rtyuioqwerty uiasdfghjzxcvb qwetyuas dfghzxcvbnasdfg hqwertyuwe rtyusd fghxcvbqwertyusdfghxcvbnoqwerty uioasdfghjklzxcvbnm</p>
<h1>h1标签内容</h1>
</body>
</body>
</html>

css代码

 /*#p1{*/
/*text-align: justify;*//*默认left,可设right、center、justify、start、end*/
/*line-height: 3;*//*设置行高:normal、数字、百分比、px、em*/
/*text-indent: 20px;*//*设置首行缩进:像素、百分比、em*/
/*text-decoration:line-through overline underline;*//*默认值none在超链接去掉默认下划线时可用到,下划线underline,上划线overline,删除线line-through,闪烁文本blink*/
/*letter-spacing: 2em;*//*设置字符间距,默认normal,可用像素、em,可设负值*/
/*}*/
p{
/*word-spacing: 2em;*//*类似letter-spacing,可设负值*/
/*text-transform: lowercase;*//*none默认;capitalize每个单词以大写字母开头,uppercase转换为大写字母,lowercase转换为小写字母*/
/*text-shadow: 3px 3px 3px red, -6px -6px 3px green;*//*四个参数:横向偏移、纵向偏移、模糊度、颜色,可加多个阴影用逗号隔开*/
/*white-space: pre;*//*设置元素中空白处理方式:默认normal;pre空白会保留,类似pre标签;nowrap文本不会换行,文本会在同一行上继续,直到遇到br标签为止;pre-wrap保留空白正常换行;pre-line合并空白正常换行*/
13 /*direction: rtl;*//*默认ltr*/
/*unicode-bidi: bidi-override;*//*从右向左读文字,一般配合direction使用,默认normal,可设embed*/
}
#p3{
background: green;
width: 200px;
word-wrap: break-word;
}
#p4{
background: blue;
width: 200px;
word-wrap: ;
}
#p5{
background: red;
width: 200px;
word-break: break-all;/*比work-wrapbreak-word拆的更彻底。keep-all只能在半角空格或连字符处换行*/
}
h1{
-webkit-text-stroke:1px red;/*多数浏览器不支持此功能,所以要加浏览器私有前缀-webkit-*/
-webkit-text-fill-color:blue;
}
/*text-overflow 设置是否使用一个省略标记...标示对象内文本溢出:clip默认值,当对象内文本溢出时不显示省略标记,而是将溢出部分裁掉;ellipsis当对象内文本溢出时显示省略号。此属性要和over-flow:hidden属性,white-space:nowrap配合使用。*/
/*
text-outline 规定文本的轮廓;
text-justify 规定当text-align设置为justify时所使用的对齐方式;
text-align-last 设置如何对齐最后一行或紧挨强制换行符之前的行;
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色;
hanging-punctuation 规定标点字符是否位于线框之外;
punctuation-trim 规定是否对标点字符进行修剪;
tab-size 设定一个tab在页面中的显示长度;
text-wrap 规定文本的换行规则。
*/

第92天:CSS3中颜色和文本属性的更多相关文章

  1. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  2. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  3. css3中自定义 placeholder 文本颜色

    对于 ie 浏览器我们可以通过自定义的 class 名称,直接修改 span 这个标签的样式.对于其他浏览器诸如谷歌和火狐就需要特殊处理了,不多说直接上代码: ::-webkit-input-plac ...

  4. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  5. css3中的zoom元素属性值测试

    在样式表里头看到zoom:1的设置,很是好奇就去找了一些资料发现关于这个的讲述还是比较少. 理论知识 语法: zoom:normal | <number> | <percentage ...

  6. CSS3中盒子的box-sizing属性

    box-sizing 属性 box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式.这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现. box-sizing:conte ...

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

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

  8. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

  9. html5--6-19 CSS3中的文字与字体

    html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...

随机推荐

  1. 20155220 实验三 敏捷开发与XP实践 实验报告

    20155220 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  2. 20155227 2016-2017-2《Java程序设计》课程总结

    20155227 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:我眼中的师生关系. 预备作业2:一些简单的C语言知识回顾,并总结之前一些成功的 ...

  3. 20155334 实验三 敏捷开发与XP实践

    实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 完成实验.撰写实验报告,实验报告以 ...

  4. Oracle下如何用rman备份到特定的sequence

    本文为摘抄,目的为方便日后阅读: http://docs.oracle.com/cd/B12037_01/server.101/b10734/rcmbackp.htm To determine the ...

  5. day1 Opencv安装 python 2.7 (32位)

    [参考安装步骤] http://opencv-python-tutroals.readthedocs.io/en/latest/index.html http://blog.csdn.net/huru ...

  6. 使用Python的BeautifulSoup 类库采集网页内容

    BeautifulSoup 一个分析.处理DOM树的类库.可以做网络爬虫.模块简称bs4. 安装类库 easy_install beautifulsoup4 pip install beautiful ...

  7. php-laravel安装与使用

    1.框架作用    提供了一些主体功能,方便开发者快速开发 2.PHP框架    laravel    ThinkPHP 3.首先要安装composer软件    1.作用        主要管理PH ...

  8. Android Studio 3.1.2 Device File Explorer nothing to show

    Android Studio 3.1.2 Device File Explorer nothing to  show 不显示 目录  ,空白 手持终端设备: Android  4.2.2  ,API1 ...

  9. ubuntu apt-xxx

    1. apt-get install xxx 2. dpkg -l ; list software already installed. 3. apt-cache dumpavail ; print ...

  10. 第一篇 数据库MySql

    数据库的简介 数据库:存储数据的仓库 数据库管理系统软件 常见的数据库管理软件:甲骨文的oracle,IBM的db2,sql server, Access,Mysql(开源,免费,跨平台). 关系型数 ...