CSS Text

1> Text Color

  • used to set the color of the text

2> Text Alignment

  • used to set the horizontal alignment of a text
text-align: left|right|center|justify|initial|inherit;

3> Text Decoration

  • used to set or remove decorations from text
text-decoration: none|underline|overline|line-through|initial|inherit;

4> Text Transformation

  • used to specify uppercase and lowercase letters in a text
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

5> Text Indentation

  • The text-indent property specifies the indentation of the first line in a text-block
text-indent: length|initial|inherit;

6> Letter Spacing

  • used to specify the space between the characters in a text
letter-spacing: normal|length|initial|inherit;

7> Word Spacing

  • used to specify the space between the words in a text
word-spacing: normal|length|initial|inherit;

8> Line Height

  • used to specify the space between lines
line-height: normal|number|length|initial|inherit;

  Note: number: A number that will be multiplied with the current font size to set the line height

9> Text Direction

  • used to change the text direction of an element
direction: ltr|rtl|initial|inherit;

CSS Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

1> Font Family

font-family: font|initial|inherit;

Two types of font family names:

  • family-name - The name of a font-family, like "times", "courier", "arial", etc.
  • generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Note:

  1. Start with the font you want, and always end with a generic family
  2. Separate each value with a comma.
  3. If a font name contains white-space, it must be quoted.

Example

 p {
font-family: "Times New Roman", Times, serif;
}

2> Font Style

  • mostly used to specify italic text
font-style: normal|italic|oblique|initial|inherit;

3> Font Size

  • used to set the size of the text
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

4> Font Weight

  • used to specify the weight of a font
font-weight: normal|bold|bolder|lighter|number|initial|inherit;

5> Font Variant

  • used to specify whether or not a text should be displayed in a small-caps font.
font-variant: normal|small-caps|initial|inherit;

CSS Links

1> Styling Links

Four links states

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

Some order rules:

  1. a:hover MUST come after a:link and a:visited
  2. a:active MUST come after a:hover

2> Text Decoration

text-decoration: none|underline|overline|line-through|initial|inherit;

CSS Lists

  • unordered lists (<ul>) - the list items are marked with bullets
  • ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items

1> CSS list-style Property

  • The list-style property is a shorthand property.
list-style: list-style-type list-style-position list-style-image|initial|inherit;

The order of the property values

  • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
  • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
  • list-style-image (specifies an image as the list item marker)

Example

 ul {
list-style: square inside url("sqpurple.gif");
}

2> CSS list-style-type Property

list-style-type: value;

Common Property Values

 disc                 Default value. The marker is a filled circle
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers (一,二,三)
decimal The marker is a number (1,2,3)
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)
hiragana The marker is traditional Hiragana numbering (あ、い、う)
katakana The marker is traditional Katakana numbering (ア、イ、ウ)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

All Property Values

3> CSS list-style-position Property

  • The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.
list-style-position: inside|outside|initial|inherit;

Outside(Default value):

  • Coffee
  • Tea
  • Coca-cola

Inside:

  • Coffee
  • Tea
  • Coca-cola

4> CSS list-style-image Property

  • The list-style-image property replaces the list-item marker with an image.
list-style-image: none|url|initial|inherit;

  Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

Example

 ul {
list-style-image: url('sqpurple.gif');
}

CSS 笔记二(Text/Fonts/Links/Lists)的更多相关文章

  1. amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  2. Webpack4 学习笔记二 CSS模块转换

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...

  3. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  4. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  5. amazeui学习笔记二(进阶开发1)--项目结构structure

    amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...

  6. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  7. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  8. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  9. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

随机推荐

  1. [CareerCup] 17.9 Word Frequency in a Book 书中单词频率

    17.9 Design a method to find the frequency of occurrences of any given word in a book. 这道题让我们找书中单词出现 ...

  2. iPhone6的CSS3媒体查询

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...

  3. FTP目录或文件名有中文时导致,下载失败的问题

    在FTPClient ftpClient = new FTPClient()代码后, ftpClient.connect(url,port)代码前, 调用ftpClient.setAutodetect ...

  4. C# - 时间格式

    如果是字符串,需要先转化为DateTime格式 DateTime ExDate = DateTime.Parse(dt.Rows[]["HKMonth"].ToNotNullStr ...

  5. DOM模型有三种

    <!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...

  6. mango-1.4.1 文档

    文档目录 快速开始 添加依赖包 数据库准备 创建HelloWorld类 书写插入与查询方法 构造数据源并初始化mango对象 获取dao并调用插入与查询方法 查看完整示例代码和表结构 基本操作 准备工 ...

  7. php使用strlen()判断中文汉字字符串长度

    php使用strlen()判断中文汉字字符串长度 对于含有中文情况,此时可以采用: iconv_strlen($str,"UTF-8"); iconv_strlen 是无论是何种编 ...

  8. UIBezierPath类 笔记

    使用UIBezierPath类可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状.     ...

  9. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  10. Count Complete Tree Nodes || LeetCode

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * struct TreeNode *left; * s ...