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

时间: 2024-10-24 14:31:42

【学习笔记】CSS基础的相关文章

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

大话设计模式学习笔记——面向对象基础

前言 好记性不如烂"笔头"系列--大话设计模式学习笔记 目录 面向对象基础 面向对象基础 什么是类与实例 一切事物皆为对象,即所有的东西老师对象,对象就是可以看到.感觉到.听到.触摸到.尝到.或闻到的东西.准确地说,对象是一个自包含的实体,用一组可识别的特性和行为来标识.面向对象编程,英文叫 Object-Oriented Programming,其实就是针对对象来进行编程的意思.类就是具有相同属性和功能的对象的抽象集合.实例就是一个真实的对象.比如我们属于'人'类,而个人就是'人'类

Java快速教程--vamei 学习笔记(基础篇)

链接:http://www.cnblogs.com/vamei/archive/2013/03/31/2991531.html java快速教程第1课 从HelloWorld到面向对象 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/14/2958654.html java快速教程第2课 方法与数据成员 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/25/2964430.html java快

C#学习笔记(基础知识回顾)之值类型与引用类型转换(装箱和拆箱)

一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字节的值,该如何在它上面调用方法? 二:值类型转换为引用类型--装箱 2.1CLR对值类型进行装箱时:新分配托管堆内存,将值类型的实例字段拷贝到新分配的内存中,返回托管堆中新分配对象的地址.这个地址就是一个指向对象的引用. int i = 10; Object obj = i; 三:将引用类型转换为值

[Golong]学习笔记(一) 基础知识

Go编程基础 Go的内置关键字(25个) 不多 break default func interface select case defer go map struct chan else goto package switch const fallthrough if range type continute for import return var Go的注释方法(和js一样) 单行注释: // 多行注释: /**/ Go程序一般结构 common_structure.go 通过 pack

01-Python学习笔记-基础语法

Python标识符 -d           在解析时显示调试信息 -O           生成优化代码 ( .pyo 文件 ) -S           启动时不引入查找Python路径的位置 -v            输出Python版本号 -X           从 1.6版本之后基于内建的异常(仅仅用于字符串)已过时. -c cmd     执行 Python 脚本,并将运行结果作为 cmd 字符串. file           在给定的python文件执行python脚本. P

PHP:学习笔记(2)——基础语法

PHP:学习笔记(2)--基础语法 向屏幕输出 说明 1.void echo ( string $arg1 [, string $... ] ) 2.int print ( string $arg ) 注意: 1.echo.print 实际上不是一个函数(它是一个语言结构),因此你可以不必使用圆括号来括起它的参数列表. 2.输出变量的时候需要使用双引号! 3.int printf ( string $format [, mixed $args [, mixed $... ]] ) 4.strin

OpenFlow Switch学习笔记(一)——基础概念

OpenFlow Switch v1.4.0规范是在2013年10月14号发布,规范涵盖了OpenFlow Switch各个组件的功能定义.Controller与Switch之间的通信协议Open Flow Protocol等.下文主要是基于个人理解整理的一些学习笔记,理解不到位的地方还请大家多多指教. 一.基础概念图: 首先我们先看下Open Flow Switch的整体结构,以便有一个初步的感性认识,如下图所示: 从上面架构图中,我们可以看到Open Flow Switch主要是由以下几个部

.net学习笔记---xml基础知识

一.XML简介 XML是一种标记语言,用于描述数据,它提供一种标准化的方式来来表示文本数据.XML文档以.xml为后缀.需要彻底注意的是XML是区分大小写的. 先从一个简单的XML例子来了解下xml基础: <?xml version="1.0" encoding="utf-8" ?> <books ISBN="9787544238212"> <title>xml学习笔记</title> <pr

C#学习笔记(基础知识回顾)之枚举

一:枚举的含义 枚举是用户定义的整数类型.在声明一个枚举时,要指定该枚举的示例可以包含的一组可接受的值.还可以给值指定易于记忆的名称.个人理解就是为一组整数值赋予意义. 二:枚举的优势 2.1:枚举可以使代码更易于维护,有助于确保给变量指定合法的.期望的值. 2.2:枚举可以使代码清晰,用描述性的名称来表示整数值,增加代码可读性. 三:枚举的使用 /// <summary> /// 声明一个枚举,审核状态 /// </summary> public enum AduitStatus