【学习笔记】CSS基础

【学习过程遇到疑问和延伸阅读】

1.文本与字符的概念比较模糊，会导致应用CSS属性（letter-spacing,text-indent,word-spacing）时混乱

文本（Text），是书面语言的表现形式；计算机的一种文档类型。从文学的角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。

字符（character），是指计算机中使用的字母、数字、字和符号，包括：1、2、3、A、B、C、~！·#￥%……—*（）——+等等。

2.关于行高与行距，字体大小的关系

行高=字体大小+行距

http://www.cnblogs.com/dolphinX/p/3236686.html

3.CSS与切图

CSS的样式，关于属性值是需要结合切图测量时的值，以及了解各种属性的特点，最后达到灵活运用，最终达到设计图的效果。

【新概念，重要概念】

关于段落格式的概念

首行缩进：将段落的第一行从左向右缩进一定的距离，首行外的各行都保持不变，便于阅读和区分文章整体结构。

悬挂缩进：一种段落格式，在这种段落格式中，段落的首行文本不加改变，而除首行以外的文本缩进一定的距离。悬挂缩进常用于项目符号和编号列表。

【实操知识点脉络】

1.什么是CSS
HTML表达结构，这是什么
CSS表达样式，长成什么样
样式和内容/结构是分离的
注意：如果没有CSS，如何显示；那么浏览器会采用默认样式显示

2.HTML和CSS的关系
内容长成什么样，不应该由HTML和浏览器决定。
用Word类比理解。HTML为文件中的文字，CSS为格式设置。
注意：目前发展到HTML5，HTML的标记用来表达是什么的。
HTML的标记有逻辑意义的。（语义化）

3.CSS的作用
了解CSS的意义
把一个含有CSS的网页，删掉CSS代码，就只剩下HTML文本。

4.HTML中的CSS
如何加入CSS
（1）引入CSS的外部文件
（2）头部加入style标记
（3）单个标记里面，加入style属性
CSS的语法：基本的一对东西
名字：值；

5.接下来学习各种各样的样式，让页面丰富起来，
怎么用CSS做样式呢？
背景样式
（1）背景：纯色，图片作为背景
background-color:gray
background-image:url(图片位置路径)
-关于颜色
浏览器默认背景颜色是transparent
RGB颜色：#RRGGBB（十六进制），rgb(255,255,0)，rgba(255,255,0,0.5)
（2）图片背景
当用一张比原背景小的图片作为背景时，
background-repeat:no repeat/repeat-x/repeat-y/repeat
background-position:center/top/right/top right/100px 100px
background-attachment:scroll/fixed
合并写法可以简化CSS代码：
background： 复合属性，按照以下顺序
（背景颜色，背景图像，背景重复，背景附件，背景位置）各值之间用空格相连。

6.段落样式
（1）段落缩进
text-indent:2em
长度单位的属性值
-相对值
em:当前字体的倍数
%百分数：当前页面的百分比，不是字体的百分比
-绝对值
in：英寸
cm
px
pt:磅（表示印刷上的单位）
（2）悬挂缩进
-悬挂缩进效果
text-indent: -2em;
padding: 2em 文本段落的内边距

（3）间距与对齐
-行高
line-height:数字
-对齐
text-align:left/right/center/justify(适用于英文)
-单词间隔
word-spacing:30px（适用于英文，机械地设置空格的间隔）
-字符间隔
letter-spacing:10px

7.文本样式
（1）文字修饰与空格处理
text-transform:uppercase/lowercase/capitalize
text-decoration:underline/overline/line-through
white-space:normal(将源代码中的连续的多个空格合并)
/pre（将空格和换行符保留，且没有转绕）
/pre-wrap(将空格和换行符保留，且能够转绕)
/nowrap/pre-line
direction:ltr(表示从左到右顺序阅读)/rtl(表示从右到左顺序阅读)

（2）字体
font-family的值有两类
指定字体的大类，而不是具体的字体
font-family:serif sans-serif monospace cursive fantasy
指定一种字体，
font-family:hei
另外，如果在font-family指定了多种字体，
浏览器会从左到右，依次判断它支持的字体，支持则采用。
不支持则继续判断下一个。直至都不支持，则会采用浏览器默认字体。

（3）文字修饰
斜体
font-style:nomal/italic(已做好现成的斜体)/oblique(浏览器计算出的斜体)
font-variant:small-caps;
font-weight:bold/900-100/
font-size:1em/10px(推荐使用em相对值)
font:复合属性

（4）文字效果
CSS3的文本新特性
-文本阴影text-shadow
例子：
text-shadow:3px 5px 5px rgba(0,255,0,0.5)
text-shadow:0px -1px 0px #000000, 0px 1px 3px #606060

-轮廓线outline
outline-color:red;
outline-style:solid/dotted/dashed/double/groove/ridge/inset/outset
outline-width:10;

【学习笔记】CSS基础