CSS样式的优势

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

第一步:把这三个短语用<span></span>括起来。

第二步:写入下列代码:

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:red;
}
</style>
</head>
<body>
    <p>xx网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>

效果:

时间: 2024-08-02 12:42:08

CSS样式的优势的相关文章

CSS样式:把一个段中的几个短语颜色设置成不同于文本的颜色,用span标签。

<!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> &l

Web前端开发基础 第四课(认识CSS样式)

CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img> 类选择器 ID选择器 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标

CSS样式

CSS的优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使得页面布局更加灵活 减少网页的代码量,增加网页的浏览速度,节省网络带宽 运用独立于页面的CSS,有利于被搜索引擎收录 CSS基本语法结构: 语法:h1{ font-size:16px; 属性:值; } style标签: <style type="text/css"> h1{ font-size:16px; 属性:值; } </style> CSS选择器: 标签:HTML标签作用为标签选择器的

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="

4.1 什么是CSS样式表

上一章的课程里,我们学习了表单以及表单中的各种元素,常用的表单元素有:文本框( text).密码框(password).单选按钮(radio).复选框(checkbox).列表框(<select><option>).按钮(button.submit和reset).多行文本框(<textarea>).另外,还学习了框架,包括框架的基本结构.如何创建多个复杂的窗口.框架窗口之间的链接等. 从本章开始,我们将学习CSS(Cascading Style Sheet,层叠式样式表

网页设计—CSS样式基础

1.CSS样式表 (1)行内式 行内式也称为内联样式,是通过标记的style属性来设置元素的样式. 语法格式:<标记名 style="属性1:属性值;属性2:属性值;属性3:属性值;">内容</标记名> 语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式. (2)内嵌式 内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义. 语法格式:<head>

css样式中position和_position的区别

position:fixed; 相对于浏览器窗口绝对定位._position:absolute; 只有IE6能识别, IE6不支持fixed, 所以针对IE6使用absolute绝对定位, 一般还要配套一个expression脚本来实现 属性expression_r:针对ie6写的 CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心. 有了CSS的自定义属性expression_

css样式简介

<!-- CSS样式: 当读到一个样式的时候,浏览器会根据它来格式化HTML文档 如何插入样式表: 我们应该知道什么是样式表,样式表有哪几类,我们用来格式化HTML文档的 CSS文件就是样式表,样式表可以分为三类: 外部样式表 内部样式表 内联样式表 那么这三类样式表分别是什么意思,我们通过几个例子来为大家解析一下: 首先是外部样式表: 当我们的样式想应用于很多的界面的时候,外部样式表是我们理想的选择,使用外部样式表我们可以通过改变一个文件来改变多个界面的外观, 怎样来使用外部的样式表: 我们在

HTML引入CSS样式的四种方法

在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式          行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.2.嵌入式          嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css">