1. CSS概述
cascading style sheets:层叠样式表
主要作用：用来美化html页面 html决定网页的骨架
语法在一个style标签中，填写css内容，最好将style标签写在head的标签中
2. CSS的选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- <style> 选择器{ 属性名称1：属性的值; 属性名称2：属性的值; } 元素选择器： 元素的名称{ 属性名称：属性的值; 属性名称：属性的值; } ID选择器： 以#开头 ID在整个页面中必须是唯一的 #ID的名称{ 属性名称：属性的值 属性名称：属性的值 } 类选择器： .类的名称{ 属性名称：属性的值 属性名称：属性的值 } </style> --> <style> div0{ color:red; font-size: 50px; } span0{ color:blue; } #div1{ color:red; } .fruit{ color:pink; } </style> </head> <body> <div0>大家都很厉害哟</div0> <span0>好困啊</span0> <div id = "div1">JAVAEE</div> <div class = "fruit">水果</div> </body> </html>
3. CSS的引用方式
3.1 内部样式
3.2 外部样式
@CHARSET "UTF-8"; <style> div0{ color:red; font-size: 50px; } span0{ color:blue; } #div1{ color:red; } .fruit{ color:pink; } </style> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS外部引用</title> <link rel = "stylesheet" href = "style.css" /> </head> <body> <div0>大家都很厉害哟</div0> <span0>好困啊</span0> <div id = "div1">JAVAEE</div> <div class = "fruit">水果</div> <div style = "color:pink">小小小</div> </body> </html>
3.3 行内样式：示例见上
4. 网站首页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站首页</title> <style> .logo{ float: left; width: 33%; /* border- 1px; border-style: solid; border-color: red; */ border: 1px solid red; height: 60px; } .amenu{ color: black; text-decoration: none; /* height: 50px; */ line-height: 50px; <!-- 设置行高使内容居中 --> } </style> </head> <body> <!-- 1. 创建一个最外层div 2. 第一部分：LOGO部分：嵌套三个div 3. 第二部分：导航栏部分：放置五个超链接 4. 第三部分：轮播图 5. 第四部分 6. 第五部分：直接放置一张图片 7. 第六部分：抄袭第四部分 8. 第七部分：放置一张图片 9. 第八部分：放置一些超链接 --> <div> <!-- 2. 第一部分：LOGO部分：嵌套三个div --> <div> <div class = "logo"> <img src = "../imgs/logo2.png" /> </div> <div class = "logo"> <img src = "../imgs/header.png" /> </div> <div class = "logo"> <a href = "#">登录</a> <a href = "#">注册</a> <a href = "#">购物车</a> </div> </div> <div style = "clear: both"></div> <!-- 清除浮动 --> <!-- 3. 第二部分：导航栏部分：放置五个超链接 --> <div style = "background-color: gray; height: 50px;"> <a href = "#" class = "amenu">首页</a> <a href = "#" class = "amenu">手机数码</a> <a href = "#" class = "amenu">电脑办公</a> <a href = "#" class = "amenu">鞋子</a> </div> <!-- 4. 第三部分：轮播图 --> <div> <img src = "../imgs/1.jpg" width = "100%" /> </div> <!-- 5. 第四部分 --> <div> <div><h2>最新商品<img src = "../imgs/title2.jpg" /></h2></div> <div style = " 15%; height: 480px; border:1px solid red; float: left;"> <img src = "../products/hao/big01.jpg" height = "100%" width = "100%" /> </div> <div style = " 84%; height: 480px; border: 1px solid gold; float: left;"> <div style = "height: 240px; 48.3%; float: left; border:1px solid red;"> <img src = "../products/hao/middle01.jpg" height = "100%" width = "100%" /> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> </div> </div> <!-- 6. 第五部分：直接放置一张图片 --> <div> <img src = "../products/hao/ad.jpg" width = "100%" </div> <!-- 7. 第六部分：抄袭第四部分 --> <div> <div><h2>最新商品<img src = "../imgs/title2.jpg" /></h2></div> <div style = " 15%; height: 480px; border:1px solid red; float: left;"> <img src = "../products/hao/big01.jpg" height = "100%" width = "100%" /> </div> <div style = " 84%; height: 480px; border: 1px solid gold; float: left;"> <div style = "height: 240px; 48.3%; float: left; border:1px solid red;"> <img src = "../products/hao/middle01.jpg" height = "100%" width = "100%" /> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> <div style = "text-align: center; 16%; border:1px solid red; height: 240px; float: left;"> <img src = "../products/hao/small08.jpg" /> <p>高压锅</p> <p style = "color: red">$998</p> </div> </div> </div> <!-- 8. 第七部分：放置一张图片 --> <div> <img src = "../img/footer.jpg" width = "100%" /> </div> <!-- 9. 第八部分：放置一些超链接 --> <div style = "text-align: center"> <a href = "#">关于我们</a> <a href = "#">联系我们</a> <a href = "#">招聘信息</a> <a href = "#">支付链接</a> <a href = "#">友情链接</a> <br /> Copyright @ 2005-2018 小镜子所有 </div> </div> </body> </html>
行高：文字的高度，文字总是在行内居中显示的，可以达到文字居中显示的目的。
CSS选择器的优先级：行内样式>ID选择器>类选择器>元素选择器 同类型就近原则，哪个样式近选择哪个。
5. CSS的其它选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>扩展选择器</title> <!-- 属性选择器: [abc ^= "def"]:选择abc属性值以"def"开头的所有元素 [abc $= "def"]:选择abc属性值以"def"结尾的所有元素 [abc *= "def"]:选择abc属性值中包含字串"def"的所有元素 title = "aaa"的将会显示此属性 后代选择器: 中间以空格隔开的是后代选择器 h1 > em{ 属性名：属性值 } 大于号表示em不能被别的类型所包含，比如<strong></strong> 伪类选择器:通常使用在a标签上 a:link {color: #FF0000} /*未访问标签*/ a:visited {color: #00FF00} /*已访问标签*/ a:hover {color: #FF00FF} /*鼠标移动到链接上*/ a:active {color: #00000FF} /*选定的链接*/ --> <style> /* a[href = "#"][title = "aaa"]{ color: red; } h5 > em{ color: red; } */ a:link {color: #FF0000} /*未访问标签*/ a:visited {color: #00FF00} /*已访问标签*/ a:hover {color: #FF00FF} /*鼠标移动到链接上*/ a:active {color: #00000FF} /*选定的链接*/ </style> </head> <body> <a href = "#" title = "aaa">张三</a> <a href = "#" title = "bbb">李四</a> <h5> 小镜子，<em>ggg</em>。 <strong> <em>hhh</em> </strong> </h5> <a href = "#">哈哈哈哈哈</a> </body> </html>
6. CSS绝对定位：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS绝对定位</title> </head> <body> <div style = "border: 5px solid red; 400px; height: 400px; position:absolute; top: 200px; left: 200px"> 我爱学习 </div> </body> </html>
7. CSS边距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站注册</title> </head> <body> <!-- 内边距: padding-top: padding-right: padding-bottom: padding-left: padding: 10px: 上下左右都是10px padding: 10px 20px: 上下都是10px，左右都是20px padding: 10px 20px 30px: 上10px 右20px 下30px 左20px padding: 10px 20px 30px 40px: 上10px 右20px 下30px 左40px 外边距: margin-top: margin-right: margin-bottom: margin-left: 同上 --> <div style = "border: 3px solid red; 400px; height: 400px"> <div style = "border: 3px solid red; 150px; height: 150px; margin-top: 125px; margin: 125px"> 小小小 </div> </div> </body> </html>
8. 网站注册
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站注册</title> <style> .logo{ height: 60px; line-height: 60px; float: left; width: 33%; } .menu{ line-height: 50px; color: black; } </style> </head> <body> <!-- 步骤分析： 1. 第一部分:logo部分 2. 第二部分:导航栏菜单 3. 第三部分:注册部分 4. 第四部分:foot图片 5. 第五部分:超链接 --> <!-- 第一部分:logo部分 --> <div> <div class = "logo"> <img src = "../imgs/logo2.png" /> </div> <div class = "logo"> <img src = "../imgs/header.png" /> </div> <div class = "logo"> <a href = "#">登陆</a> <a href = "#">注册</a> <a href = "#">购物车</a> </div> </div> <div style = "clear: both" ></div> <!-- 第二部分:导航栏菜单 --> <div> <div style = "background-color: gray; height: 50px"> <a href = "#" class = "menu">首页</a> <a href = "#" class = "menu">手机数码</a> <a href = "#" class = "menu">电脑办公</a> <a href = "#" class = "menu">箱子</a> <a href = "#" class = "menu">酒水香烟</a> </div> </div> <!-- 第三部分:注册部分 --> <div style = "background: url(../image/regist_bg.jpg); height: 500px;"> <div style = "border: 5px solid gray; 50%; height: 50%; background-color:white; position: absolute; top: 180px; left: 300px;" > <table width = "60%" align = "center"> <tr> <td colspan = "2"><font color = "blue" size = "6">会员注册</font>UserRegist</td> </tr> <tr> <td>用户名：</td> <td><input type = "text" /></td> </tr> <tr> <td>密码：</td> <td><input type = "password" /></td> </tr> <tr> <td>邮箱：</td> <td><input type = "email" /></td> </tr> <tr> <td>姓名：</td> <td><input type = "text" /></td> </tr> <tr> <td>性别：</td> <td><input type = "radio" name = "sex" />男</td> <td><input type = "radio" name = "sex" />女</td> </tr> <tr> <td>出生日期：</td> <td><input type = "date" /></td> </tr> <tr> <td>验证码：</td> <td><input type = "text" /></td> </tr> <tr> <td></td> <td><input type = "submit" value = "注册" /></td> </tr> </table> </div> </div> <!-- 第四部分:foot图片 --> <div> <img src = "../imgs/footer.jpg" width = "100%" /> </div> <!-- 第五部分:超链接 --> <div style = "text-align: center"> <a href = "#">关于我们</a> <a href = "#">联系我们</a> <a href = "#">招纳贤士</a> <a href = "#">法律声明</a> <br /> Copyright @ 2018 小小小所有 </div> </body> </html>