杰言杰语

以中有足乐者,不知口体之奉不若人也.


  • 首页

  • 分类

  • 关于

  • 归档

  • 标签

  • 搜索

第6章 访问权限控制

发表于 2017-03-28 | 分类于 Java | 阅读次数

访问权限控制的等级,以最大权限到最小权限依次为:public,protected,包访问权限(没有关键字)和private.

1. 包 : 库单元

如我们使用java.util中的一个叫做ArrayList的类.那么我们则要:

1
2
3
4
5
public class FullQualificaction{
public static void main(String[] args){
java.util.ArrayList list = new java.util.ArrayList();
}
}

如果我们导入包import则不用.

1
import java.util.*;

1.1 代码组织

package和import关键字允许你做的,是将单一的全局名字空间分割开,使得无论多少人使用Internet以及Java开始编写类,都不会出现名称冲突的问题.

1.2 创建独一无二的包名

Java解释器的运行过程如下:首先,找出环境变量CLASSPATH,得到的路径会与CLASSPATH中的各个不同的项相连接,解释器就在这些目录中查找与你所有创建的类名称相关的.class文件.

1.3 定制工具库

1
2
3
4
5
6
7
8
9
10
11
12
class Print{
public static void print(Object object){
System.out.println(object);
}
}
public class PrintTest {
public static void main(String[] args) {
Print.print("hello");
}
}

2. Java访问权限修饰词

  • 使该成员成为public,无论谁,无论哪里,都可以访问该成员.
  • 继承而来的类既可以访问public成员也可以访问protected成员(但访问不了private成员).
  • 提供访问器(accessor)和变异器(mutaror)方法,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package debug;
public class SoupTest {
public static void main(String[] args) {
for(int i =1;i<10;i++){
System.out.println(Soup.newSoup());
}
}
}
class Soup{
private static Soup s = new Soup();
private Soup(){
}
public static Soup newSoup(){
return s;
}
public void play(){
System.out.println("good!!!");
}
}

3. 总结

  • 为了使用户不用碰上那些不该碰到的部分,这些部分对于类内部的操作是必要的.
  • 为了让类库设计者可以更改类的内部工作方式,而不必担心这样会对客户端程序员产生重大的影响.

第5章 初始化与清理

发表于 2017-03-28 | 分类于 Java | 阅读次数

随着计算机革命的发展,”不安全”的编程方式以逐渐成为编程代价的主因之一.

1. 用构造器确保初始化

Java中构造器与类相同的名称,在初始化期间要自动调用构造器.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package new05;
public class Rock {
public Rock() {
// TODO Auto-generated constructor stub
}
}
package new05;
public class SimpleConstructor {
public static void main(String[] args) {
for (int i = 0; i < 100; i++) {
new Rock();
}
}
}

在创建对象时,new Rock();将会为对象分配存储空间,并调用相应的构造器.因为构造器的名称必须与类名完全相同,所以”每个方法首字母小写”的编码风格并不适用于构造器.
不接受任何参数的构造器叫做默认构造器,Java文档中通常使用术语无参构造器.

2. 方法重载

为了让方法名相同而形式参数不同的构造器同时存在,必须用到方法重载.
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package new05;
class Tree{
int height;
//默认构造器
public Tree() {
System.out.println("Planting a seedling");
height = 0;
}
Tree(int initialHeight){
height = initialHeight;
System.out.println("Creating new Tree that is"+height+"ftte tall");
}
void info(){
System.out.println("Tree is"+height+"feet tall");
}
void info(String s){
System.out.println(s+":Tres is"+height+"feet tall");
}
}
public class OverLoading {
public static void main(String[] args) {
for (int i = 0; i < 5; i++) {
Tree t = new Tree(i);
t.info();
t.info("overloaded method");
}
new Tree();
}
}

创建Tree对象的时候,既可以不含参数,也可以用树的高度为参数.前者表示一颗树苗,后者表示有一定高度的树苗.要支持这种创建方式,得有一个默认构造器和一个采用现有高度作为参数的构造器.

3. 默认构造器

如果你写的类中没有构造器,则编译器会自动帮你创建一个默认的构造器.但如果你创建了一个构造器,编译器就不会帮你自动创建默认构造器.

练习:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Dog.java
package new05;
public class Dog {
String name;
Dog(String name){
this.name = name;
}
public void bark(){
System.out.println(this.name+"is barking!");
}
}
DogTest.java
package new05;
public class DogTest {
public static void main(String[] args) {
for (int i = 0; i < 5; i++) {
Dog dog = new Dog("小"+i);
dog.bark();
}
}
}

4. this关键字

this关键字只能在方法内部使用,表示对”调用方法的那个对象”的引用.

5. static的含义

static方法就是没有this的方法,在static方法的内部不能调用非静态方法.而且可以在没有创建对象的前提下,仅仅通过类本身调用static方法.

6. 清理:终结处理和垃圾回收

垃圾回收器只知道释放那些由new分配的内存,但是finalize()能解决.

finalize()的用途?

  • 垃圾回收只与内存有关
  • 对象可能不被垃圾回收
  • 垃圾回收并不等于”析构”

JVM在没有面临内存耗尽的情形,它是不会浪费时间去执行垃圾回收以恢复内存的.

7. 成员初始化

Java尽力保证:所有变量在使用前都能得到适当的初始化.对于方法的局部变量,Java以编译时错误的形式来贯彻这种保证.在类定义一个对象引用时,如果不将其初始化.此引用就会获得一个特殊值null.

8. 构造器初始化

无论创建多少个对象,静态数据都只占用一份存储区域.

总结一下对象的创建过程,假设有个名为dog的类:

  • 即是没有显式地使用static关键字,构造器实际上也是静态方法.所以,当首次创建为dog的对象时,或者Dog类的静态方法/静态域首次被访问时,Java解析器必须查找类路径,以定位Dog.class文件.

  • 然后载入Dog.class,有关静态初始化的所有动作都会被执行.所以,静态初始化只在class对象首次加载的时候进行一次.

  • 当用new dog()创建对象的时候,首先将在推上为dog对象分配足够的存储空间.

  • 这块存储空间会被清零,这就自动地将Dog对象中的基本类型数据都设置成了默认值.

  • 执行所有出现于字段定义处的初始化动作.

  • 执行构造器.
    例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package new05;
class Cup{
Cup(int marker){
System.out.println("Cup("+marker+")");
}
void f(int marker){
System.out.println("f("+marker+")");
}
}
class Cups{
static Cup cup1;
static Cup cup2;
static{
cup1 = new Cup(1);
cup2 = new Cup(2);
}
Cups(){
System.out.println("Cups");
}
}
public class ExplicitStatic {
public static void main(String[] args) {
System.out.println("Inside main()");
Cups.cup1.f(99);
}
}

9. 数组初始化

要定义一个数组,只需要在类型名后加上一对空方括号即可;编译器不允许指定数组的大小,只是对数组的一个引用.

1
int[] a1;

例子:可变参数列表

1
2
3
4
5
6
7
8
9
10
11
12
package new05;
public class AutoboxingVarargs {
public static void f(Integer...args){
for (Integer integer : args) {
System.out.println(integer);
}
}
public static void main(String[] args) {
f(4,5,6,7,8);
}
}

第4章 控制执行流程

发表于 2017-03-28 | 分类于 Java | 阅读次数

就像有知觉的生物一样,程序必须在执行过程中控制它的世界,并做出选择.在Java中,你要使用执行控制语句来做出选择.

1. return

如果在返回void的方法中没有return语句,那么在该方法的结尾处会有一个隐式的return.

2. break和continue

break用于强强行退出循环,不执行循环中剩余的语句.而continue则停止执行当前的迭代,然后退回循环起始处,开始下一次迭代.

第3章 操作符

发表于 2017-03-28 | 分类于 Java | 阅读次数

在最底层,Java中的数据是通过常用操作符操作的.

1. 优先级

先乘除后加减,System.out.println()语句中包含”+”操作符.”+”意味着”字符串连接”,当编译器观察到一个String后面跟一个”+”,而这个”+”的后面又跟一个非String类型的元素时,就会尝试将这个非String类型的元素转换为String.

1.1 方法调用中的别名问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.fkcat.new03;
public class Letter {
char c;
}
package com.fkcat.new03;
public class PassObject {
static void f(Letter y){
y.c = 'z';
}
public static void main(String[] args) {
Letter x = new Letter();
x.c = 'a';
System.out.println("1:x.c "+x.c);
f(x);
System.out.println("2:x.c "+x.c);
}
}

方法f()好像要在它的作用域内复制其参数Letter y 的一个副本;但实际上只是传递了一个引用.所以代码行实际改变的是f()之外的对象.

1
y.c = 'z';

2. 算术操作符

如果要将X加4,并将结果赋回给X,可以这么写:X+=4;

3. 自动递增和递减

++a 等价于 a = a + 1;

4. 类型转换操作符

假设我们为某浮点变量赋以一个整数值,编译器会将int自动转换为float.类型转换运算允许我们显式地进行类型的转换,或者在不能自动进行转换的时候强制进行转换.

第2章 一切都是对象

发表于 2017-03-28 | 分类于 Java | 阅读次数

1. 用引用操纵对象

一切都看作为对象,操纵的标识符实际上是对象的一个”引用”,如果想操纵一个词或句子,则可以创建一个String引用:

1
String s;

创建了一个引用,并不是对象.此时向s发送一个信心,就会返回一个运行错误.着是因为S实际上没有与任何事物相关联.因此,一种安全的做法是:创建一个引用的同时便进行初始化.

1
Stirng s = "asdf";

Java语言的一个特性:字符串可以用带引号的文本初始化.通常,必须对对象采用一种更通用的初始化方法.

2.必须由你创建所有对象

1
String s = new String("asdf");

一旦创建了一个引用,就希望它能与一个新的对象相关联,通常用new操作符来实现这一目的.new关键字的意思是”给我一个新的对象.”

2.1 存储到什么地方

有五个不同的地方可以存储数据:

  • 寄存器:它位于处理器内部,但是寄存器的数量极其有限,所以寄存器根据需求进行分配.
  • 堆栈:位于通用RAM(随机访问寄存器)中,Java系统必须知道存储在堆栈内所有项的确切生命周期,以便上下移动堆栈指针.尽管Java数据存储在堆栈中,但是Java对象并不存储于其中.
  • 堆:一种通用的内存池(也位于RAM区),用于存放所有的Java对象,当需要一个对象时,只需要new写一行简单的代码,当执行这行代码时,会自动在堆里面进行存储分配.
  • 常量存储:常量值通常直接存放在程序代码内部,这样很安全,因为不会被改变.
  • 非RAM存储:数据完全存货在程序之外,最基本的例子是流对象和持久化对象.在流对象中,对象转换成字节流,通常被发送到另一台机器.在”持久化”对象中,对象被存放于硬盘上,即使程序终止,它们仍可以保持自己的状态.

2.2 特例:基本类型

在程序设计中经常用到的一系列类型,它们需要特殊对待.它们称之为”基本”类型.是因为new将对象存储在”堆”里,故用new创建一个对象,往往不是特别有效.所有Java往往不用new来创建变量,而是创建一个并非是引用的”自动”变量.这个变量直接存储”值“,并置于堆栈中,因此更加有高效.

基本类型都具有包装器类,使得可以在堆中创建一个非基本对象,用来表示对应的基本类型.

1
2
Char c = "x";
Character ch = new Character(c);

也可以这样写:

1
Character ch = new Character("x");

高精度数字

  • BigInteger:支持任意精度的整数.
  • BigDecimal:支持任意精度的定点数.

2.3 Java中的数组

当创建了一个数组对象时,实际上就是创建了一个引用数组,并且每个引用都会自动被初始化为一个特定值,该值拥有自己的关键字null.一旦Java看到null,就知道这个引用还没有指向某个对象.在引用任何引用前,都必须为其指定一个对象,否则会报错.

2.3.1 作用域

作用域决定了在其内定义的变量名的可见性和生命周期.如:

1
2
3
4
5
6
{
int x = 12;
{
int q = 96;
}
}

这样的代码在Java上不允许这样写,编译器将会报告变量X已经被定义过.所以,在C和C++里将一个较大作用域的变量”隐藏”起来的做法,在Java中是不被允许的.

2.3.2 对象的作用域

Java对象不具备基本类型的一样的生命周期,当用new创建一个Java对象时,它可以存活于作用域之外.

1
2
3
4
{
String s = new String("a String");
}

引用s在作用域中点就消失了.然而,s指向的String对象仍继续占据内存空间.在这一小段代码中,我们无法再这个作用域之后访问对象,因为对它唯一的引用已超出了作用域的范围.

Java提供垃圾回收器,用来监视用new创建的所有对象,并辨别那些不会被引用的对象.随后,释放这些对象的内存空间,以便供其他新的对象使用.

2.4 创建新的数据类型:类

1
class AtypeName{}

引入了新的类型.然而,你可以用new来创建这种类型的对象:

1
ATypeName a = new ATypeName();

2.4.1 字段和方法

字段我们有时被称为(数据成员)和方法我们有时被称为(成员函数).字段可以是任何类型的对象,可以通过引用与其进行通信,也能为基本类型的一种.字段如果是对某个对象的引用,必须将其初始化引用.
如:

1
2
3
4
5
6
Class DataOnly{
int i;
double d;
boolean b;
}
DataOnly data = new DataOnly();//在对象引用的名称之后接括号,在对象内部写成员名称;
1
2
3
data.i = 47;
data.d = 1.1;
data.b = false;

int i;Java会在编译时会返回一个错误,告诉你变量没有初始化.

2.5 方法、参数和返回值

Java的方法决定了一个对象能够接收什么样的信息.

1
2
3
4
ReturnType methodName(int a )
{
}

Java中的方法只能通过对象才能调用.

1
int x = a.f();

这种调用方法的行为通常被称为发送消息给对象.

2.5.1 参数列表

如果参数被设为String类型,就必须传递一个String的对象;否则,编译器会抛出错误!

return 表示它已经做完,离开此方法!

2.6 构建一个Java程序

1
import java.util.*;//通配符"*"来达到目的!

2.6.1 static关键字

当生命一个事物是static时,就意味着某个域或方法不会与包含它的那个类的任何对象实例关联在一起.

二.帧动画Drawable Animation入门

发表于 2017-03-28 | 分类于 Android | 阅读次数

Drawable Animation
Drawable animation lets you load a series of Drawable resources one after another to create an animation. This is a traditional animation in the sense that it is created with a sequence of different images, played in order, like a roll of film. The AnimationDrawable class is the basis for Drawable animations.

Drawable animation是一个一个的加载一些列的图片来创建动画的,他是一种传统的动画,事实上就是一个不同图片的序列AnimationDrawable是Drawable animations 的基类.

While you can define the frames of an animation in your code, using the AnimationDrawableclass API, it‘s more simply accomplished with a single XML file that lists the frames that compose the animation. The XML file for this kind of animation belongs in the res/drawable/ directory of your Android project. In this case, the instructions are the order and duration for each frame of the animation.

虽然可以使用AnimationDrawable类在代码中定义帧动画,但最好是使用XML文件列出组成动画的所有帧。这个xml文件放在res/drawable/目录下,事实上,所有的指令就是每一个帧动画的顺序和持续时间.

The XML file consists of an<animation-list>
element as the root node and a series of child<item>
nodes that each define a frame: a drawable resource for the frame and the frame duration. Here‘s an example XML file for a Drawable animation:

xml文件由根元素 <animation-list>和一系列子元素<item>组成,其中<item>定义了每个帧对应的图片和持续时间,如下:

1
2
3
4
5
6
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

This animation runs for just three frames. By setting the android:oneshotattribute of the list to true, it will cycle just once then stop and hold on the last frame. If it is set false then the animation will loop. With this XML saved as rocket_thrust.xml in the res/drawable/directory of the project, it can be added as the background image to a View and then called to play. Here‘s an example Activity, in which the animation is added to an ImageView and then animated when the screen is touched:

上面的例子是一个3帧动画, 通过将android:oneshot设置为true,那他就只会循环一次,并停留在最后一个帧上,若为false的话,就会循环运行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rocketAnimation.start();
return true;
}
return super.onTouchEvent(event);
}

It‘s important to note that the start() method called on the AnimationDrawable cannot be called during the onCreate()method of your Activity, because the AnimationDrawable is not yet fully attached to the window. If you want to play the animation immediately, without requiring interaction, then you might want to call it from theonWindowFocusChanged()) method in your Activity, which will get called when Android brings your window into focus.

注意:start()方法不能在你的Activity的onCreate()方法中调用,因为那时候AnimationDrawable尚未完全附着于窗口。如果你必须立刻调用动画,切没有交互的话,可以在onWindowFocusChanged())中调用。因为这个方法是窗口获得焦点时调用的.

一.最常用和最难用的控件(ListView)

发表于 2017-03-28 | 分类于 Android | 阅读次数

ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时屏幕上原有的数据则会滚动出屏幕.

1. ListView的简单用法

首先新建一个ListViewTest项目,然后修改activity_main.xml代码.

1
2
3
4
5
6
7
8
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</LinearLayout>

为ListView指定一个id,然后将宽度和高度都修改为match_parent,这样ListView就占据了整个布局的空间.
ListView布局

接下来修改MainActivity中的代码.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MainActivity extends Activity {
private String[] data = {"Apple","Banana","Orange","Watermelon",
"Pear","Grape","Pineapple","Strawberry","Cherry","Mango"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//先创建适配器,并且把内容放入去.
ArrayAdapter<String> adapter = new ArrayAdapter<String>
(MainActivity.this, android.R.layout.simple_list_item_1,data);
ListView listView = (ListView) findViewById(R.id.list_view);
//调用ListView的对象把适配器传进去.
listView.setAdapter(adapter);
}
}

数组中的数据是无法直接传递给ListView的,我们需要借助适配器来完成,其中最好用的是ArrayAdapter它可以通过泛型来指定要添加的数据类型,然后在构造函数中把要适配的数据传入即可.注意我们使用了android.R.layout.simple_list_item_1作为ListView的子项布局的id,以及要适配的数据.

最后,我们要调用ListView的SetAdapter()方法,将构造好的适配器对象传递进去,这样ListView和数据之间的关联就建立完成了.
ListView与数据关联

2. 定制ListView的界面

接着定义一个实体类,作为ListView适配器的适配类型,新建类Fruit,需要准备一组图片.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class Fruit {
private String name;
private int imageId;
public Fruit(String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}

Fruit类中只有两个字段,name表示水果的名字,imageId表示水果对应图片的资源id.

然后需要为ListView的子项指定一个我们自定义的布局,在layout目录下新建fruit_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/fruit_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dip" />
</LinearLayout>

在这个布局里,我们定义了一个ImageView用于显示水果的图片,又定义了一个TextView用于显示水果的名称.

接下来需要创建一个自定义的适配器,这个适配器继承自ArrayAdapter,并将泛型指定为Fruit类.新建类FruitAdapter,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class FruitAdapter extends ArrayAdapter<Fruit> {
private int resourceId;
public FruitAdapter(Context context, int textViewResourceId,
List<Fruit> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Fruit fruit = getItem(position);
View view = LayoutInflater.from(getContext()).inflate(resourceId, null);
ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
TextView fruitName = (TextView) view.findViewById(R.id.fruit_name);
fruitImage.setImageResource(fruit.getImageId());
fruitName.setText(fruit.getName());
return view;
}
}

FruitAdapter重写了父类的一组构造函数,用于将上下文,ListView子项布局的id和数据都传递进来.另外又重写了getView()方法,首先通过getItem()方法得到当前项的Fruit的实例,然后使用LayoutInflater来为这个子项加载我们传入的布局,接着调用View的fndViewById()方法分别获取到ImageView和TextView的实例,并分别调用它们的setImageResource和setText方法来设置显示的图片和文字,最好将布局返回.

下面修改MainActivity中的代码,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public class MainActivity extends Activity {
private List<Fruit> fruitList = new ArrayList<Fruit>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFruits();
FruitAdapter adapter = new FruitAdapter(MainActivity.this,
R.layout.fruit_item, fruitList);
ListView listView = (ListView) findViewById(R.id.list_view);
listView.setAdapter(adapter);
}
private void initFruits() {
Fruit apple = new Fruit("Apple", R.drawable.apple_pic);
fruitList.add(apple);
Fruit banana = new Fruit("Banana", R.drawable.banana_pic);
fruitList.add(banana);
Fruit orange = new Fruit("Orange", R.drawable.orange_pic);
fruitList.add(orange);
Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon_pic);
fruitList.add(watermelon);
Fruit pear = new Fruit("Pear", R.drawable.pear_pic);
fruitList.add(pear);
Fruit grape = new Fruit("Grape", R.drawable.grape_pic);
fruitList.add(grape);
Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple_pic);
fruitList.add(pineapple);
Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry_pic);
fruitList.add(strawberry);
Fruit cherry = new Fruit("Cherry", R.drawable.cherry_pic);
fruitList.add(cherry);
Fruit mango = new Fruit("Mango", R.drawable.mango_pic);
fruitList.add(mango);
}
}

可以看到,这里添加了一个initFruits()方法,用于初始化所有水果的数据,在Fruit类构造函数将水果的名字和对应图片id传入,然后把创建好的对象添加到水果列表中,接着我们再onCreate()方法中创建了FruitAdapter对象,并将FruitAdapter作为适配器传递给ListView.

3. 提升ListView的运行效率

因为在FruitAdapter的getView()方法中每次都将布局重新加载了一次,当ListView快速滚动的时候就会成为性能的阻碍.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class FruitAdapter extends ArrayAdapter<Fruit> {
private int resourceId;
public FruitAdapter(Context context, int textViewResourceId,
List<Fruit> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Fruit fruit = getItem(position); // 获取当前项的Fruit实例
View view;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
} else {
view = convertView;
}
ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
TextView fruitName = (TextView) view.findViewById(R.id.fruit_name);
fruitImage.setImageResource(fruit.getImageId());
fruitName.setText(fruit.getName());
return view;
}
}

所以,我们再getView()方法中进行了判断,如果convertView为空,则使用LayoutInflater去加载布局,如果不为空则直接对convertView进行重用.

每次在getView()方法中还是会调用View的findViewById()方法来获取一次控件的实例,我们还可以借助一个ViewHolder来对这部分性能进行优化,修改FruitAdapter`中的代码,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
public class FruitAdapter extends ArrayAdapter<Fruit> {
private int resourceId;
public FruitAdapter(Context context, int textViewResourceId,
List<Fruit> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Fruit fruit = getItem(position);
View view;
ViewHolder viewHolder;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
viewHolder = new ViewHolder();
viewHolder.fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
viewHolder.fruitName = (TextView) view.findViewById(R.id.fruit_name);
view.setTag(viewHolder);
} else {
view = convertView;
viewHolder = (ViewHolder) view.getTag();
}
viewHolder.fruitImage.setImageResource(fruit.getImageId());
viewHolder.fruitName.setText(fruit.getName());
return view;
}
class ViewHolder {
ImageView fruitImage;
TextView fruitName;
}
}

我们新建了一个内部类ViewHolder,用于对控件的实例进行缓存.当convertView为空的时候,创建一个ViewHolder对象,并将控件的实例都存放在ViewHolder里,然后调用View的SetTag()方法,将ViewHolder对象存储在View中.当convertView不为空的时候则调用View的getTag()方法,把ViewHolder重新取出.这样所有控件的实例都缓存在ViewHolder里,就没有必要每次都通过findViewById()方法来获取控件实例了.

4. ListView的点击事件

1
2
3
4
5
6
7
8
9
listView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
Fruit fruit = fruitList.get(position);
Toast.makeText(MainActivity.this, fruit.getName(),
Toast.LENGTH_SHORT).show();
}
});

最终效果图

5. 总结

  • 先在布局中加入ListView控件
  • 然后自定义适配器,这个适配器继承自ArrayAdapter
  • 初始化数据,把数据传入自定义适配器
  • 然后将适配器传递给ListView.

五.Css基础(3)

发表于 2017-03-28 | 分类于 WebDesign | 阅读次数

1. 复习回顾

1.1 行高(Line-height)

  • 行高浏览器的默认字体大小为16px
  • 浏览器默认文字行高为18px
    行高 = 上间距 + 文字大小 + 下间距
    ![详解行高使文字垂直居中]五-Css基础-3/1.png “详解行高使文字垂直居中”)
  • 行高单位问题
单独给一个标签设置行高 结果
如果行高单位是px 行高与文字大小无关
如果行高单位是em 行高=文字大小*行高值
如果行高单位是 % 行高=文字大小*行高值
如果行高没有单位 行高=文字大小*行高值
给父元素设置行高 子元素行高结果
行高单位是px 行高=父元素行高
行高单位是em 行高=父元素文字大小*行高值(与子元素文字大小无关)
行高单位是% 同上
行高单位无 行高=子元素文字大小*行高值

1.2 盒模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容,内边距(padding),边框(border)和外边距(margin)组成.
![盒子模型]五-Css基础-3/2.png “盒子模型”)

![Paste_Image]五-Css基础-3/3.png “Paste_Image”)

css中盒子模型由三部分组成 : 1.边框(border) 2.内边距(padding) 3.外边距(margin)

1.2.1 盒模型之边框(broder)

  • 语法 :
    border : border-width || border-style || border-color
属性名称 介绍
border-width 设置边框宽度单位以px为主例如:12px
border-style 设置边框样式
border-color 设置边框颜色
border-top 设置上边框样式
border-bottom 设置下边框样式
border-left 设置左边框样式
border-right 设置右边框样式
  • 热身 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width:100px;
height:100px;
border-width:1px;
border-style:dotted;
border-color:green;
}
p{
width:100px;
height:100px;
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<p></p>
<div></div>
</body>
</html>

1.2.2 盒模型之内边距(padding)

属性名称 介绍
padding:10px 上,下,左,右距离分别是10px
padding:10px 40px 上下10px 左右40px
padding:10px 40px 20px 上10px 左右40px 下20px
padding:10px 20px 30px 40px 上10 右20px 下30px 左40px
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

padding影响盒子大小问题
盒子宽度=盒子宽度+左右内边距+边框宽度

1.2.3 盒子模型之外边距(margin)

属性名称 介绍
margin:10px 距离上下左右边距10px
margin:10px 20px 距离上下10px 左右20px
margin:10px 20px 30px 距离上10px 左右 20px
margin:10px 20px 30px 40px 距离上10px 右20px 下 3左40px
margin-left: 距离左边
margin-right 距离右边
margin-top 距离上边
margin-bottom 距离下边
margin:0 auto auto 设置为相对边的值

Margin之边框合并
外边距合并(叠加)是一个相当简单的概念.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.
Margin之边框合并

Margin之边框合并

行内元素不要给上下的margin 和padding注意 :
上下margin和padding会被忽略,左右margin和padding会起作用.

  • 热身
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box{
height:382px;
width:208px;
border: 1px solid #CECECE;
margin: 20px auto;
}
.title{
height:25px;
background: #ECEDEE;
}
h4{
height:25px;
line-height: 25px;
font-size:14px;
padding-left: 10px;
}
.photo{
width: 180px;
height: 180px;
border:1px solid #CCCCCC;
margin:10px auto;
}
.weibo{
text-align: center;
border-bottom: 1px dotted #D1D1D1;
padding-bottom:15px;
}
.weibo input{
width: 70px;
height: 21px;
background: url("vb.jpg") no-repeat;
}
.friend{
text-align: center;
margin-top: 5px;
}
.friend input{
width: 69px;
height: 23px;
margin-bottom:5px;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h4>个人资料</h4>
</div>
<div class="photo">
![](1.jpg)
</div>
<div class="weibo">
<span>V闪闪</span>
![](v.jpg)
<br>
<br>
<input type="button" value="微博">
</div>
<div class="friend">
<input type="button" value="加好友">
<input type="button" value="加好友">
<input type="button" value="加好友">
<input type="button" value="加好友">
</div>
</div>
</body>
</html>

2. 新知识

2.1 标准流normal flow(文档流)

标准流 : 块级元素纵向有序排列,行内块(行内)元素横向有序排列

2.2 浮动 (float)

  • 语法 : float:left | right
  • 特点 :
    • 设置了浮动的元素不占原来的位置(脱标)
    • 可以让块级元素在一行上显示
    • 浮动可以行内元素转化为行内块元素
      模式转换的过程中,能用display就用display
  • 作用 :

    • 浮动用来解决文字图片环绕问题
    • 制作导航栏
    • 网页布局
  • 热身

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width:300px;
height:400px;
border:1px solid red;
}
div img{
float:left;
}
</style>
</head>
<body>
<div>
![](1.jpg)
</div>
</body>
</html>
  • 热身
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav{
height:55px;
background: url("head_bg.jpg");
}
.nav li{
list-style:none;
float:left;
line-height:55px;
background: url("li_bg.png") no-repeat right;
}
ul{
margin-left: 390px;
}
a{
height:55px;
display:inline-block;
padding:0 10px;
text-decoration:none;
color:black;
}
a:hover{
background-color:yellowgreen;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">智能手机</a>
</li>
<li>
<a href="#">智能手机</a>
</li>
<li>
<a href="#">智能手机</a>
</li>
</div>
</body>
</html>

2.3 清除浮动

当父容器没有设置高度,里面的盒子没有设置浮动的情况下会将父容器的高度撑开.一旦父容器中的盒子设置浮动,脱离标准文档流,父容器立马没有高度,下面的盒子会跑到浮动的盒子下面.出现这种情况,我们需要清除浮动.

2.3.1 清除浮动的方式

  • 使用 :
    clear:left| right | both
    在要清除的浮动的元素后面添加一个标签
    添加标签

清除浮动

  • 给父容器设置高度
  • 通过设置clear:left | right | both
  • 给父容器设置 overflow:hidden
  • 通过伪元素 :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    clearfix:after{
    content:"";
    height:0; line-height:0;
    visibily:hidden;
    clear:both;
    display:block;
    }
    .clearfix{
    zoom:1 为了兼容IE浏览器
    }

2.4 overflow介绍

overflow 属性规定当内容溢出元素框时发生的事情.

属性名称 介绍
overflow:visible 默认值.内容不会被修剪,会呈现在元素框之外.
overflow:hidden 内容会被修剪,并且其余内容是不可见的.
overflow:scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容.
overflow:auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容.
  • 热身
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid green;
overflow: scroll; /* 添加滚动条 */
}
</style>
</head>
<body>
<div>
<p>asdfasdfasdf</p>
<p>asdfasdfasdf</p>
<p>asdfasdfasdf</p>
<p>asdfasdfasdf</p>
</div>
</body>
</html>

3. 定位 (position)

语法 介绍
position:static 静态定位
position:absolute 绝对定位
position:relative 相对定位
position:fixed 固定定位

3.1 静态定位

  • 静态定位 : 就是按照标准流的方式显示
  • 用法 :
    position : static;

3.2 绝对定位(absloute)看脸型

  • 绝对定位以浏览器左上角为基准设置位置
  • 当一个盒子包含在另一个盒子中,父盒子未设置定位,盒子以浏览器左上角为基准设置位置; 当父盒子设置定位,子盒子以父盒子左上角为基准设置位置
  • 绝对定位绝对不占空间位置(与浮动一样)
  • 绝对定位可是实现模式转换

3.3 相对定位(relative)自恋型

  • 相对定位以元素自身的位置为基准设置位置
  • 相对定位占位置
  • 一般子元素设置相对定位,父元素设置绝对定位(子绝父相)

4. 案例与作业

  • 导航练习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
.box{
width:600px;
height:150px;
background-image:url("banner_bg.jpg");
margin:0 auto;
}
.nav{
background-image:url("nav_bg.jpg");
height:32px;
}
li{
list-style:none;
float:left;
}
li a{
height:32px;
width:80px;
display:inline-block;
background-image:url("a_bg.jpg");
line-height:32px;
text-align:center;
text-decoration:none;
}
li a:hover{
background-image:url("button2.jpg");
}
</style>
</head>
<body>
<div class="box">
![](banner1.jpg)
<div class="nav">
<ul>
<li><a href="#">首页导航</a></li>
<li><a href="#">首页导航</a></li>
<li><a href="#">首页导航</a></li>
<li><a href="#">首页导航</a></li>
<li><a href="#">首页导航</a></li>
<li><a href="#">首页导航</a></li>
</ul>
</div>
</div>
</body>
</html>
  • 固定定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
.box{
width:998px;
height:1667px;
margin:0 auto;
margin-top:44px;
}
.header{
position:fixed;
top:0;
left:0;
}
.left,.right{
position:fixed;
}
.left{
left:0;
top:70px;
}
.right{
right:0;
top:70px;
}
</style>
</head>
<body>
<div class="box">
![](box.png)
<div class="header">
![](r1_c1.png)
</div>
<div class="left">
![](r2_c1.png)
</div>
<div class="right">
![](r2_c2.png)
</div>
</div>
</body>
</html>
  • 小米导航
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 1226px;
height: 460px;
margin:0 auto;
position: relative;
}
.left{
width: 234px;
height: 457px;
position: absolute;
top:1px;
left:0px;
}
.left_s{
position: absolute;
left:244px;
top: 214px;
}
.right_s{
position: absolute;
right:0px;
top: 214px;
}
</style>
</head>
<body>
<div class="box">
<div class="img">
![](1.jpg)
</div>
<div class="left">
![](xiaom_left.png)
</div>
<div class="left_s">
![](left.png)
</div>
<div class="right_s">
![](right.png)
</div>
</div>
</body>
</html>

5. 总结 :

  • background: url(“li_bg.png”) no-repeat right; no-repeat : 含义为不平铺
  • display:inline-block; 在同一行显示
  • text-decoration:none; 文字修饰设置为无

四.Css基础(2)

发表于 2017-03-28 | 分类于 WebDesign | 阅读次数

1. 复习回顾

概念 : 层叠样式表或者叫级联样式表

内嵌式 : 基本实现css代码与html代码分离.当前样式只能控制当前页面

1
2
3
<head>
<style type=”text/css”></style>
</head>

语法 : 选择器{属性:值; }

属性 赋值 描述
color color:red; 文字颜色
font-size font-size:20px; 文字大小
font-family ont-family:宋体; 文字字体
font-weight font-weight:bold(700) / normal 文字加粗
font-style font-style:italic / normal 文字斜体(italic)
background-color background-color:red; 背景颜色
width height / width: 12px; 宽度和高度
text-align text-align:center; 文字居中
text-indent text-indent:2em; 首行缩进
margin margin: 0 auto; 盒子居中显示

1.1 基础选择器

  • 标签选择器
    P{属性:值;}

  • 类选择器
    定义 :
    .fontcolor{color: red;}
    调用 :
    <p class=”fontcolor”>文字</p>
    特点 :
    谁调用谁改变
    一个标签可以同时调用多个类样式
    多个标签可以同时调用一个类样式
    命名 :
    不推荐使用汉字定义类名
    不推荐使用标签名或者属性名定义类名
    不能使用纯数字或者特殊字符 (“_”除外)定义类名

  • id 选择器
    定义 :
    #自定义名称{属性:值;}
    注意 :
    页面中的表 id 名称不能重复
    同一个标签不能调用多个 id 样式

  • 通配符选择器
    *{属性:值;}

1.2 复合选择器

  • 标签指定式选择器
    P.类选择器{属性:值;}
    既…又…
  • 后代选择器
    选择器 选择器{属性:值;}
    标签之间的关系属于嵌套关系
  • 并集选择器
    选择器,选择器,选择器{属性:值;}

2. Css书写位置

  • 内嵌式 : 基本实现css代码与html代码分离.当前样式只能控制当前页面
    内嵌式
  • 外链式 : 完全实现css代码与html代码分离,当前样式可以作用到整个网站
    外链式
  • 行内式 : 完全没有实现css代码与html代码相分离,写法简答.维护成本高
    行内式

3. Html标签的分类

3.1 块级元素

块状元素

  • 特点 :
    元素自己独占一行显示(与宽度无关)
    可以设置宽度和高度
    当嵌套一个块级元素,子元素如果不设置宽度,那么该子元
    素的宽度为父元素的宽度.

3.2 行内元素

行内元素

  • 特点 :
    元素在一行上显示
    不能直接设置宽度和高度

3.3 行内块元素

行内块元素

  • 特点 :
    元素在一行上显示
    可以设置宽度和高度

3.4 元素之间的转换

display : inline 将元素转化为行内元素
display : inline-block 将元素转化行内块元素
display : block 将元素转化为块元素

1
2
3
div{
display : inline;
}

4. Css特性

4.1 层叠性

样式的覆盖. 样式的层叠性与样式的调用顺序没有关系,与样式的定义顺序有关.
层叠性发生的前提 : 样式冲突

4.2 继承性

继承性发生的前提是标签之间属于一种嵌套关系

  • 文字颜色可以实现继承
  • 文字大小可以实现继承
  • 字体可以实现继承
  • 行高可以实现继承
  • 与文字有关的属性都可以,实现继承
  • 特殊性 :
    <a href=”#”></a> 不能继承父元素中的文字颜色(层叠掉了)
    <h1></h1>标题标签不能继承父元素中的文字大小

4.3 优先级

默认样式<标签选择器<类选择器<id 选择器<行内样式<!important
优先级

5. 伪类介绍

  • :link : 伪类,适用于未被用户访问过的链接
    a:link
  • :visited : 伪类,适用于已被用户访问过的链接

a:visited

  • :hover : 伪类,光标指向一个元素,但此元素未被激活时的样式
    a:hover
  • :active : 伪类,适用于一个元素被激活时的样式
    a:active
伪类常用属性 属性介绍
text-decoration:none / underline 设置文字是否有下横线

6. 背景(background)

  • background-color 背景颜色
  • background-image 背景图片

注意 :
设置背景图片时候一定要设置宽度和高度

1
2
3
4
5
div{
background-image:url("1.png");
width: 500px;
height:500px;
}
  • background-repeat(设置背景平铺)
    repeat (默认值)|no-repeat (不平铺)|repeat-x | (横向平铺)repeat-y (纵向平铺)

  • background-position(设置背景位置)
    设置具体值 : left| right| top| bottom| cneter

  • background-attachment(设置背景是否固定)
    Scroll(默认值)滚动| fixed(图片固定)

  • 背景属性联写 :
    background: url(“1.png”) red no-repeat 30px 40px;

三.Css基础(1)

发表于 2017-03-28 | 分类于 WebDesign | 阅读次数

1. Css概念

CSS 指层叠样式表 (Cascading Style Sheets)级联样式表

1.1 Css与Html的关系

  • Css 以 html 为基础的.
  • Css 主要设置的就是 html 标签中的属性样式,css 进行网页布局.

1.2 Css语法

  • 选择器{属性:值; 属性:值;…. }
  • 选择器 : 就是一个选择谁的过程.
  • 参数说明 : 属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用英文输入法下的分号;隔开.
属性 赋值 介绍
color color: red; 前景色(文字颜色)
font-size font-size: 20px; 设置文字大小
width width: 30px; 设置宽度
width width: 30px; 设置宽度
Height height:30px; 设置高度
Background-color background-color:red; 设置背景颜色
Text-align text-align:center; left/right; 文字居中
Text-indent text-indent: 2em; 首行缩进
  • Px : 像素
  • 注意 :
    • Text-align:center; 在块级元素中可以让文字居中

1.3 Css 书写位置介绍

  • 内嵌式写法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    p{
    color:red;
    }
    </style>
    </head>

1.4 选择器的分类

  • 基础选择器
    • 标签选择器
    • 类选择器
    • id 选择器
      -通配符选择器
  • 复合选择器
    • 标签指定式选择器
    • 后代选择器
    • 并集选择器

1.5 标签选择器

  • 标签 : 就是 html 中的标签
  • 用法 :
    标签名{属性:值; 属性:值;}

标签选择器

  • 颜色的显示方式
    • 直接设置对应颜色的名称
      p{color:red;}
    • 通过十六进制显示
      color:#2934DE;
    • 通过 rgb 方式显示
      • R : 代表的是红色(red) 0-255
        G : 代表的是绿色(green) 0-255
        B : 代表的是蓝色(blue) 0-255
    • rgba
      • a : 设置透明度 alpha 0-1
        rgba

1.6 类选择器

  • 用法 :
    • .自定名称{属性:值;}
  • 调用 :
    • 标签通过 class 属性调用类样式
      .fontcolor{color:red;}
  • 特点 :
    • 谁调用谁改变,多个标签可以同时调用一个类样式.
    • 一个标签可以调用多个类样式

1.7 类的命名规范

类的命名规范

  • 不能以纯数字或者以数字开头定义类名
  • 不推荐使用汉字定义类名
  • 不能以特殊符号或者以特殊符号开头(“_”除外)定义类名
  • 不建议使用标签名或者属性名定义类名

1.8 Id选择器

  • 用法 :
    • #id名称{属性:值;}
  • 调用 :
    <p id ="p_color">hello,world!</p>
  • 特点 :
    • 不建议多个标签使用同一 id 选择器的样式
    • 一个标签只能调用一个 id 样式

1.9 通配符选择器

  • 用法 :
    • {属性:值; 属性:值;}
      `
      {color: red; font-size: 30px;}`
  • 特点 :
    • 将页面中所有的标签都选中,设置样式
    • 进行页面样式的初始化
  • 注意 :
    • 在写样式的时候 (类选择器),如果有样式代码重复使用的时候,我们
      要提取公共类.

1.10 字体相关属性

  • Font-size : 设置文字大小
  • Font-family : 设置文字字体
  • Font-weight : 设置文字加粗
  • Font-style : 设置文字斜体
  • Line-height : 行高

1.11 Font-family

  • 直接设置汉字
    p{font-family: 微软雅黑;}
  • 设置对应字体的英文
    对应字体的英文

  • 可以设置 unicode 编码

  • Font-family 可以设置多个值;
    {font-family: "Simsum","宋体"}

1.12 Font-weight

  • 取值方式 :
    • 直接设置数字 100-900
    • bold (字体加粗) 效果与 700-900
    • normal (文字字体正常显示)
  • 注意 :
    • 文字加粗显示,推荐使用 font-weight:700;

1.13 Font-style(斜体)

  • italic 文字斜体显示
  • normal 文字正常显示

1.14 Font 属性联写

  • 用法 :

    1
    2
    font: font-style font-weight font-size/line-height
    font-family
  • 注意 :

  • font 属性联写必须有 font-size 和 font-family(其他属性可以不写)
  • font-size 和 font-family 的顺序不能换

2. 标签指定选择器

  • 用法 :
    标签名.选择器名{属性:值; 属性:值;}

3. 后代选择器

  • 特点 :
    • 标签之间必须属于嵌套关系.
  • 用法 :
    • 选择器 +空格+ 选择器{属性:值; 属性:值;…}
  • 特点 :
    • 选择器之间必须有空格
  • 关系 :
    • 父与子的关系

4. 并集选择器

  • 用法 :
    • 选择器,选择器,选择器{属性:值;}
  • 作用 :
    • 将样式集体声明,css 样式初始化.
  • 特点 :
    • 并集选择器之间必须用逗号隔开!
    • margin: 0 auto; 让盒子居中显示。

5. 作业与一些总结

作业

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.newsTitle{Text-align:center;}
.secondTitle{Text-align:center;}
.time{
color: #AABBCC;
font-size: 14px;}
.adTitle{color: #990000;font-size: 14px;}
.show{color: red;}
.search{
color: #008000;
}
.essay{
text-indent:2em;
}
.weibo{
color: #3399CC;
}
</style>
</head>
<body>
<h1 class="newsTitle">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<p class="secondTitle">
<font class="time">2014年07月16日20:11</font>
<font class="adTitle">新浪体育 评论中大奖(11人参与)</font>
<a href="http://www.w3school.com.cn">收藏本文</a>
<input class="show" type="text" value="请输入查询条件">
<input class="search" type="button" value="搜索">
<hr />
<p class="essay">
新浪体育讯 7月16日是燕京啤酒<a class="weibo" href="http://www.w3school.com.cn">[微博]</a>2014中国足协杯第三轮比赛,丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午,丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈,并且收拾行囊准备离开。在这样的情况下,丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p class="essay">
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。</p>
<p class="essay">
据记者多方了解的情况,李虎<a class="weibo" href="http://www.w3school.com.cn">[微博]</a>极其教练组近来在执教成绩上承受了不小的压力,在联赛间歇期期间,教练组曾向俱乐部提出能够多引进有实力的球员补强球队,然而由于和俱乐部在投入以及成绩指标上的分歧,李虎最终和教练组一起在比赛日辞职。</p>
<p class="essay">
这样的情况并没有影响到丽江嘉云昊队<a class="weibo" href="http://www.w3school.com.cn">[微博]</a>的队员,在比赛中丽江队在主场拼的非常凶,在暴雨之中仍然发挥出了体能充沛的优势,最终凭借点球击败了中超球队哈尔滨毅腾,顺利晋级下一轮比赛。<B>根据中国足协杯的赛程,丽江嘉云昊队将在本月23日迎战江苏舜天队。</B></p>
</body>
</html>
1…345…13
王裕杰

王裕杰

以中有足乐者,不知口体之奉不若人也.

130 日志
13 分类
24 标签
GitHub 微博 豆瓣 知乎
© 2016 - 2017 王裕杰
由 Hexo 强力驱动
主题 - NexT.Muse