蓝鸥零基础学习HTML5之CSS的基础样式一_蓝鸥零基础学习html5

本文介绍了HTML5的基本结构及CSS的基础样式应用，包括不同样式的引入方式、优先级及如何设置元素的宽度、高度和背景等。通过实例演示了内联样式、内部样式表和外部样式表的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

观看连接：http://edu.youkuaiyun.com/course/detail/2664

1.html的回顾

<!DOCTYPE html>
<!-- 文档头声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:100px; height:100px; background:red;">随便</div>
<!-- 你看不见我，只有程序员能看到我
注释的快捷键 ctrl + /

div 双标签
语义：无意义
 
CSS的语法
属性名:属性值;
-->
</body>
</html>

2.css的引入方式

<!DOCTYPE html>
<!-- 文档头声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
<style>
 
</style>
</head>
<body>
 
<!-- <div style="width:200px;height:200px;background:green;"></div> -->
<div id="box1" class="cla1" style="width:500px; background:pink;"></div>
<div></div>
<div class="cla1"></div>
<div></div>
 
<p class="cla1">我是p1</p>
<p>我是p2</p>
 
<h2 class="cla1">我是H1</h2>
<h2>我是H2</h2>
<!--
1.行间样式的引入
写法：在标签中，写一个style的属性 比如：style="....."  在引号当中，写相应的css样式
缺点：不利于维护，不利于代码重用
优点：优先级最高
 
2.内部样式表的引入
写法：在head标签里，写一个style的标签，在标签中，通过选择器来控制样式
选择器？
 标签名选择器
 写法 ：
 div {
... css的样式
 }
 
     ID选择器
     写法：
     首先在相应标签中设置一个ID的属性
     如： id="id名"
     在样式表中，通过
     # + id名 {
... css的样式
     }
     温馨小提示：
     id名要以英文字母开头
     id名不能重复，是唯一的
 
     class选择器
     写法：
     首先在相应标签中设置一个class的属性
     如：class="class名"
     在样式表中，通过
     . + class名 {
... css的样式
     }
     温馨小提示
     class名以英文字母开头
 
优先级
 
标签名选择器  < class选择器 < id选择器 < 行间样式
优点：加载速度快，不需要去请求服务器
缺点：不利于代码重用
 
 
3.外部样式表的引入
写法：在head标签里，写一个link标签，用来关联一个css的文件，在css文件中，通过选择器来控制样式
 
温馨提示.
<link rel="stylesheet" href="css文件的路径">
 
优点：利于代码重用
缺点：需要加载服务器
-->
</body>
</html>

3.css的基础样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:700px;
height: 500px;
/*background-color: #db7791;*/
/*background-color: rgb(219,119,145);*/
/*background-color: blue;
background-image: url("img/1.jpg");
background-repeat: no-repeat;
background-position: right bottom;*/
 
background: red url("img/1.jpg") no-repeat;
/*background-attachment: fixed;*/
background-size: 700px 500px;
}
</style>
</head>
<body>
<div></div>
<!--
width 宽
height 高
background 背景
背景色
background-color:颜色值 英文单词 十六进制 rgb
背景图
background-image:url("图片路径")
背景图平铺
background-repeat:no-repeat repeat-x repeat-y
背景图定位
background-position:第一个值(X轴的位置) 第二个值(Y轴的位置);
第一个值: left center right 30px;
第二个值: top center bottom 100px;
 
复合写法
background: color image position repeat;
 
背景图滚动
background-attachment:fixed;
 
背景图尺寸
background-size:第一个值(X轴的比例) 第二个值(Y轴的比例);
 
温馨小提示：css3的样式 不兼容
 -->
</body>
</html>