「测试开发全栈-HTML」(11)css字体复合属性

「测试开发全栈-HTML」(11)css字体复合属性和小结

体属性可以把以上文字样式综合来写，这样可以更节约代码。

一起来看下效果:

这里设定的整体样式为:

具体的代码为:

<!DOCTYPE html>

<head>

<title>CSS样式之复合属性和总结</title>

<style>

div {

font-style: italic;

font-weight: bold;

font-size: 16px;

font-family: "Microsoft YaHei";

}

</style>

</head>

<body>

<div>今天风真大，还需要去上课，我们一起去看看吧</div>

</body>

</html>

一个属性一行代码，为了节约，可以使用一行将所有属性都展示，具体语法为:

body {

font: font-style font-weight font-size/line-height font-family;

}

按照上面的语法规则，我们重新写下代码，看下效果:

对应的代码为:

<!DOCTYPE html>

<head>

<title>CSS样式之复合属性和总结</title>

<style>

.font {

font-style: italic;

font-weight: bold;

font-size: 16px;

font-family: "Microsoft YaHei";

}

.font-new {

font: italic bold 16px "Microsoft YaHei";

}

</style>

</head>

<body>

<div class="font">今天风真大，还需要去上课，我们一起去看看吧</div>

<div class="font-new">都是你的错，轻易爱上我，让我不知不觉满足被爱的虚荣</div>

</body>

</html>

下面的代码就是按照规则新写的

.font-new {

font: italic bold 16px "Microsoft YaHei";

}

可以看到是可以使用的。复合属性，简写的要求

使用font属性时，必须按照语法格式中的顺序去书写，不能更换顺序，并且各个属性之间以空格隔开，最后需要有分号结尾。不需要设置的属性值可以忽略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。

我们来实验一下:

去掉font-style

斜体不展示了，正确

2.去掉font-weight

可以看到粗体没有了，剩余的显示正常

3.如果去掉font-size

发现不仅font-size没有起作用，所有的属性都没起作用

4.如果去掉font-family

同样也是都没有起作用

5.如果只有font-size和font-family

可以看到样式被修改了，这里为了方便查看，将16px修改为30px了

.font-new {

font: 30px "Microsoft YaHei";

}

接下来对字体属性做个总结：

font-size 字号单位是px像素，必须要加上单位

font-style 字体样式让字体倾斜是italic,正常显示是normal,一般用normal多

font-weight 字体粗细一般用数字来展示，如400是normal, 700是bold,不需要单位

font-family 字体按照约定来写字体，比如微软雅黑，宋体等

font 字体连写字体连写是有顺序的，不能随便更换顺序;其中字号和字体必须同时出现

好的，今天上午先到这里，下午我们再聊

初识CSS第一天的时候学到了css选择器，知道了大体分为基础和复合两种选择器。当时详细了解并掌握了基础选择器中的标签选择器、类选择器、ID选择器和通配符选择器四种。那么今天先简单了解一下复合选择器吧。

CSS复合选择器

复合选择器是指对两个或多个基础选择器进行组合形成的。

作用：可以更准确高效地选择目标元素。

分类：后代选择器、子选择器、并集选择器、伪类选择器。

后代选择器

又称包含选择器。也就是说两个元素之间为包含关系，父元素和子元素。子元素就是父元素的后代。只需要使用标签名来设置属性，在目标元素中不需要调用。

语法：父标签子标签 {样式声明}。

两个标签之间空格分开。

代码示例：

<html>
	<head>
  	<title>后代选择器</title>
  	<style>
  			ol li {
            color: red;
        }
        ol li a {
            text-decoration: none;
        }
  	</style>
  </head>  
	<body>
  	<ol>
        <li>这组标签就是非常好的复合选择器示例。ol标签是父标签,li标签是子标签。</li>
        <li>这组标签就是非常好的复合选择器示例。ol标签是父标签,li标签是子标签。</li>
        <li>这组标签就是非常好的复合选择器示例。ol标签是父标签,li标签是子标签。</li>
        <li>
            <a href="#">我是第三层元素，孙子元素。</a>
        </li>
    </ol>
  </body>
</html>

运行界面：

子选择器

又称子元素选择器，他只能选择作为某元素的最近一级子元素。

语法：父元素>子元素 {样式声明}

两个标签之间使用>隔开。

代码示例：

<html>
	<head>
  	<title>子选择器</title>
  	<style>
  			div>a {
            text-decoration: none;
            color: red;
        }
  	</style>
  </head>  
	<body>
  	<div>
        <a href="#">div子元素1</a>
        <p>
            <a href="#">p元素的子元素，div的孙子元素。</a>
        </p>
    </div>
  </body>
</html>

运行界面：

并集选择器

可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

语法：元素1，元素2,，元素3 {样式声明}。

标签之间使用英文逗号隔开，最后一个元素后不需要加英文逗号。

代码示例：

<html>
	<head>
  	<title>并集选择器</title>
  	<style>
  			.Bj,
        p {
            color: purple;
        }
  	</style>
  </head>  
	<body>
  	<div class="Bj">并集选择器1</div>
    <p>并集选择器2</p>
    <p>并集选择器3</p>
  </body>
</html>

运行界面：

伪类选择器

为元素添加特殊效果。

链接伪类：

语法：

“a:link”：设置没有被点击跳转的链接，默认显示的状态。

“a:visited”：设置已经被点击跳转的链接。

“a:hover”：设置鼠标悬停在链接上所显示的样式。

“a:active”：设置鼠标已经按下但还未弹起跳转的链接样式。

代码示例：

<html>
	<head>
  	<title>链接伪类选择器</title>
  	<style>
  			/* 还没有被点击跳转的链接状态 */
        a:link {
            color: black;
        }
        /* 已经点击且跳转的链接状态 */
        a:visited {
            color: red;
        }
        /* 鼠标悬停还没有点击的链接状态 ，实际开发中常用链接状态*/
        a:hover {
            color: aqua;
        }
        /* 正在点击还没有弹起跳转的链接状态 */
        a:active {
            color: green;
        }
  	</style>
  </head>  
	<body>
  	<!-- 伪类选择器 -->
    <!-- 链接伪类 -->
    <a href="#">链接伪类的链接</a><br>
  </body>
</html>

表单焦点伪类：

用于选取获得焦点的表单元素。这个选择器主要针对表单元素。

语法：

input:focus {样式声明}

代码示例：

<html>
	<head>
  	<title>表单焦点伪类选择器</title>
  	<style>
  			 /* 表单焦点伪类 */
        /* 获取表单元素的光标指向，光标在哪个表单元素上，那个表单元素就出现设置的样式 */
        input:focus {
            background-color: pink;
        }
  	</style>
  </head>  
	<body>
  	<input type="text">
    <input type="text">
    <input type="text">
  </body>
</html>

运行界面：

今天学习的内容就到这里了，明天继续，加油加油！

1)HTML基础与加强

HTML语言,HTML语言背景知识,HTML全局标签,HTML格式标签,HTML文件标签,HTML超链接标签,HTML图像标签,HTML框架标签,HTML客户端图像地图,HTML表格标签,HTML帧标签,HTML表单标签,HTML头元素,HTML分区标签

(2)XHTML基础与加强

XHTML与 HTML的差异,XHTML语法,XHTML DTD,XHTML验证,XHTML模块,XHTML属性,XHTML事件,XTHML结构化

(3)HTML5设计与应用

HTML5介绍,HTML5多媒体处理,HTML5画布,HTML5 Web存储技术,HTML5表单,HTML5 属性和事件HTML5的常用标签(比如:applet标签、article标签、aside标签、audio标签、canvas标签、datalist标签、details标签等)

(4)CSS基础与加强

CSS 简介,CSS基础语法,CSS 派生选择器,id 选择器,CSS类选择器,CSS盒子模型

CSS背景、文本、字体、边框、外边距、内边距、列表、表格CSS 高级: CSS 尺寸、分类、定位、伪类、伪元素、媒介类型

编辑

请点击输入图片描述

(5)DIV+CSS设计与应用

使用知名网站的首页深入剖析DIV+CSS的WEB标准：盒子模型经典案例-优酷首页面、仿sohu首页面布局、可爱屋网站首页面。涉及知识点包括: (CSS定位的四种方式、左浮动、右浮动、清除浮动、标准流和非标准流、设置对象的层叠顺序、块元素和行元素的转换等)

(6)Javascript基础语法:

Javascript基本介绍、Javascript的发展史、Javascript运行原理剖析、Javascript特点、

Javascript的标识符、Javascript基本数据类型(数值类型、布尔类型、字符串类型)、

Javascript复合数据类型简介(数组、对象)、Javascript特殊数据类型(NULL、undefine)、

定义变量、初始化、赋值、数据类型转换的两种方式(自动转换、强制转换)、Javascript的运算符(算术运算符、关系运算符、逻辑运算符)、Javascript的位运算和移位运算

(7)Javascript三大流程控制

顺序控制、分支控制(单分支: if语句、双分支: if-else语句、多分支 if-else if-else 语句, switch-case-default语句)、循环控制(for语句、while语句、do-while语句)、在ie和firefox如何调式Javascript

(8)Javascript函数

函数基本概念、函数的定义、函数的调用方式及调用过程深度剖析、函数使用细节讨论、使用Function类创建函数、函数实际运用(打印金字塔、九九乘法表)、函数的递归调用、

Javascript常用系统函数使用(encodeURI、decodeURI、eval、parseInt、parseFloat、isNaN等)

(9)Javascript数组

数组的基本使用、使用for/while遍历数组、数组实际运用(计算班级平均分)、二维数组的基本使用、使用for遍历二维数组、对二维数组转置处理、数组排序介绍、冒泡排序、顺序查找和二分查询法

(10)事件驱动

Javascript的Event-Driven机制、事件源、事件处理程序、事件名称、事件对象是什么、

事件类型(鼠标事件、键盘事件、HTML事件、其它事件)、Javascript访问CSS技术、

事件驱动的浏览器兼容性处理、常用的18个事件(onblur、onchange、onfocus、onkeydown、onmousedown等) 综合案例(Javascript版计算器)

(11)DOM编程

DOM编程介绍(HTML DOM与XML DOM)、DOM编程实例入门、BOM介绍、DOM对象介绍、window对象详解、history对象详解、location对象详解、navigator对象详解、screen对象详解、event对象详解、document对象详解、body对象详解、style对象详解、WEB版坦克大战游戏、forms对象(集合)、from对象、images对象(集合) 、img对象、links对象(集合)、link对象、all对象(集合)、table对象详解、tableRow对象和tableCell对象、基于table对象的用户管理系统

在线咨询

上一篇：明明都是正常的文件，为什么被提示是木马呢？
下一篇：python 模块BeautifulSoup 从HT

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「测试开发全栈-HTML」(11)css字体复合属性

CSS复合选择器

您的项目需求