您的位置：首页 > Web前端 > HTML5

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

2016-10-27 13:42 597 查看

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

观看连接：http://edu.csdn.net/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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 蓝鸥 html HTML5教程龙江 css

相关文章推荐

新的分享

章节导航