第一章 css简介及引入
1-01 css简介1-02 css优缺点1-03 css书写格式1-04 css引入格式行内样式内部样式外部样式导入样式1-05 css注释1-01 css简介
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css简介</title></head><body>html:用来搭建网页结构css:用来给网页添加样式css3:是css最新的版本</body></html>
1-02 css优缺点
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div,p{color: red;font-size: 24px;font-weight: 600;}</style></head><body><!--单行注释的快捷键是：ctrl+/--><!--css: 层叠样式表，给网页添加样式--><!--css优点：--><!--1.丰富的样式描述--><!--<div style="color: red;font-size: 24px;font-weight: 600;">我要自学网</div>--><!--2.实现了结构和样式的分离，便于维护和管理--><!--3.大大减少代码量。加快页面加载速度--><!--4.样式代码的复用性强--><!--5.多个页面可以使用同一个css样式表--><!--css的缺点--><!--1.功能多，学习的知识就多--><!--2.浏览器对css支持程度不一样--><div style="width: 200px;height: 200px;background: blue;border-radius: 50%;">我要自学网</div><p >我要自学网2</p><div >我要自学网3</div><p >我要自学网4</p></body></html>
1-03 css书写格式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--css书写：--><!--1.属性名：属性值--><!--2.属性值是对属性的相关描述,不要乱写属性值--><!--3.属性名必须是一个合法的标识符--><!--注意:--><!--1.css不用区分大小写,但是推荐使用小写--><!--2.样式和样式之间要用";"隔开--><!--常用的样式设置--><!--文字颜色:--><!--color:合法的颜色值;--><!--文字大小:--><!--font-size:合法的尺寸单位;--><!--文字加粗:--><!--font-weight:600--><!--尺寸样式--><!--宽度设置 width:合法的尺寸单位;--><!--高度设置 height:合法的尺寸单位;--><div id="wyzx" style="color: red;font-size: 20px;">我要自学网</div></body></html>
1-04 css引入格式
行内样式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>行内样式</title></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><div style="color: red;font-size: 30px;">我要自学网</div></body></html>
内部样式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>内部样式</title><style type="text/css">div{color: red;font-size: 30px;}</style></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><!--2.内部样式:在当前网页的head标签中,写上一对style标签,然后在style标签中,使用选择器编写css代码--><div >我要自学网</div></body></html>
外部样式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>外部样式</title><link rel="stylesheet" href="03-css.css" /><link rel="stylesheet" type="text/css" href="03-css1.css" /></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><!--2.内部样式:在当前网页的head标签中,写上一对style标签,然后在style标签中,使用选择器编写css代码--><!--3.外部样式:需要一个单独的css文件书写css样式在head标签中使用link标签把单独的css文件关联起来在同一个页面可以引入多个css文件是使用最多的方式--><div >我要自学网</div></body></html>
导入样式
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导入样式</title><link rel="stylesheet" href="03-css.css" /></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><!--2.内部样式:在当前网页的head标签中,写上一对style标签,然后在style标签中,使用选择器编写css代码--><!--3.外部样式:需要一个单独的css文件书写css样式在head标签中使用link标签把单独的css文件关联起来在同一个页面可以引入多个css文件是使用最多的方式--><!--4.导入样式把一个css文件通过@import url("要导入的css文件路径");导入到另一个css文件中;使用导入样式,会先加载html,再加载css,会造成页面样式延迟不常用,也不建议使用--><div >我要自学网</div></body></html>
1-05 css注释
/*css注释:*//*1.合理使用注释可以使代码更清晰,更易修改*//*css注释快捷键:ctrl+/*//*头部开始*/header{}/*导航开始*/header nav{}/*导航结束*//*头部结束*//*主题内容开始*/.content{}/*主题内容结束*//*尾部开始*/footer{}/*尾部结束*/
