一、文本属性整理

  1. <style>
  2. h2 {
  3. /* 文字对齐属性 text-align */
  4. /* center:居中,left,right:居左居右,justify:文字拉伸铺满一行 */
  5. text-align: center;
  6. /* 文字大小写属性 text-transform: uppercase:大写,lowercase:小写,capitalize:首字母大写 */
  7. text-transform: capitalize;
  8. font-size: 60px;
  9. /* 文字厚度 font-weight */
  10. font-weight: 400;
  11. /* 文字的行高 line-height */
  12. line-height: 100px;
  13. /* 透明度 */
  14. opacity: 0.5;
  15. }
  16. </style>
  17.  
  18. <h2>Test title</h2>
  19. <!-- 验证文本其他tag属性 em:斜体, u: 下划线, strong:加粗强调,s:删除 -->
  20. <p><s>删除</s> <u>下划线</u> <strong>强调</strong></p>
  21. <p><em>字体倾斜</p>
  22. <!-- hr表示下划线 -->
  23. <hr>

二、颜色属性总结

  1. <style>
  2. /* 使用单词表示颜色 */
  3. .word-color {
  4. color: red;
  5. }
  6.  
  7. /* 使用hex16进制表示颜色 */
  8. .hex-color {
  9. color: #FFFFFF;
  10. }
  11.  
  12. /* 使用rgb表示颜色 */
  13. .rgb-color {
  14. color: rgb(0,0,0);
  15. }
  16.  
  17. /* 使用rgba表示颜色+透明度 */
  18. .rgba-background-color {
  19. background-color: rgb(255,0,0,0.5)
  20. }
  21.  
  22. /* 渐变色 linear-gradient,颜色数量自定义 */
  23. .yellow-white-blue {
  24. background: linear-gradient(30deg, yellow, rgb(255,255,255), #0000ff);
  25. }
  26.  
  27. /* 重复渐变 repeating-linear-gradient*/
  28. .repeat-color{
  29. border-radius: 20px;
  30. width: 70%;
  31. height: 400px;
  32. margin: 50 auto;
  33. background: repeating-linear-gradient(
  34. 90deg,
  35. yellow 0px,
  36. blue 40px,
  37. green 40px,
  38. red 80px
  39. );
  40. }
  41.  
  42. div {
  43. width: 200px;
  44. height: 200px;
  45. }
  46.  
  47. </style>
  48.  
  49. <div class="rgba-background-color">
  50. <p class="rgb-color">颜色测试</p>
  51. </div>
  52. <div class="yellow-white-blue"></div>
  53. <div class="repeat-color"></div>

三、Applied visual design(应用视觉设计)的更多相关文章

  1. Only2 Labs — A Visual Design Studio

    Only2 Labs - A Visual Design Studio 设计合作 对您目前的设计很不满意?或是急缺一个设计供应商?您的团队最近做的项目需要指导?Only2都很乐意为您解困惑. 或者,你 ...

  2. Xamarin+Prism开发详解三:Visual studio 2017 RC初体验

    Visual studio 2017 RC出来一段时间了,最近有时间就想安装试试,随带分享一下安装使用体验. 1,卸载visual studio 2015 虽然可以同时安装visual studio ...

  3. 在【Xamarin+Prism开发详解三:Visual studio 2017 RC初体验】中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很是感兴趣。于是发时间深入研究了一下Visual Studio 2017RC 是不是和微软Connect()://2016上说得一样神。

    总共列出了12点,耐心点慢慢看! 1,添加了不少[代码样式]的设置项目. 通过合理的设置每个人都能写出优美的代码,而且团队项目也可以达到统一代码风格. this首选项:可以设置[字段,属性,方法,事件 ...

  4. 进度更新---Responsive Web Design Certification (300 hours)

    进度更新---Responsive Web Design Certification (300 hours) 已经完成: basic html and html5 basic css applied ...

  5. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  6. 转:15 Best Responsive Web Design Testing Tools

    Responsive Web Design is regarded as being the approach which suggests that web design and developme ...

  7. Design Pattern in Simple Examples

    Instead of defining what is design pattern lets define what we mean by design and what we mean by pa ...

  8. Visual detection of structural changes in time-varying graphs using persistent homology

    PKU blog about this paper Basic knowledge:  1. what is time-varying graphs? time-varying graph VS st ...

  9. 深入研究Visual studio 2017 RC新特性

    在[Xamarin+Prism开发详解三:Visual studio 2017 RC初体验]中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很 ...

  10. Visual Studio Code预览版Ver 0.3.0试用体验

    当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...

随机推荐

  1. hover状态下改变图片颜色的方式 悬停图片切换;css变量;悬停svg图片改变颜色;VUE

    由外部json文件,按照配置方式引入图片路径时,需要一些值得注意的语法来动态引入和改变图片 1.图片路径设置 ,按照img标签动态引入图片 <img src=''/> 路径不引入变量,此时 ...

  2. 10 个常用的 JS 工具库,80% 的项目都在用!

    Day.js 一个极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB. npm install dayjs 基本用法 import ...

  3. 关闭 Microsoft Compatibility Telemetry

    Microsoft Compatibility Telemetry可能会导致操作系统(Win10)启动后一直读盘,打开任务管理器可能会看到 Microsoft Compatibility Teleme ...

  4. darkriscv笔记

    1 按照默认设置,前4K空间为ROM,后4K空间是RAM.为什么RAM需要初值,初值从哪儿来? 2 指令分类 LUI: AUTPC: JAL: JALR: BCC : BEQ/BGE /BGEU/BL ...

  5. Background Suppression Network for Weakly-supervised Temporal Action Localization概述

    0. 前言 相关资料: arxiv github 论文解读1,论文解读2 论文基本信息: 领域:弱监督时序行为定位 发表时间:AAAI 2020(2019.11.22) 1.针对的问题 弱监督视频动作 ...

  6. visual studio 2015 IOS开发连接mac时提示错误couldn't connect to xxxx, please try again的一个方法

    本人使用虚拟机MAC.原本使用虚拟机中的VS2015连接正常没有问题. 但是当把MAC的虚拟机文件COPY到另一个机器上,提示"couldn't connect to xxxx,  plea ...

  7. Java流程控制之while循环详解

    while循环 while循环 do...while循环 for循环 在Java5中引入了一种主要用于数组的增强型for循环 while循环 while循环是最基本的循环,它的结构为 while(布尔 ...

  8. 打开网页自动下载APP

    整体主要使用script控制,目前Android通过,iOS未测试. a标签源码部分 <a id="Download"href="javascript:;" ...

  9. 循环4-for循环

    一.语法 for循环和while类似,常用于执行有限次数的循环,有两种语法结构, 1.变量列表循环 语法: for 变量名 in 变量取值列表 do 指令...... done 变量取值列表中的值,要 ...

  10. python基于百度unit实现语音识别与语音交互

    一.百度Unit新建机器人 网址:https://ai.baidu.com/tech/speech/asr: 1.新建机器人并添加预置技能步骤 (1).新建机器人(添加预置技能),并填写机器人具体信息 ...