HTML能力点掌握(3)

能力(技能)掌握点:
①学明白CSS如何控制样式(做出新闻的综合案例)
②学会画盒子,彻底明白标签就是盒子容器的概念(借助于a伪类能完成导航栏案例)
1)多类名选择器
类名选择器:

这个div的名字就是nav或者说div就是nav,nav就是di(div相当于一大类人,div只不过就是某些人的名字)
我们可以通过div{ }也可以通过.nav{ }来进行寻找并修改(因为两者是同一个东西)
代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类名选择器</title>
		<style type="text/css">
			/*一定要记住写下style,要不然是不会有效果的*/
			.red
			{
				color: red;
			}
			.font20
			{
				font-size: 20px;
				color: blue;
			}
		</style>
		
	</head>
	<body>
		<!--让第一个的字变大一点-->
		<div class="red font20">多类名</div>
		<!--调用这个font20是没有效果的,因为这个div里面只能拥有一个class属性-->
		<!--发现这个刷新后是显示蓝色的,再将两者的顺序颠倒的话,结果显示的仍旧是蓝色-->
		<!--但是我们可以直接在第一个class属性后面加一个空格接着加上font20就可以达到效果了,而且顺序调过来也不影响(如果两个是不同的属性类型)-->
		<div>多类名</div>
		<div>多类名</div>
		<div>多类名</div>
		<p class="red">多类名</p>
		<p>多类名</p>
		<p>多类名</p>
		<p class="red">多类名</p>
		<!--样式显示效果跟HTML元素中类名先后顺序没有关系,受CSS样式书写的上下顺序,各个类名中间用空格隔开-->
		<div>多类名</div>
	</body>
</html>

1)id选择器和通配符选择器:
W3C标准规定,在同一个页面中,不允许有相同的id对象出现,但是允许相同的class,类选择器好比是人的名字,是可以多次重复使用的,比如王伟、张伟、李伟、李娜等,id选择器好比人的身份证号码,全中国是唯一的,不得重复,只能使用一次。
Id选择器和类选择器最大的不同在于使用次数上(#定义,id调用)

通配符选择器
通配符选择器用*表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如下面的代码,使用通配符选择器定义CSS样式,清除所有的HTML标记的默认边框

*
{
		margin:0;
		padding:0;
}

分别是定义外边距和内边距的
注意:这个通配符选择器,就像我们电影明星中的梦中情人,想想它就好了,但是它不会和你过日子

2)CSS字体样式属性
Font-size:字号大小(该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少)
在这里插入图片描述
Font-family:用于设置字体,网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置成微软雅黑,可以使用如下的CSS样式代码:

p
	{
		font-family:"微软雅黑"
		<!--可以同时指定多个字体,中间用逗号隔开,表示浏览器如果不支持第一个字体就会尝试下一个,直到找到合适的字体-->
	}

常用的一些技巧:
①现在网页中普遍使用14px
②尽量使用偶数的数字符号,IE6等老式浏览器支持奇数会有bug
③各种字体之间必须使用英文状态下的逗号隔开
④中文字体如果需要加上英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体的时候,英文字体名必须位于中文字体名之前
⑤如果字体中包含空格、#、$等符号,则字体必须加英文状态下的单引号或者是双引号,例如Arial就可以不加引号,但是微软雅黑就必须加
⑥尽量使用系统默认字体,保证在任何浏览器中都能正确显示
如果font-family选项里面有多个字体种类:那么最后显示的字体的颜色却是这样显示的:
浏览器先看第一个字体有没有,如果有的话就显示这个字体,否则的话就一直执行下去直到遇到,如果都没有找到的话就选择浏览器的默认字体
Unicode编码:

在这里插入图片描述
为了照顾不同电脑的字体安装问题,尽量使用宋体和微软雅黑中文字体(使用这个Unicode码的话,浏览器的兼容问题更好)

Font-weight:字体粗细(字体加粗除了使用b和strong之外,可以使用CSS来实现,但是CSS是没有语义的)
Font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100-900(100的整数倍)
PS:数字400对应于normal,而700对应于bold,但是我们更喜欢用数字表示
Font-style:字体风格
字体倾斜除了用i和em之外,可以使用CSS来实现,但是CSS是没有语义的
Font-style属性用于定义字体风格,如设置斜体,倾斜或者是正常字体,可用属性如下:
Normal:默认值,浏览器会显示标准的字体样式

3)字体连写:
字体连写是有顺序的

4)text-decoration的语法:
属性有underline(下划线)、overline(上划线),through-line(贯穿线也叫删除线)、none(取消装饰)
在CSS中取消
5)开发者工具(Chrome)
此工具是我们的必备工具,以后代码出现了问题,按“F12”或者是“shift+Ctrl+i”打开开发者工具
菜单:右击网页空白处查看选择“检查
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
且通过选择add color就可以取色,然后可以看到它16进制的数,复制一下,就可以用到代码里面了(浏览器中知识界面显示,源代码并没有修改)
当然我们还可以通过编译器来判断错误(不同编译器的报错显示不一样,H5就是错误的话,输入一个词后面不会有“联想”服务)
小技巧:
Ctrl+滚轮可以放大开发者工具的代码大小
左边是HTML元素结构,右边是css样式
右边CSS样式可以改动数值和颜色查看更改后的效果
(可以通过上下箭头来改变字体大小)

6)后代和子代选择器:
后代选择器(包含选择器),用来选择元素或元素组的后代,写法是把外层标签写在前面,内层标签写在后面,中间用空格号分隔,内层标签成为外层标签的后代。

在这里插入图片描述
子代选择器:使用>号,选择的是亲儿子而不是选择所有的孩子(使用后代选择器较多)

7)并集和交集选择器:
使用快捷键:ul>li加上一个tab键就可以快捷的进行创建一个无序列表,使用div>p也可以快捷的创建一个基本结构,另外使用ul>li>ul>li就可以实现两重结构

		<ul>
			<li>
				<ul>
					<li></li>
				</ul>
			</li>
		</ul>

交集选择器:由两个选择器构成,其中一个是标签选择器,第二个是class选择器,两个选择器之间不能有空格,如h3.special
在这里插入图片描述

记忆技巧:交集选择器是并且的意思:既…又…的意思
比如p.one选择的是:类名为.one的段落标签(用的相对来说比较少)

并集选择器:
在这里插入图片描述
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的
标签选择器、class选择器、id选择器等都可以作为并集选择器的一部分,如果某些选择器的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的CSS样式
比如:.one,p,#text{color:#F00;}表示:.one、p、#text三个选择器都会执行颜色为红色
复合选择器:后代选择器(用空格隔开,选取子孙后代的)、子代选择器(用>隔开,选取亲儿子的)、交集选择器(标签连写div.one或者是div#two)、并集选择器(用逗号隔开,集体申明(相同样式的时候))

8)伪类选择器(用于向某些选择器添加特殊对的效果,比如给链接添加特殊的效果,比如可以选择第一个,第n个元素)
为了和之前学的类选择器相区别,类选择器是一个点,比如.demo{ },而我们的伪类用两个点,就是冒号,比如:link{ }
链接伪类选择器:

注意写的时候,顺序尽量不要颠倒,按照lvha的顺序(love hate的记忆)
:link未访问的链接
:visited已访问的链接
:hover鼠标移动到链接上
:active选定的链接

9)显示模式:
在这里插入图片描述
标签显示模式(display)
标签的类型(显示模式):HTML标签一般分为块标签和行内标签两种类型

块级元素(block-level):
每个块元素通常会占据一整行或者是多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建
常见的块元素:



.

等,其中
标签是最典型的块元素
行内元素(inline-level):内联元素不占有独立的区域,仅仅依靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式
常见的行内元素有、、、、、、、、、等,其中是最典型的行内元素
行内元素的特点:
①和相邻行内元素在一行上
②高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
③默认宽度就是它本身内容的宽度
④行内元素只能容纳文本或其他行内元素(a特殊)
注意:
①只有文字才能组成段落,因此p里面不能放块级元素,同理


这些标签都是文字类块级标签,里面不能放其他块级元素
②链接里面不能再放链接
块级元素和行内元素的区别:
块级元素的特点:
①总是从新行开始
②高度、行高、外边距以及内边距都可以控制

行内元素的特点:
①和相邻行内元素在一行上
②高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
③默认宽度就是它本身的宽度
④行内元素只能容纳文本或其它行内元素

行内块元素:(inline-block):在行内元素里面有几个特殊的标签——、、等可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是之间有空白缝隙
②默认宽度就是它本身内容的宽度
③高度、行高、外边距以及内边距等都可以控制

标签显示模式转换(display):
块转行内:display:inline;
行内转块:dispay:block;
块、航元素转化为行内块:display:inline-block;

具体的word笔记以及一些源代码还是找HTML基础(1)里面的百度网盘链接

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页