HTML+CSS学习笔记(8)- CSS选用器起名

其间,吴军大学生浅显、平易的语言给工程领域的后辈讲述了无数经历。比如书中涉嫌的“做事的法子有道和术”两种程度,道的地步就是找出题目标意念和实质,从实质上化解;而术就是意识一个化解一个,不可能从根本上解决难题。有的时候还会从理学的角度来叙述解决难题的章程,比如“简单的历史学”,在化解难点的长河中,“不难而实用”是最可行的艺术。不言而喻还有许多浩大。

标签:HTML+CSS

先是本是吴军大学生的书,全书介绍了有的数学原理和数学模型在谷歌(Google)技术中的应用,其中也会波及一些算法或模型的发明者的乐善好施事迹,那有的斐然更能唤起我的趣味。比如,书中涉及谷歌的Amit
Singhal(阿米特*辛格博士)是Google的“AK-47”的设计者。总所周知,AK-47冲锋枪的安顿简约实用、不易损坏、可看重性好还要操作简单,算法也是那样,不难实用最得力,那就是书中关系的“简单艺术学”的缓解难点的措施。任何领域都可以跟医学挂上勾,军事学和美学是有着科目的皇上也不为过,万学归宗吧。

子接纳器

还有一个比较可行的精选器子拔取器,即当先标志(>),用于选取指定标签元素的首先代子元素。如左侧代码编辑器中的代码:

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

那行代码会使class名为food下的子元素li(水果、蔬菜)参预藏蓝色实线边框。
如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul class="food">
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

《数学之美》 / 吴军 著

怎么样是选拔器?

每一条css样式阐明(定义)由两有的组成,方式如下:

选择器{
    样式;
}

在{}以前的有的就是“拔取器”,“选取器”指明了{}中的“样式”的职能对象,也就是“样式”成效于网页中的哪些要素

《微信公众平台公司应用开发执行》 / 刘婕 著

分组选拔符

当您想为html中多少个标签元素设置同一个体裁时,可以行使分组拔取符(,),如下代码为左边代码编辑器中的h1span标签同时设置字体颜色为绿色:

h1,span{color:red;}

它一定于下边两行代码:

h1{color:red;}
span{color:red;}

固然如此吴军大学生试图将内容长远浅出,但依然有许多内容不可以消化,所以基本上算是翻阅。但是确实也通晓了数学的妙处,对本身的职业生涯有很大指点功效,毕竟知道一流的电脑地理学家都在商量些什么。

类接纳器

类选用器在css样式编码中是最常用到的,如上边代码中的代码:可以兑现为“胆小如鼠”、“勇气”字体设置为革命。

语法:

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

注意:

1、英文圆点早先

2、其中类选器名称可以肆意起名(但不要起汉语)

采取办法:

率先步:使用极度的标签把要修饰的情节标记起来,如下:

胆小如鼠

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

胆小如鼠

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

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

正如代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
    color:red;
}
.setGreen{
    color:green;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
    <img src="http://a.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=e655190ad2160924dc70aa1de43719c2/bd315c6034a85edfdd19807f4b540923dc5475d0.jpg" >
</body>
</html>

如今一段时间读的两本技术的书,翻阅达成,一本是《数学之美》,一本书《微信公众平台公司应用开发实战》,以下是分享的读书笔记:

类和ID选拔器的差异

学习了类选择器和ID选用器,我们会意识她们之间有广大的形似处,是否双边可以通用呢?大家不用心急先来统计一下他们的相同点和不相同点:

相同点:能够动用于其余因素
不同点

1、ID选用器只可以在文档中应用一次。与类接纳器不一致,在一个HTML文档中,ID选拔器只好使用四遍,而且仅四遍。而类选拔器可以动用频仍。

下边代码是未可厚非的:

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

而上面代码是错误的:

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

2、可以行使类选拔器词列表方法为一个要素同时安装三个样式。我们可以为一个元素同时设多个样式,但只好用类选取器的不二法门完成,ID选取器是不得以的(无法选择ID 词列表)。

上面的代码是正确的(完整代码见上边代码)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了三年级下学期时,我们班上了一节公开课...</p>

下面代码的功效是为“三年级”七个文字设置文本颜色为革命并且字号为25px。

下边的代码是不得法的(完整代码见上边代码)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了三年级下学期时,我们班上了一节公开课...</p>

下边代码不可以已毕为“三年级”多个文字设置文本颜色为革命并且字号为25px的效益。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类和ID选择器的区别</title>
<style type="text/css">
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
     <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

</body>
</html>

吴军大学生在书中的语言的幽默、幽默也是诱惑我的地方之一。比如,在关乎卡奔塔利亚湾军大将山本五十六时,他在括号里备注“他伯伯56岁时生的他,所以起名五十六”。令人在读专业书的长河中也能满面红光一刻,大师才有的境界。

伪类接纳符

更有趣的是伪类拔取符,为啥叫做伪类选拔符,它同意给html不设有的标签(标签的某种情状)设置样式,比如说大家给html中一个标签元素的鼠标滑过的情形来设置字体颜色:

a:hover{color:red;}

地点一行代码就是为 a
标签鼠标滑过的场馆设置字体颜色变红。那样就会使第一段文字内容中的“胆小如鼠”文字参加鼠标滑过字体颜色变为藏红色特效。

至于伪选取符:
至于伪类选拔符,到近来为止,可以匹配所有浏鉴器的“伪类选择符”就是 a
标签上应用 :hover
了(其实伪类选拔符还有很多,更加是css3中,不过因为不可以协作所有浏览器,所以只是讲了这一种最常用的)。其实:hover
可以放在任意的标签上,比如说
p:hover,不过它们的包容性也是很糟糕的,所以现在比较常用的或者a:hover的组合。

 <p class="first">三年级时,我还是一个<a href="http://www.baidu.com">胆小如鼠</a>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

最后,借用吴军大学生在《浪潮之巅》中的一句话截至:在人类命局降临的壮烈眨眼之间间,市民的凡事美德—小心、顺从、耐劳、谨慎,都无济于事,它始终只须要天才人物,并且将她构建成不朽的影象。命局鄙视地把心神不定的人拒之门外。命局—那大千世界的另一位神,只愿意用热烈的胳膊把勇敢者高高举起,送上大胆们的西方。

通用选拔器

通用选用器是意义最精锐的接纳器,它使用一个(*)号指定,它的功力是匹配html中所有标签元素,如下使用上面代码应用html中自由标签元素字体颜色全体装置为革命:

* {color:red;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 选择符</title>
<style type="text/css">
* {color:red; font-size:20px;}


</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
</body>
</html>

比方从数学和技能的角度上说,书中的内容真的难以从正式的角度评论,对我而言有点深奥,只询问其奥义也不敢说驾驭了。希望随着自己的论争基础和技能经验越来越成熟的时候,那时,我的业内素养也会趁着升高。那也是作者在后记中希望读者形成的一些,他这么写道:选择不当的模型在一定的场合,或许勉强有效,就比如大家介绍的地心说一样,毕竟也使用了几千年。可是错误的模子终究是远离真理的,其负面影响会日益显现出来。其结果不仅在于远离了正确的结果,而且常常把原先不难的业务弄得很复杂,以至于最后要完蛋。在程序或微机的社会风气里,小编试图教给大家,科学的模子和办法才是没错的缓解难题之“道”,而不是独自停留在“术”的层系上。领会基本的专业技能要在争鸣基础之上,才能作育出正规的功夫,多了解理论须要性很大。

标签选取器

标签采取器其实就是html代码中的标签。如上面代码中的<html><body><h1><p><img>。例如下边代码:

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
h1{
    font-weight:normal;
    color:red;
    }
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
    <img src="http://a.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=e655190ad2160924dc70aa1de43719c2/bd315c6034a85edfdd19807f4b540923dc5475d0.jpg" >
</body>
</html>

其次本的撰稿人是刘婕,那本书买来是为着拓展自己的技艺视野,读完事后认为价值不大。开发集团微信公众平台运用,通晓基本的微信API和一些焦点的次第设计的怀恋就可以形成书中牵线的技艺层次。不推荐阅读,假使想上学微信公司应用开发的同桌,可以直接去微信的官网领悟API,结合自己的档次,封装一套适合项目工作须要的框架。个人觉得,那本书整本都只是包裹微信的API而已。

ID选择器

在广大上边,ID采用器都接近于类采纳符,但也有部分重大的分别:

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

2、ID接纳符的前头是井号(#)号,而不是英文圆点(.)。

下边代码中就是一个ID选用符的完全实例。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
    color:red;
}
#setGreen{
    color:green;
}

</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

</body>
</html>

包含(后代)选择器

包涵选取器,即进入空格,用于选取指定标签元素下的后辈元素。如xia:

.first  span{color:red;}

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

请留意那么些接纳器与子选拔器的界别,子采纳器(child
selector)仅是指它的从来后代,或者您可以清楚为听从于子元素的第一代子孙。而后人拔取器是效用于所有子后代元素。后代选拔器通过空格来拓展抉择,而子采用器是因而“>”进行采纳。

总结:>意义于元素的第一代后代,空格功效于元素的有后代。
如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}

.food li{
    border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/   
}
</style>
</head>
<body>
 <p class="first">三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图