首页 > 代码库 > 【学习笔记】CSS基础

【学习笔记】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基础