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

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

2016-09-21 09:31 375 查看
蓝鸥零基础学习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>



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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML5 蓝鸥
相关文章推荐
新的分享
章节导航