html学习日记part09

认识CSS样式

它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS代码语法

css 样式由选择符声明组成,而声明又由属性组成,如下图所示:

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

p{font-size:12px;color:red;}

注意:

1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。

2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:

p{
   font-size:12px;
   color:red;
}

CSS注释代码

就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。就像下面代码:

内联式css样式,直接写在现有的HTML标签中

CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。

内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里,下面这种写法是错误的:

<p>这里文字是红色。</p style="color:red">

并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式css样式,写在当前的文件中

现在有一任务,把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签加入sytle="font-size:18px"语句),本小节讲解一种新的方法嵌入式css样式来实现这个任务。

嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:

<style type="text/css">
span{
color:red;
}
</style>

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

外部式css样式,写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href="base.css" rel="stylesheet" type="text/css" />

注意:

1、css样式文件名称以有意义的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

三种方法的优先级

有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况

1、使用内联式CSS设置“超酷的互联网”文字为粉色

2、然后使用嵌入式CSS来设置文字为红色

3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。

其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)

但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,什么是权值呢?在后面的9-2小节中会讲解到。

什么是选择器?

每一条css样式声明(定义)由两部分组成,形式如下:

选择器{
    样式;
}

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

标签选择器

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

类选择器

类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法:

.类选器名称{css样式代码;}

注意:

1、英文圆点开头

2、其中类选器名称可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>胆小如鼠</span>

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span class="stress">胆小如鼠</span>

第三步:设置类选器css样式,如下:

.stress{color:red;}/*类前面要加入一个英文圆点*/

ID选择器

在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:

1、为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

右侧代码编辑器中就是一个ID选择符的完整实例。

类和ID选择器的区别

学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:

相同点:可以应用于任何元素
不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

下面代码是正确的:

 <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的:

 <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

子选择器

还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

包含(后代)选择器

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

* {color:red;}

伪类选择符      好玩

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符:

关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

分组选择符

当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

h1,span{color:red;}

它相当于下面两行代码:

h1{color:red;}
span{color:red;}
				
时间: 2024-10-13 07:11:13

html学习日记part09的相关文章

学习日记之状态模式和Effective C++

状态模式(State):当一个对象内在状态改变时,允许改变其行为,这个对象看起来像是改变了其类. (1),状态模式主要负责解决的是当控制一个对象转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化. (2),状态模式的好处是将与特定状态相关的行为局部化,并且将不同状态的行为分割开来. (3),将特定的状态相关的行为都放入一个对象中,由于所有与状态相关的代码都存在于某个ConcreteState中,所以通过定义新的子类可以很容易地增加新的状态和

学习日记

五一耍了三天,自己的计划有泡汤,那种制止力哪里去了,不过我认真起来还有有废寝忘食的时候,不过希望这种时候多一点,回家妈妈告诉我,她给老师打电话了的,老师说了我的一些情况,不过我没有老师说的那么好,学习在班上算中等.我觉得还算不上吧!任重而道远吧. Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置文件中很多变量是经常改变的,这样做也是为了方便用户,让用户能够脱离程序本身去修改相关的变量

学习日记之解释器模式和Effective C++

解释器模式(interpreter):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. (1),如果一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各个实例表述为一个简单语言的句子.这样可以构建一个解释器,该解释器通过解释这些句子来解决该问题. (2),当一个语言需要解释执行,并且你可将该语言中的句子表示为一个抽象的语法树时,可使用解释器模式. (3),容易改变和扩展文法,因为该模式使用类来表示文法规则,你可以使用继承来改变和扩展该文法

学习日记之中介者模式和Effective C++

中介者模式(Mediator):用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变他们之间的交互. (1),中介者模式很容易在系统中应用,也很容易在系统中误用.当系统出现多对多交互复杂的对象群时,不要急于使用中介者模式,而要反思你在系统的设计上是不是合理. (2),中介者的出现减少了各个对象的耦合,使得可以独立地改变和复用各个对象和中介者. (3),由于把对象如何协作进行了抽象,将中介者作为一个独立的概念并将其封装在一个对象中,这样关注

学习日记之职责链模式和Effective C++

职责链模式(Chain of Responsibility):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连成一条链,并沿着该条链传递该请求,直到有一个对象处理它为止. (1),当客户提交一个请求时,请求时沿着链传递直到有一个 ConcreteHandler 对象负责处理它. (2),接收者和发送者都没有对方的明确信息,切链中的对象自己也不知道链的结构.结果是职责链可简化为对象之间的连接,它们仅需保留一个指向其后继者的引用.而不惜保留它所有的候选接收者的引用

学习日记之单例模式和Effective C++

单例模式(Singleton):保证一个类仅有一个实例,并提供一个访问它的全局访问点. (1),通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化多个对象.一个最好的办法就是,让类自身负责保存它的唯一实例.这个类可以保证没有其他实例被创建,并且它可以提供一个访问该实例的方法. (2),lock 是确保当一个线程位于代码的临界区时,另一个线程不进入临界区.如果其他线程试图进入锁定的代码,则它将一直等待,知道该对象被释放. (3),双重锁定解决效率问题. (4),C#与公共语言运行库

学习日记之迭代器模式和Effective C++

迭代器模式(Iterator):提供一种方法顺序访问一个聚合对象的各个元素,而又不暴露该对象的内部表示. (1),当需要访问一个聚合对象,而且不管这些对象是什么都需要遍历的时候,你就应该考虑迭代器模式. (2),你需要对聚集有多种方式遍历时,可以考虑用迭代器模式. (3),当遍历不同的聚集结构,应提供如开始.下一个.当前项等统一的接口. (4),迭代器模式就是分离了集合对象的遍历行为,抽象出一个迭代器来负责,这样即可以做到不暴露集合的内部结构,又可让外部代码透明地访问集合内部的数据. Effec

学习日记之适配器模式和Effective C++

适配器模式(Adapter):将一个类的接口转换为客户希望的另一个接口.Adapter 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. (1),系统的数据和行为都正确,但接口不符时,我们应该考虑适配器模式,目的是使控制范围之外的一个原有对象与某个接口匹配.适配器模式主要应用于希望复用一些现存的类,但是接口又与复用环境要求不一致的情况. (2),使用一个已经存在的类,但如果他的接口,也就是他的方法和你的要求不相同时,经营该考虑适配器模式. (3),两个类所做的事情相同或相似,但是具

工厂方法模式和Effective C++学习日记

简单工厂模式VS工厂方法模式: 简单工厂模式:最大优点在于工厂类中必须包含必要的逻辑判断,根据客户端选择条件动态实例化相关类,对于客户端来说,去除了与具体产品的依赖. 工厂方法模式(Factory Method),定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法模式使一个类的实例化延迟到其子类. 工厂方法模式实现时,客户端需要决定实例化哪一个工厂来实现相应的类,选择判断的问题还是存在的,也就是说,工厂方法模式把简单工厂的内部逻辑判断移动了客户端代码来进行.想要加功能,在简单工厂模式