CSS 笔记二(Text/Fonts/Links/Lists)
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:
- Start with the font you want, and always end with a generic family
- Separate each value with a comma.
- 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 linka:visited
- a link the user has visiteda:hover
- a link when the user mouses over ita:active
- a link the moment it is clicked
Some order rules:
- a:hover MUST come after a:link and a:visited
- 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
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)的更多相关文章
- amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- webpack笔记二 管理资源
webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发1)--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
随机推荐
- [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. 这道题让我们找书中单词出现 ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- FTP目录或文件名有中文时导致,下载失败的问题
在FTPClient ftpClient = new FTPClient()代码后, ftpClient.connect(url,port)代码前, 调用ftpClient.setAutodetect ...
- C# - 时间格式
如果是字符串,需要先转化为DateTime格式 DateTime ExDate = DateTime.Parse(dt.Rows[]["HKMonth"].ToNotNullStr ...
- DOM模型有三种
<!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...
- mango-1.4.1 文档
文档目录 快速开始 添加依赖包 数据库准备 创建HelloWorld类 书写插入与查询方法 构造数据源并初始化mango对象 获取dao并调用插入与查询方法 查看完整示例代码和表结构 基本操作 准备工 ...
- php使用strlen()判断中文汉字字符串长度
php使用strlen()判断中文汉字字符串长度 对于含有中文情况,此时可以采用: iconv_strlen($str,"UTF-8"); iconv_strlen 是无论是何种编 ...
- UIBezierPath类 笔记
使用UIBezierPath类可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状. ...
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- Count Complete Tree Nodes || LeetCode
/** * Definition for a binary tree node. * struct TreeNode { * int val; * struct TreeNode *left; * s ...