1.简介
从事网页制作或者相关工作,就要学习HTML,CSS。其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,主要用来修饰页面的元素
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
简单来说:
HTML称之为页面的结构,CSS称之为页面的表现
2.css的使用方式
2.1行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
<a href="xxxx" style="font-size:24px;color: orangered">超链接</a>
2.2内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css入门</title> <style type="text/css"> a{ font-size:24px; color:#0F0; } </style> </head> <body> <a href="xxxx">超链接</a> </body> </html>
2.3外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
a { font-size: 24px; color: #0F0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css入门</title>
<link href="01.css" rel="stylesheet"/> </head> <body> <a href="xxxx">超链接</a> </body> </html>
3.选择器
3.1标签选择器
作用： 选择同名的标签
<style type="text/css"> /*标签选择器*/ div { font-size: 24px; color: #F00; } </style>
<body> <div>div1css选择器</div> <div>div2css选择器</div> <div>div3css选择器</div> </body>
3.2类选择器
作用： 选择同类的标签
注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！
<style type="text/css"> /*类选择器*/ .c1{ font-size:36px; color:#00F; } </style>
<body> <div class="c1">div1css选择器</div> <div>div2css选择器</div> <div class="c1">div3css选择器</div> </body>
3.3id选择器
作用： 选择一个标签
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
3）id选择器的优先级最高！
<style type="text/css"> /*id选择器*/ #d1 { font-size: 28px; color: #0F0; } </style>
<body> <div class="c1">div1css选择器</div> <div>div2css选择器</div> <div class="c1">div3css选择器</div> <div id="d1">div4css选择器</div> </body>
3.4并集选择器
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。
<style type="text/css"> /*并集选择器*/ .c1, #d1 { font-size: 24px; color: #0F0; } </style>
<body> <div class="c1">div1css选择器</div> <div>div2css选择器</div> <div class="c1">div3css选择器</div> <div id="d1">div4css选择器</div> <!-- 注意：在同一个html页面中，建议不要出现两个同名的id属性的标签， 后面使用javascript代码选择标签的时候，getElementById("id属性值") --> </body>
3.5交集选择器
作用： 选择某个选择器中的子标签。
<style type="text/css"> /*交集选择器 div里面的span标签 */ div span { font-size: 30px; color: orange; } </style>
<div class="c1">div1css选择器<span>span内部的内容</span></div> <div>div2css选择器</div> <div class="c1">div3css选择器</div> <div id="d1">div4css选择器</div> <!-- 注意：在同一个html页面中，建议不要出现两个同名的id属性的标签， 后面使用javascript代码选择标签的时候，getElementById("id属性值") --> <span>span的外部内容</span>
3.6通用选择器
作用： 选择所有的标签
<style type="text/css"> /*通用选择器*/ *{ font-size:24px; color: olive; } </style>
<body> <div class="c1">div1css选择器<span>span内部的内容</span></div> <div>div2css选择器</div> <div class="c1">div3css选择器</div> <div id="d1">div4css选择器</div> <!-- 注意：在同一个html页面中，建议不要出现两个同名的id属性的标签， 后面使用javascript代码选择标签的时候，getElementById("id属性值") --> <span>span的外部内容</span> </body>
4.常用属性
4.1列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css列表</title> <style type="text/css"> ul{ /*列表符号类型*/ /*list-style-type:none;*/ /*设置列表符号的图片*/ list-style-image:url(../picture/start.jpg); } </style> </head> <body> <ul> <li>学生管理</li> <li>教师管理</li> <li>课程管理</li> </ul> </body> </html>
4.2表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse ; border-color: red; border-width: 2px; } td{ border-width: 3px; } </style> </head> <body> <h3 align="center">学生信息列表</h3> <table border="1" align="center" width="500px" height="300px"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>李四</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>王五</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>陈六</td> <td>20</td> <td>计算机1班</td> </tr> </table> </body> </html>
5.盒子模型
5.1基本概念
可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离
5.2模拟QQ登录页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟QQ登录页面</title> <style type="text/css"> /*修饰主div*/ #main { /*宽度和高度*/ width: 450px; height: 300px; /*边框*/ border: 1px solid #000; /*设置外边距*/ /*简写属性*/ margin: 150px 0 0 420px; /*设置背景图片*/ background-image: url(../picture/qq.jpg); background-repeat: no-repeat; background-position: top center; } /*用户名div*/ #userName { /*设置外边距*/ margin: 60px 0 0 100px; } /*密码div*/ #userPwd { /*设置外边距*/ margin: 20px 0 0 100px; } /*按钮div*/ #btn { /*设置外边距*/ margin: 20px 0 0 150px; } /*注册按钮*/ #regBtn { margin-left: 30px; } /*设置用户输入框的背景*/ #nameInput { background-image: url(../picture/head.png); background-repeat: no-repeat; /*设置左内边距*/ padding-left: 30px; } /*设置密码输入框的背景*/ #pwdInput { background-image: url(../picture/key.jpg); background-repeat: no-repeat; /*设置左内边距*/ padding-left: 30px; } </style> </head> <body> <div id = "main"> <form> <div id="userName"> 用户名：<input id="nameInput" type="text" name="userName"> </div> <div id="userPwd"> 密 码：<input id="pwdInput" type="password" name="userPwd"> </div> <div id="btn"> <input type="submit" value="登录"/><input type="button" value="立即注册" id="regBtn"/> </div> </form> </div> </body> </html>
6.css定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css定位</title> <style type="text/css"> div{ width:100px; height:100px; border:3px solid #000; } #div1{ background-color:#F00; } #div2{ background-color:#00F; } #div3{ background-color:#0F0; /*相对定位*/ /* position:relative; left:10px; top:10px; */ /*绝对定位*/ position:absolute; left:20px; top:20px; } #adv1{ width:300px; height:300px; border:3px solid #00F; background-color:#09F; /*绝对定位*/ /*position:absolute;*/ /*固定定位--不会随着滚动条的滚动而发生改变*/ position:fixed; left:450px; top:200px; } </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> 网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内 网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内 网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div id="adv1">立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询</div> </body> </html>
