一、 css的概念
1、 Css（cascading style sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
2、 Css以html语言为基础，提供了丰富的格式化功能，例如字体、颜色、背景和整体排版
二、 css控制页面的方法
1、 行内样式，就是利用style属性将css代码嵌套在html标记中，代码如下：
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容</p>
</body>
</html>
2、 内嵌式，就是在<head>标记中用一个<style>标记对css代码进行嵌套，代码如下：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>
<body>
<p>紫色、粗体、下划线、25px的效果</p>
</body>
</html>
3、 链接式，就是将外面的css样式文件链接到html文件中，链接的方法是新建一个css文件，并将其与html文件存放在同一个目录下，然后在html代码编辑界面处的css样式下点击附加样式表，选择新建的css样式文件，即可链接进来代码如下：
这是html中的代码
<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
这是css文件中的代码
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
4、导入样式，在html的<head></head>标记中写入<style>
<!--@import url(1.css);--></style>这段代码，即可导入样式表，代码如下：
Html中的代码：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
<h3>CSS标题3</h3>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
Css中的代码：
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
注意：使用同样的样式时，行内样式的优先级最高，其次是采用<link>标记的链接式，再次是位于<style>之间的内嵌式最后才是@import导入式
三、 css基本语法
1、css选择器
选择器：所有html语言中的标记都是通过不同的选择器进行控制的，用户只需要通过选择器对不同的htnl标记进行控制，并赋予各种样式声明，即可实现各种效果
（1）、标记选择器
（2）类选择器
类别选择器用.来声明
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
color:red; /* 红色 */
font-size:18px; /* 文字大小 */
}
.two{
color:green; /* 绿色 */
font-size:20px; /* 文字大小 */
}
.three{
color:cyan; /* 青色 */
font-size:22px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="one">class选择器1</p>
<p class="two">class选择器2</p>
<p class="three">class选择器3</p>
<h3 class="two">h3同样适用</h3>
</body>
</html>
（3）ID选择器
ID选择器用#来声明
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗体 */
}
#two{
font-size:30px; /* 字体大小 */
color:#009900; /* 颜色 */
}
-->
</style>
</head>
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器3</p>
</body>
</html>
注意在类别选择器中可以出现命名为同一个类别名称的选择器，比如说<p class="two">class选择器2</p>和<h3 class="two">h3同样适用</h3>，但是在ID选择器中则不可以
2、选择器的声明：
（1）、选择器集体声明
<html>
<head>
<title>集体声明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
（2）选择器嵌套声明
<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
<!--
p b{ /* 嵌套声明 */
color:maroon; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
</body>
</html>
3、 css的继承
<html>
<head>
<title>父子关系</title>
<base target="_blank">
<style>
<!--
h1{
color:red; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
h1 em{ /* 嵌套选择器 */
color:#004400; /* 颜色 */
font-size:40px; /* 字体大小 */
}
-->
</style>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1> <p>欢迎来到祖国的首都<em>北京</em>，这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
<li>在这里，你可以：
<ul>
<li>感受大自然的美丽</li>
<li>体验生活的节奏</li>
<li>领略首都的激情与活力</li>
</ul>
</li>
<li>你还可以：
<ol>
<li>去八达岭爬长城</li>
<li>去香山看红叶</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何问题，欢迎<a href="contactus">联系我们</a></p>
</body>
</html>
注意：em标记中的文字样式会覆盖与h1相同的样式，但是会继承没有的样式
|
收藏
淘帖
踩
