CSS样式表入门

最新推荐文章于 2024-04-09 11:46:20 发布

Canyoung

最新推荐文章于 2024-04-09 11:46:20 发布

阅读量636

点赞数

分类专栏： CSS 文章标签： css xhtml html stylesheet import 数据库

本文链接：https://blog.csdn.net/Canyoung/article/details/5977724

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 是英语Cascading Style Sheets 的缩写，通常也叫做层叠样式表，是一种用来实现HTML 或XML 文件样式的计算机语言，主要用于定义网页外观。在Web 开发时采用CSS 技术，可以对页面布局、字体、颜色、背景和效果实现更加精确的控制。

一、样式表的描述部分都包含哪些内容：

代码1：

在代码1中展示了一个最简单的样式表应用，可以看出，样式表CCS的描述部分有选择器、属性和属性值组成：

<p sytle="color:red">中，p代表选择此段落应用样式，color就是指定显示的属性，red就是属性的值指定为红色。

二、样式的分类

根据样式代码的位置，主要可以分为三类：行内样式、内嵌样式和外部样式。

1、行内样式

如果希望某段文字和其他段落的文字显示风格不一样，可采用行内样式，如代码1中所示。

行内样式使用元素标签的style属性定义。一般定义网页的某一部分，应用于局部，局限于某个特定标签。如果希望网页内的所有同类标签都采用统一样式，该怎么办呢？

2、内嵌样式表

内嵌样式表是将样式定义放在HTML中，成为HTML的一部分。如代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> p{ color:red; }</style> </head> <p> 字体是红色的 <p>字体也是红色的 <body> </body> </html

在内嵌样式表中，根据选择器的不同又可以分为：HTML选择器、类选择器和ID选择器。其中代码2就属于HTM选择器，它应用于该网页中所有<P>。

类选择器代码示例，代码3：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .Pcss{ color:red; }</style> </head> <p class="Pcss"> 由于使用了类选择器，字体是红色的 <p>该段落没有使用样式表，字体不是红色的 <body> </body> </html>

ID选择器代码示例,代码4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #Pcss{ color:red; }</style> </head> <p id="Pcss"> 由于使用了ID选择器，字体是红色的 <p>该段落没有使用样式表，字体不是红色的 <body> </body> </html>

类选择器和ID选择器的区别：从它们的名字上就很容易区别，学过面向对象和数据库的同学应该不会感到陌生，类是从很多的相似的事或物种抽象出来的一个东西，它代表的是一个整体，比如自行车和大象；id是数据库表中某一条记录区别与其他记录的唯一标志。在HTML文件中，一个id在一个页面中只能应用一次，而class则用于描述多次出现的元素。在样式表中，类选择器用于描述某一类HTML标签的展现形式，而ID选择器用于指定某一个HTML标签的展现形式。