网页的三大基石:
1.HTML:结构
2.CSS:美化
3.JavaScript:动态
1.认识CSS样式
CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。
2.CSS代码语法
CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下:
p{color:blue}
3.CSS注释代码
/* 代码注释 */||//
4.CSS样式的位置及相关的优先级
4.1 内联式CSS样式:直接写在现有的html标签中
4.2 嵌入式CSS样式:写在当前的文件中,一般位于head标签内
4.3 外部式CSS样式:写在单独的一个文件中(.css)<link>标签引入
4.4 三种方式的优先级:内联式>嵌入式>外部式
5.CSS选择器
5.1 什么是选择器?
每一条css样式定义由两部分组成,形式如下:
选择器{样式;}
5.2 标签选择器、类选择器、ID选择器(最常用的三种选择器)
标签选择器:标签{}
类选择器:.class{}
id选择器:#id{} 同一个网页中只允许一个id
5.3 其它选择器:子选择器(>),包含(后代选择器)(空格)
通用选择器(*)、伪类选择器(a:hover)、分组选择器(标签,标签)
6.CSS格式化排版
6.1 文字排版--字体 font-family 宋体、微软雅黑
6.2 文字排版--字号、颜色 font-size color
6.3 文字排版--粗体 font-weight
6.4 文字排版--斜体 font-style
6.5 文字排版--下划线 text-decoration:underline
6.6 文字排版--删除线 text-decoration:line-through
6.7 文字排版--缩进 text-indent:2em em代表文字的2倍大小
6.8 文字排版--行间距(行高) line-height
6.9 文字排版--中文字间距、字母间距 letter-spacing
6.10 文字排版--对齐 text-align
7.CSS背景(background)
background (缩写形式)
background-color(背景色 )
background-image(背景图 )
background-repeat(背景图重复方式 )
background-position(位置坐标、偏移量)
8.CSS列表(ul、ol)
list-style
list-style-image
9.盒模型
9.1 元素分类
在布局前,了解:html标签元素分为三种类型:块状元素、内联元素(又叫行内元素)、内联块状元素。display属性设置
9.2 常用的块状元素有:独占一行,元素的高度、宽度、行高以及顶和底边距都可设置
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
9.3 常用的内联元素有:和其他元素都在一行上,元素的高度、宽度及顶部和底部边距不可设置
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
9.4 常用的内联块状元素有:和其他元素都在一行上,元素的高度、宽度、行高以及顶和底边距都可设置
<img>、<input>
9.5 什么盒子模型?(月饼例子)块状元素都具有盒子模型的特定
由margin、padding、border、content组成
CSS的使用:
1.CSS的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 嵌入式css样式设置 --> <style type="text/css"> /*import导入css文件*/ @import url("css/importStyle.css"); h1{ color: red; } </style> <!-- 外部式引入 --> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <!-- CSS:层叠式样式表 作用:美化HTML标签。 HTML标签自带的属性很少,不能达到我们用户的需求,借助css来完成。 在已有的HTML页面中如何引入css样式代码 4种方式 (1)行内式样式引入 利用HTML自带的style属性来实现行内式样式css引入 style属性中调用css样式的语法 属性名:属性值; 属性名:属性值;属性名:属性值;属性名:属性值; (2)嵌入式样式引入 必须在head标签中编写style标签 借助css选择器结合使用 css选择器: 在标签上通过特定的属性进行设置记号, 将来通过嵌入式的方式拿到记号即可设置指定标签的样式。 任何一个标签上自带一个记号(选择器) 元素选择器|标签选择器 (3)外部式link引入 必须在head标签内通过link标签引入外部式css文件进行设置样式 (4)外部式import引入(很少用) 在head中必须编写style标签 通过import关键词引入 --> <font color="red" size="7" style="background: yellow;">好好学习,天天向上</font> <h1>我是谁我在哪里我要干什么</h1> <h1>我是谁我在哪里我要干什么</h1> <h1>我是谁我在哪里我要干什么</h1> <h1>我是谁我在哪里我要干什么</h1> <p>我是p段落标签</p> <div> 康总最帅 </div> </body> </html> 外部引入代码!!!!!! p{ font-size: 30px; color: red; background: yellow; }
2.css选择器的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*标签选择器*/ div{ width: 100px; height: 100px; /*设置边框线*/ border: 1px solid red; } /*ID选择器设置css*/ #dyk{ background-color:yellow; } /*类选择器设置css*/ .zz{ background-color: green; } </style> <!-- js代码 --> <!-- <script type="text/javascript"> window.onload = function(){ //根据id获取元素 var oDiv = document.getElementById("dyk"); alert(oDiv.innerHTML); }; </script> --> </head> <body> <!-- 选择器的使用 在标签上做记号,可以在style标签中借助选择器设置标签的样式 选择器: 元素选择器 其实就是标签本身名称 ID选择器 在标签上设置一个id属性 id属性的值自定义 id属性的值在一个页面上值允许出现一次,否则会覆盖 覆盖:样式不会覆盖,但是通过js获取标签时覆盖 必须在指定选择器的前面+# 类选择器 在标签上设置一个class属性, class属性的值自定义 class属性的值可以相同 必须在指定选择器的前面+. 语法: css引入方式——嵌入式或者外部式引入 选择器名称{ 属性名:属性值; 属性名:属性值; 属性名:属性值; 属性名:属性值; } --> <div id="dyk">邓炎康</div> <br> <div class = "zz">康康</div> <br> <div class="zz"></div> </body> </html>
3.css文本上的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100%; height: 30px; border: 1px solid red; /*background: red;*/ } #oDiv1{ /*background: yellow;*/ /*设置字体大小*/ font-size: 20px; } #oDiv2{ color: red; } #oDiv3{ /*显示下划线*/ text-decoration: underline; } a{ /*去除下划线*/ text-decoration: none; } #oDiv4{ /*设置字体加粗*/ font-weight: bold; } #oDiv5{ /*设置倾斜*/ font-style: oblique ; } #oDiv6{ font-family: "华文彩云"; color: blue; font-size: 20px; /*设置文字之间的间距*/ letter-spacing: 10px; /*设置文字的缩进(针对第一个)*/ /*text-indent: 2em;*/ /*设置文本居中对齐*/ text-align: center; /*垂直居中 利用height和line-height行高 */ height: 100px; line-height: 100px; } </style> </head> <body> <!-- css文本的属性样式 --> <div id="oDiv1">我的地盘我做主</div> <br> <div id="oDiv2">我用双手成就你的梦想</div> <br> <div id="oDiv3">我用双手成就你的梦想</div> <br> <div> <a href="www.baidu.com">百度一下</a> </div> <br> <div id="oDiv4"> 我用双手成就你的梦想 </div> <br> <div id="oDiv5"> 哈哈哈哈 </div> <br> <div id="oDiv6"> 我用双手成就你的梦想 </div> <br> <div></div> <br> <div></div> <br> <div></div> </body> </html>
4.css背景的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 嵌入式css --> <style type="text/css"> /*需求:设置网页的背景图片*/ body{ /*设置背景background*/ /*background-image: url(img/1.jpeg);*/ /*问题:当图片过小时,会自动平铺(横向+纵向)*/ /*横向平铺*/ /*background-repeat: repeat-x;*/ /*纵向平铺*/ /*background-repeat: repeat-y;*/ /*不平铺*/ background-repeat: no-repeat; } #oDiv{ width: 400px; height: 300px; border: 1px solid red; background-image: url(img/1.jpeg); background-repeat: no-repeat; /*定位——一张大图中虚招指定的小图片显示*/ background-position:-100px -100px; } #oDiv2{ border: 1px solid red; height: 200px; width: 100%; } span{ border: 1px solid red; width: 200px; } p{ border: 1px solid red; } img{ width: 200px; height: 200px; } ul{ /*去除列表的符号*/ list-style: none; } ul>li{ /*border: 1px solid red;*/ height: 20px; width: 20px; /*display属性——可以根据该属性在三大分类中相互转换*/ display: inline-block; background-image: url("img/gg.png"); background-position: -15px -16px; } ul .sb1{ background-position: -15px -53px; } </style> </head> <body> <!-- css背景设置 --> <div id="oDiv"> </div> <!-- HTML标签分类:三大类 --> <!-- 1.行内标签 特点:都在一行显示,如果一行显示排满才在另外一行进行显示,不能设置宽度和高度 2.块状标签 特点:内容没有排满也会自动占满整行,可以设置宽度和高度 3.行内-块状标签 特点:都有(在一行显示 也可以进行设置宽和高) --> <div id="oDiv2"> <ul> <li></li> <li class="sb1"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <span>行内标签</span> <span>行内标签</span> <span>行内标签</span> <span>行内标签</span> <hr> <p>段落</p> <p>段落</p> <img src="img/1.jpeg" alt=""> <img src="img/1.jpeg" alt=""> <br><br><br><br><br><br><br><br><br><br><br> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- frameset标签 框架标签 将网页分割成几个等分 rows 横向分割 rows = "20%,*" cols 纵向分割 frame 子标签 控制内容的显示 引入HTML页面 iframe src --> </body> </html>