蓝鸥零基础学习HTML5第四讲 CSS的基础样式

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>


wKiom1fh4j7SZ025AAPXQ9D9Vws090.png-wh_50

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>


 wKiom1fh4n6QcyhoABleohWO2pE288.png-wh_50

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-p_w_picpath: url("img/1.jpg");

background-repeat: no-repeat;

background-position: right bottom;*/

 

background: red url("img/1.jpg") no-repeat;

/*background-p_w_upload: fixed;*/

background-size: 700px 500px;

}

</style>

</head>

<body>

<div></div>

<!--

width 宽

height 高

background 背景

背景色

background-color:颜色值 英文单词 十六进制 rgb

背景图

background-p_w_picpath:url("图片路径")

背景图平铺

background-repeat:no-repeat repeat-x repeat-y

背景图定位

background-position:第一个值(X轴的位置) 第二个值(Y轴的位置);

第一个值: left center right 30px;

第二个值: top center bottom 100px;

 

复合写法

background: color p_w_picpath position repeat;

 

背景图滚动

background-p_w_upload:fixed;

 

背景图尺寸

background-size:第一个值(X轴的比例) 第二个值(Y轴的比例);

 

温馨小提示：css3的样式 不兼容

 -->

</body>

</html>