结合 图像 长度单位 image eight under -c ridge
【学习过程遇到疑问和延伸阅读】
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.什么是CSSHTML表达结构,这是什么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:graybackground-image:url(图片位置路径)-关于颜色浏览器默认背景颜色是transparentRGB颜色:#RRGGBB(十六进制),rgb(255,255,0),rgba(255,255,0,0.5)(2)图片背景当用一张比原背景小的图片作为背景时,background-repeat:no repeat/repeat-x/repeat-y/repeatbackground-position:center/top/right/top right/100px 100pxbackground-attachment:scroll/fixed合并写法可以简化CSS代码:background: 复合属性,按照以下顺序(背景颜色,背景图像,背景重复,背景附件,背景位置)各值之间用空格相连。
6.段落样式(1)段落缩进text-indent:2em 长度单位的属性值-相对值em:当前字体的倍数%百分数:当前页面的百分比,不是字体的百分比-绝对值in:英寸cmpxpt:磅(表示印刷上的单位)(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/capitalizetext-decoration:underline/overline/line-throughwhite-space:normal(将源代码中的连续的多个空格合并)/pre(将空格和换行符保留,且没有转绕)/pre-wrap(将空格和换行符保留,且能够转绕)/nowrap/pre-linedirection: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
-轮廓线outlineoutline-color:red;outline-style:solid/dotted/dashed/double/groove/ridge/inset/outsetoutline-width:10;
【学习笔记】CSS基础
来源: http://www.bubuko.com/infodetail-2049457.html