第二十五天css样式

时间：2023-08-30 01:12:02 | 来源：网站运营

时间：2023-08-30 01:12:02 来源：网站运营

第二十五天css样式：

css样式表

一、定义及其分类
1.what:
层叠样式表是一种用来表现HTML(标准通用编辑语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
2.why:
css标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在css还没有引入到页面设计之前，传统的HTML语言等实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。css的出现改变了这一传统模式。
3.how:
css中包括三部分内容:选择符，属性，属性值
选择符{属性:属性值;}
1.选择符:又称选择器，所有HTML语言中的标记都是通过不同的css选择器进行控制的。
2.属性:主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使css属性的使用变得更加复杂/
3.属性值:为某属性的有效值。属性与属性值之间用":"分号隔开。当有多个属性时，使用";"分隔。
举例:
<style>
h2{
font-family:宋体;
color:red;
}
</style>
注: h2 为选择器; font-family 为属性; 宋体 为属性值


css选择器:常用的有标记选择器，类别选择器，id选择器等。
1）.标记选择器:(又叫元素选择器，类型选择器)
what:HTML页面是由很多标记组成的，例如图像标记<img>、超链接标记<a>、表格标记<table>等。而css标记选择器就是声明页面中哪些标记采用css样式。
how:
举例:
<style>
a{
font-size:9px;
color:#F93;
}
<style>
2）.类别选择器:
what: 点(.)+类别名称
why:使用标记选择器有局限性。如果声明标记选择器，那么页面中所有该标记内容都会发生变化。假设页面中有3个<h2>标记，若想每个<h2>的显示效果都不一样，则可以使用类别标记器。
how:1.类别选择器的HTML标记，只需使用class属性来声明即可。
2.在HTML标签中，可以应用多种类别选择器，这样可以使HTML同时加载多个类别选择器的样式。在多种类别选择器之间用空格进行分割，例如:<h2 class="one two">。
注:1.浏览器按照html文档顺序读取各个样式表，后面的样式表会覆盖掉前面样式表的相同属性的样式。
2.在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。
举例:



运行结果:



3）.id选择器
what:id选择器是通过HTML页面中的id属性来选择添加样式，与类别选择器基本相同。
how:1."#"+id 属性值
命名id选择器要以"#"号开始，后加HTML标记中的id属性值。
2.由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能使用一次。
注:这里可能会出现如图这种情况，可能很多朋友不理解。如图:



id选择器举例:



运行结果:






关系:
1.什么时候使用id选择器，什么时候使用class选择器?
答:根据它们的特性。W3C这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一页面只会出现一次，所以用id。如果你定义一个颜色为红色的class，在同一个页面要使用很多次，就用class定义。另外，当页面中用到js或者动态调用对象的时候，要用到id，所以根据自己的情况运用。
2. 三原则，优先级等等。(过后会另写一章，详细描述)


二、HTML中引入css的四种方式及其比较(行内样式，内嵌式，链接式，导入式)
1.行内样式:
行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。(这种方式初学者容易接受，但是灵活性不强)
举例:



运行结果:




2.内嵌式:
内嵌式样式表就是在页面中使用<style></style>标记将css样式包含在页面中。它没有行内标记样式标记表现的直接，但是能够使页面更加规整。
举例:



运行结果:



3.链接式:
链接外部css样式表是最常用的一种引用方式，它通过将css样式定义在一个单独的文件中，然后在HTML中通过<link>标记引用，是一种最为有效的使用css样式的方式。
<link>标记的语法结构如下:
<link rel='stylesheet' href='path' type='text/css'>
参数说明:
rel:定义外部文档和调用文档间的关系。
href:css文档的绝对或相对路径。
type:指的是外部文件的MIME类型。(多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。)
举例:






运行结果:




4.导入样式(不建议使用)
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>
@import在CSS文件中引用CSS使用，如下：
@import "css.css";

四种方法比较:
1.行内样式:比较容易令初学者接收，但是灵活性不强。并且会导致HTML页面不干净，文件体积大，不利于蜘蛛爬行，后期维护也不方便。
2.内嵌式:与行内样式相比，内嵌式样式更加便于维护。但是每个网站都不可能由一个网页构成，而每个页面中相同的HTML标记又都要求有相同的样式，此时使用内嵌式样式显得笨重。而链接式样式表即可解决这一问题。
3.实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便
四种css引入的优先级:
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

转发学习者111