当web开发还是一项新技术的时候,无论定义网页内容还是定义网页样式,都是使用的HTML语言,HTML的内容和样式没有区分开,如古老的HTML样式:
<H3 COLOR=RED><CENTER>样式</CENTER></H3>
其中color表示颜色,center让文字居中,不是目前规范的书写形式,而且旧的HTML标签都是大写的,web开发人员还需要来回切换大小写,所以很多人认识到了这种开发方式并不理想。
Web开发人员想开发一种新的语言,把表示样式的代码从HTML中分离出来,并且创建一种规则来定义HTML标签要显示成什么样子,这门语言叫做CSS,CSS是用来描述HTML标签应该如何显示的一个代码。如:
<h3>样式</h3>
用CSS可以让h3标签显示成绿色,让h3字体在大一点,让h3有一个下划线,可以统一字体的显示样式等。
CSS样式
CSS的全称叫做 Cascading Style Sheets 级联样式表,CSS的工作方式依赖于"选择器"可以选择HTML标签,并且修改这些标签的样子。
选择器的类型有:
1、类型选择器:不带尖括号的标签名,最简单的选择器
类型选择器
定义了一个P标签,如果想在CSS中选择这个标签,首先写上字母P,然后选择要定的属性如text-decoration,并设置这个属性的属性值为underline下划线,在浏览器中这个段落就会显示下划线。
类型选择器
使用选择器的时候我们必须要遵守选择器的特殊语法规则:
选择器名字后面是一个开始的大括号,属性和属性值中间是冒号,属性值后面是分号,这里面任何一部分都不能丢掉,否则CSS无法正常工作,并且要注意标点符号全部是英文半角的,最后在所有的属性列表后面是一个结束的大括号,大括号的作用就是可以在里面写很多属性,如图:
类型选择器
显示结果为带下划线的红色字体段落:
类型选择器
在CSS中使用标签名选择标签的时候,类型选择器会作用在所有同名标签中。所以这里只定义额一CSS样式,它会作用在所有的P标签中。
2、派生选择器
可以让CSS标签作用在很小的范围内,如下图,只让CSS作用在li标签中,所以选择ul标签中的li标签即可。
派生选择器
3、伪类选择器
1)在原有选择器的基础上添加一个限定条件,当某种情况发生时在选择这个标签。如下图,首先定义个a的类型选择器,让页面中所有的超链接下划线都不显示,然后通过派生选择器控制鼠标的动作,当鼠标移上去的时候,超链接文字显示下划线并显示为深蓝色。
伪类选择器
伪类选择器
这条规则只有当鼠标放到超链接上停留的时候才会被应用,因此当某种情况发生时候伪类选择器才会被应用在某个标签上。
a的伪类选择器一共有四种:
:link 未被访问的链接的样式;和a标签相同时,并且同时存在的时候会覆盖a标签
:hover 鼠标移动到超链接上的时候
:active 选择器用于活动链接,被选定的超链接。
:visited 已被访问的超链接,
注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
2)使用伪类选择器缩小选择范围
:first-child 缩小标签的选择范围,如图:
如果一个标签后面还接了一个子标签,在子标签后面冒号:first-child,说明这里只选择了子标签中的第一个标签,可以看到浏览器中有序列表中的第一个li子元素"北京"颜色为紫色。
伪类选择器
伪类选择器
CSS样式
在head标签中添加style子标签,在style标签里写一个属性type="text/css",这样浏览器就知道当页面显示出来的时候,需要把style中的CSS代码应用到HTML中,因此可以在style标签中创建CSS规则。
css样式
每天进步一点点,跟着教头学开发。
ss是一种用来为Html文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。学习网站W3school。
css的引用样式:
一:style标签(内联样式)
通过在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的css代码。
二:外部引用css文件(外联样式)
新建一个css文件
在head标签中间新建一个link标签,通过href属性设置外部的css文件地址。rel=“stylesheet”表示我们引用的一个样式表(css文件)。
三:标签内部style属性(行内样式)
在开始标签的内部可以设置一个叫做style的属性,属性的双引号存放该元素代码的css样式(不推荐使用)。
一般用的就是通过link标签来引入外部css文件来修改样式,一般修改样式有字体,颜色,大小,文本居中,间距等。
叠样式表 (CSS) 是一种编程语言,可用于确定电子文档的设计。 借助简单说明(以清晰的源代码形式呈现),可以根据需要调整布局、颜色和版式等网站元素。 由于级联样式表,文档的语义结构和内容不受影响。 CSS 出现于 20 世纪 90 年代中期,现在被认为是万维网上的标准样式表语言。
CSS 与 HTML 一样,是万维网的核心语言之一。 当您使用 HTML 将文本添加到网站并按语义构建其结构时,您可以使用 CSS 定义其内容的设计。 虽然 HTML 和 CSS 结合使用,但 CSS 设计指令和 HTML 元素是分开存在的。 这意味着即使没有 CSS,机器也可以读取电子文档。 在 CSS 的帮助下,浏览器内容可以在视觉上准备好并以吸引人的方式呈现。
CSS 是一种“生活标准”,由万维网联盟继续开发。 因此,总是有新的功能和实际应用有待发现。 广泛应用的样式表语言出现于 20 世纪 90 年代。 使用样式表来显示 Web 内容的想法在当时已不再是全新的。 但 CSS 与 HTML 中已存在的其他面向显示的元素在一个重要方面有所不同:用户现在可以选择为跨多个文档和单个样式表的元素组定义设计规则。
定义:CSS(层叠样式表)
用于网站视觉设计的编程语言。 例如,使用层叠样式表,您可以确定显示 HTML 元素的字体、大小或颜色。
一个成功的网站不仅取决于内容,还取决于良好的设计。 用户很快就会对不用户友好或结构良好的网站失去兴趣。 在这里,CSS 提供了一系列纯 HTML 中不提供的设计选项。
例如,CSS 允许您集中控制某些规范。 这意味着可以使用单个命令来识别单个文档中的相似元素(例如所有超链接或图像)并对其进行格式化。 设计指令不必采用 HTML 文档本身内部样式表的形式。 如果将 CSS 指令保存在外部样式表(即单独的文件)中,则这也可以用于其他文档。
除了与 HTML 元素的颜色、形状和排版相关的基本显示指令外,CSS 中现在还有更复杂的模块。 例如,使用这些,您可以根据输出媒体定义动画或不同的表示形式。 这样,可以为所有可能的媒体以相同的方式准备相同的 HTML 文档。 由于本文档中的内容和设计是分开的,因此网站的代码更加清晰。 相关的样式语言 SASS 提供了更多的可能性,但它并没有完全取代 CSS。
CSS 语句确定电子文档中的元素应具有的值或属性。 在其基本结构中,该指令由选择器和大括号组成。 声明列在括号内,并用分号分隔。 每个声明由名称、冒号和特定值组成。 在最终声明之后和右括号之前,可以添加另一个分号,但这不是强制性的。 例如,下面示例中的 CSS 指令要求标题 h1 以蓝色显示,字体大小为 12:
h1 {color:blue; font-size:12px}
可以使用内部和外部样式表将 CSS 合并到电子文档中。 此外,可以使用内联样式将属性直接放置在元素的 HTML 源代码中。 下面,我们概述了将 CSS 集成到 HTML 中的三种方法。
在外部样式表中,CSS 指令通过“.css”结尾在外部文件中定义,并通过“link”标签集成到 HTML 文件中。 这是最常见的方法,因为内容和设计完全分开,并且可以轻松进行更改。 该链接在 HTML 文档的“head”区域中创建,如下所示:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
您可以在此处将所有 CSS 指令添加到 HTML 文件中。 请注意,这些仅适用于相关文件。 对于内部样式表,将“style”元素插入 HTML 文档的“head”区域,如下所示:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}</style></head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
与内部样式表一样,CSS 指令包含在 HTML 文件中。 然而,有一个重要的区别:相应的属性直接位于元素的开始标记中,并且不适用于任何其他元素。 如果您不想进行一般设计说明,则此方法特别有用。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
上面的例子表明 CSS 只能与经典的 HTML 结构结合使用。 由于 HTML 通过段落、列表和表格构建内容,而 CSS 负责视觉设计,因此这两种网络语言相辅相成,并以这种方式紧密相连。 编写级联样式表通常围绕设计“盒子”进行。 HTML 文档的结构基于嵌套原则,其中各个元素像盒子一样相互叠放。 网站上占用空间的每个“盒子”都具有以下属性:
然后通过指定大小、形状和颜色来格式化这些“框”。 除了这些简单的属性之外,还有更复杂的 CSS 指令,用于在文本中插入阴影、添加图像过滤功能以及突出显示表单和其他元素。
一旦您了解了样式表语言的基本原理,它们的应用就足够简单了。 了解有关 CSS 顶级技巧的更多信息,这些技巧将使您的网站看起来更加专业。
*请认真填写需求信息,我们会在24小时内与您取得联系。