程序猿学习第四天，初级CSS预习

来源：互联网发布：机票比价软件编辑：程序博客网时间：2024/06/10 05:20

CSS作用：
css全称：层叠样式表（Cascading Style Sheet）通称风格样式表(Style Sheet)，主要用于对网页的风格和样式进行设计。
通过设立css样式表，可以统一地控制HTML中各标签的显示属性。
优势：
内容与表现分离，CSS样式表单可以单独存放在一个文件中，便于维护。
表现统一，统一网站表现和设置，后期容易修改。
样式丰富，布局更灵活。
减少网页代码量：不需要在每个需要设定的样式的表现都书写大量重复性代码，先期写网页和后期维护都非常方便。
等。

语法：
CSS的声明必须放在head标签中
三种选择器声明方式，标签选择器 a{},class选择器.a{},ID选择器#a{}。

一、行内样式：
在HTML标签中直接使用style属性设置CSS样式。
例如

<h1 style="color:red;"></h1>

二、内部样式表
在head标签中通过style标签声明并在style标签中进行选择器声明，然后在HTML正文中进行调用。
例如

...<head>....<style type="text/css">h1{color:red;}</style></head>...<body><h1></h1></body>...

三、外部样式表
将CSS代码单独保存为一个单独的样式表文件，文件扩展名为.css，在页面中引用外部样式表即可。HTML引用外部样式表有两种方式。

a、链接外部样式表
在HTML页面中使用link标签链接外部样式表，link标签必须放在head标签内。
例如：

<head>...<link href="style.css" rel="stylesheet" type="text/css" />...</head>

其中，rel式指在页面中使用这个外部样式表。type式指文件的类型是样式表文本。href是指文件的地址。
然后外部样式表文件需要后缀名为.css，建议将外部样式表文件统一存储在网页所在文件夹的专用子文件夹下。
外部样式表代码示例

a{}.a{}#a{}

b、导入外部样式表
在HTML网页中使用@import导入外部样式表，导入样式表的语句必须放在style标签中，而style标签必须放到页面的head标签内。
例

<head>...<style type="text/css"><!--@import url("style.css");--></style></head>

@import表示导入文件，前面必须有一个@符号，url（“”“”）表示样式表文件位置。

c.链接式和导入式的区别
1.link标签属于XHTML范畴，@import是CSS2.1特有的。
2.使用link链接时时先将外部CSS文件加载到网页中，再进行编译显示，无论网速快慢，用户得到的预期效果一样。
3.使用@import导入的CSS文件，客户端会先将HTML结构呈现出来，再把CSS文件加载到网页中，最终效果一样，只是当网速较慢时，会先显示没有CSS同意布局的HTML网页。
4.如浏览器不兼容CSS2.1则无法应用@import。

样式优先级
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器

CSS的高级应用

一、CSS复合选择器
1、后代选择器
CSS中可通过嵌套的方式，对特殊位置的HTML标签进行声明。如当h3标签中包含strong标签的时候，就可以使用后代选择器来控制相应内容。
后代选择器声明时把外层标签卸载前面，内层标签写在后面，用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代，内层标签内的内容就会套用相应后代选择器所设置的样式。
例：

h1 strong{color red;}h1 .strong{}h1 #strong{}使用时<h1><strong>内容</strong></h1>

2.交集选择器交集选择器由两个选择器直接构成，其中第一个必须是标签选择器，第二个必须是class选择器或者ID选择器。两个选择器必须连续书写.例如

p.txt{}p#txt{}

3.并集选择器与交集选择器对应，任何形式的选择器都可以作为并集选择器的一部分。病及选择器是多个选择器通过逗号链接而成。用途，在声明CSS选择器时，如果有某些选择器的风格是完全相同的，或者部分相同，这时便可以利用并集选择器同时声明所有风格相同的CSS选择器。例：

h3,h2,.a1.b2.#id1.#id2{};

用以上方法完成声明，在HTML中任意即可任意调用并集选择器中的任何一个选择器，完成大括号内定义的风格。
并集选择器可以简洁的完成全局设置。
另外，当网页中需要使用大量带有同类风格样式的ID选择器时，也可以用最简介的语言完成设置。

阅读全文

0 0