html:(22):认识css样式和css的优势

认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如下列代码：

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

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{font-size:20px;/*设置文字字号*/color:red;/*设置文字颜色*/font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

运行结果

CSS样式的优势

为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器13行）

第二步：写入下列代码：（见右边代码编辑器7-8行）

span{color:red;
}

观察结果窗口文字的颜色是否变为红色了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
span{color:blue;
}
</style>
</head>
<body><p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

运行结果

html:(22):认识css样式和css的优势相关推荐

html的css样式大全,css样式有哪些？
css样式有3种,分为:内联式css样式.嵌入式css样式.外部式css样式.下面本篇文章就来给大家介绍一下css样式,希望对大家有所帮助. 对CSS三种样式定义及其实例: 内联式css样式内联式c ...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
php控制 css样式,div css样式控制案例
摘要:html> div -css样式控制案例 #box{width:100px; height: 100px; html> div -css样式控制案例 #box{width:100px ...
CSS样式规则-CSS结构的特点
要想熟练地使用CSS对网页进行修饰,首先要了解CSS样式规则.设置CSS样式的具体语法规则如下. 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; -} 在上面的样式规则中,选择器用 ...
Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
uni-app封装自己常用的css样式-----自定义css的样式 (便于开发)-----原理简单
我们在开发uni-app的时候,有的时候我们的css代码是常常需要用到的,比如说,比如说居中的问题 .center {position: absolute;top: 50%;left: 50%;tra ...
html结合css样式作用,css样式表可以实现什么功能？
css(Cascading Style Sheets,层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式 ...
字体css样式在线,CSS Fonts(字体)
CSS Fonts(字体) CSS字体属性允许您为字体设置各种样式,例如文本的字体系列,大小和粗体,变体等. 字体属性在CSS样式为文本内容的字体,如提供几个属性:font-family,font- ...
在css样式中隐藏元素,用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...

html:(22):认识css样式和css的优势

认识CSS样式

CSS样式的优势

html:(22):认识css样式和css的优势相关推荐

最新文章

热门文章