1、CSS概述
使用HTML标记属性对网页进行修饰的方式存在很大的局限和不足，如网站维护困难、不利于代码阅读等。如果希望网页美观、大方，并且升级轻松维护方便，就需要使用 CSS实现结构与表现的分离。
CSS 以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等而且还可以针对不同的浏览器设置不同的样式。 同时CSS非常灵活，既可以嵌入在 HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。
2、CSS核心基础
2.1 CSS样式规则
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
例如：
h2{font-size:20px;color:red;}
其中h2为选择器，表示CSS样式作用的HTML对象为h2标记，font-size和color为CSS属性，分别表示字体大小和颜色，20px和red是它们的值。
在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，如下。
-
CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
-
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。
-
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如:
p{font-family:"Times New Roman";} -
在CSS代码中空格是不被解析的，花括号及分号前后的空格可有可无。
-
注意：属性的值和单位之间不允许出现空格，否则浏览器解析时会出错。
2.2 引入CSS样式表
要想使用CSS修饰网页，就需要在HTML文档中引入CSS样式表。引入CSS样式表的常用方式有以下三种：
行内式
行内式（一般很少使用）也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：
<标记名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">内容</标记名>
例如：
<h2 style="font-size:20px; color:red;">使用CSS修饰二级标题的字体大小和颜色</h2>
内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义，其基本语法格式如下：
<head>
<style type="text/css">
选择器 {属性1：属性值1;属性2：属性值2;属性3:属性值3;}
</style>
</head>
注：标记一般位于标记中标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在头部标语提前被下载和解析。
链入式
链入式是将所有的样式放在一个或多个以.css为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>
例如：
<link href="style.css" type="text/css" rel="stylesheet"/>
2.3 CSS基础选择器
1、标记选择器
标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
例如：
p{font-size:12px; color:#666; font-family:"微软雅黑";}
2、类选择器
.类名{属性1：属性值1;属性2：属性值2;属性3:属性值3;}
例如：
<style type="text/css">
.red{color:red;}
.green{color:green;}
.font22{font-size:22px;}
p{
text-decoration:underline;
font-family:"微软雅黑";
}
</style>
...
<h2 class="red">二级标题文本</h2>
<p class="green font22">段落二文本内容</p>
...
3、id选择器
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#bold (font-weight:bold;)
#font24{font-size:24px;)
</style>
</head>
<body>
<p id-"bold">段落1:id"bold"，设置粗体文字。</p >
< id="font24">段落2:id-"font24"，设置字号为 24px。</p >
< id="font24">段落3;id-"font24"，设置字号为 24px。</p >
<pid-"bold font24">段落4:id-"bold font24”，同时设置粗体和字号 24px。</p >
</body>
</html>
4、通配符选择器
*{属性1：属性值1;属性2：属性值2;属性3：属性值3;}
例如：
*{
margin:0; /*定义外边距*/
padding:0; /*定义内边距*/
}
5、标签指定式选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{ color:blue;)
.special{ color:green;}
p.special{ color:red;} /*标签指定式选择器*/
</style>
</head>
<body>
<p>普通段落文本(蓝色)</p >
<p class="special">指定了.special 类的段落文本(红色)</p >
<h3 class="special">指定了.special类的标题文本(绿色)</h3>
</body>
</html>
6、后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>后代选择器</title>
<style type="text/css">
p strong{color:red;} /*后代选择器*/
stronglcolor:blue;}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中，使用 用 strong 标记定义的文本(红色)
</strong></p >
<strong>嵌套之外由strong标记定义的文本(蓝色)。</strong>
</body>
</html>
注：后代选择器不限于使用两个元素，如果需要加入更多的元素，只需在元素之间加上空格。
7、并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。例如：
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>并集选择器</title>
<style type "text/css">
h2,h3,plcolor:red; font-size:14px:} /*不同标记组成的并集选择器*/
网页中所有段落文本1
h3,.special, #one{text-decorationtunderline:} /*标记、类、id组成的并集选择器*/
</style>
</head>
<body>
<h2>二级标题文本</h2>
<h3>三级标题文本，加下划线。</h3>
<p class="special">段落文本 1，加下划线。</p >
<p>段落文本2，普通文本。</p >16
<p id="one">段落文本 3，加下划线。</p >
</body>
</html>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！