轻松学：网页设计8-网页美化CSS基础
时间：2023-09-28 06:18:02 | 来源：网站运营
时间：2023-09-28 06:18:02 来源：网站运营
轻松学：网页设计8-网页美化CSS基础：使用HTML修饰页面时，存在很大的局限和不足，例如维护困难、不利于代码的阅读等。开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现极大地满足了开发者的需求。
CSS英文全称为“Cascading Style Sheet”，中文译为“层叠样式表”。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS样式的书写规则:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 在样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。
引入CSS样式表:1.行内式也称为内联样式，是通过标记的style属性来设置元素的样式。基本语法格式"<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>
<h2 style="font-size:20px; color:red;"> 使用CSS行内式修饰二级标题的字体大小和颜色</h2>2.内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义基本语法格式<head> <style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style></head>
<head><meta charset="utf-8"><title>内嵌式引入CSS样式表</title><style type="text/css">h2{text-align:center;} /*定义标题标记居中对齐*/p{ /*定义段落标记的样式*/ font-size:16px; color:red; text-decoration:underline;} </style></head>3.链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中基本语法格式:<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
链入式应用
1．首先创建一个HTML文档demo.html，并在该文档中添加一个标题和一个段落文本。
2．新建CSS样式文件style.css,并打开，在CSS文档编辑窗口中输入以下代码，并保存CSS样式表文件。
在HTML文档的<head>头部标记中，添加<link />语句，将style.css外部样式表文件链接到demo01.html文档中
<link href="style.css" type="text/css" rel="stylesheet" />要想将CSS样式应用于特定的HTML标签，首先需要找到该目标标签。CSS3是CSS的最新版本，在CSS3中增加了许多新的选择器。运用这些选择器可以简化网页代码的书写，让稳当的结构更加简单。
1.元素选择器也称为标记选择器，是指用HTML标记名称作为选择器基本语法格式:标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2.类选择器使用“.”（英文点号）进行标识，后面紧跟类名基本语法格式: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.id选择器使用“#”进行标识，后面紧跟id名基本语法格式:#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
4.通配符选择器用“*”号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素基本语法格式;*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
5.分组选择器也叫并集选择器，是各个选择器通过逗号连接而成的。
任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为分组选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用分组选择器为它们定义相同的CSS样式。使用分组选择器定义样式与对各个基础选择器单独定义样式效果完全相同，而且这种方式书写的CSS代码更简洁、直观。
在线咨询
