WEB前端技术基础(第三章:css-网页美化的衣装-上)

概念

层叠样式表，通过css可以对网页的字体、颜色、背景等属性进行设置，同样可以结合div对网页进行布局。

使用css控制网页格式的方法有行内法、内嵌式、链接式和导入式法

CSS3是最新的CSS标准，它拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效和多栏布局等等 ，并且增加了动画属性和3D属性，可以让我们开发出有立体感的更加炫酷的Web网页

CSS3在兼容上做了很大的功夫，已完全向后兼容

传统HTML的缺点

HTML主要侧重于定义内容，比如<p>表示一个段落，<h1>表示标题，而并没有过多设计HTML的排版和界面效果

为了解决HTML排版和界面效果的局限性的问题

特点

CSS文件是文本文件，只要理解了HTML就可以掌握它

CSS的优势

1.表现和内容相分离

CSS通过定义HTML标记的样式，使得页面内容和显示效果相分离 ，简化了网页格式设计，使得对网页格式的修改更方便

2.加强了网页的表现力

CSS样式属性提供了比HTML更多的格式设计功能 。例如，去掉网页超级链接的下划线、给文字添加阴影等

3.增强了网站风格的一致性

CSS样式定义到样式表文件中，在多个网页中同时应用样式表文件中的样式，确保了多个网页具有一致的格式

二、CSS基本语法、引入及三种选择器

基本语法

html 复制代码

选择器{
    属性1:属性值1;
    属性2:属性值2;
    ...
}

/*这是css注释的方法*/

选择器表示样式的名称

选择器为H1，H1在HTML中为一级标题标记，因此重新定义了标题标记的样式，网页中所有

<H1>标记的样式发生了变化

属性是要设置的元素的格式，如字体，字号，颜色等

四种引入方式

行内法
html 复制代码
<html标签 style="属性1:属性值1;属性2:属性值2;...">
内嵌式
html 复制代码
<style type="text/css"></style>
链接式
html 复制代码
<link rel="stylesheet" type="text/css" href="style.css" />
导入式
html 复制代码
<style type="type/css">
@import url(外部样式url);
</style>
++行内优先级最高，内嵌式和链接式常用++

三种选择器

HTML标记选择器
class选择器
ID选择器

CSS选择器声明-扩展

三、文档结构、单位、颜色及文本与文字

文本部分

文档结构

单位

颜色

文本部分

布局

字体

简化font

四、背景与超链接

++a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后++

练习

html 复制代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻页面</title>
<!--内嵌样式表，定义层次选择器及ID选择器
1-定义ID选择器 #newstitle:设置背景图像为bg1.gif,在水平方向平铺
2-定义层次选择器#newstitle h1,设置其字体为加粗、16px、幼圆，并垂直居中对齐
-->
<style>
	#newtitle{
		background: url(images/bg1.gif) repeat-x;
	}
	#newtitle h1{
		font: bold 16px "幼圆";
		text-align:center;
	}
</style>
</head>

<body>
 
    <div id="newtitle"><!----新闻标题---->
    	<h1>美国拟对多个国家和地区加征关税，以及相关国家的应对措施</h1>
	</div>
	
</body>
</html>

五、列表与表格

列表属性

表格属性

奇偶选择器

练习

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平导航菜单</title>
    <style>
        div{
            width: 400px;
            height: 60px;
            margin: 0 auto;
        }
        ul {
            width: 380px;
            height: 50px;
            list-style: none;
            background-color: antiquewhite;
        }
        li {
            float: left;
            padding: 15px;
        }
        a {
            text-decoration: none;
            color: blue;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>