一.回顾内容
前端的三大组成(三大模块)
HTMl(超文本标记语言) 结构层
css(层叠样式表) 表现层:用来美化HTML结构
JS(Java script)(脚本语言) 行为层:提供用户和界面的交互
二.CSS(层叠样式表)
1. CSS的概念及其介绍
CSS 指层叠样式表 (Cascading Style Sheets)
作用:美化HTML结构,重点:css可以很好的将结构内容和表现进行分离.
2. css的三种表现形式(引入方法)
css的语法结构:选择器{属性:值;属性:值;…}
选择器:选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一 个 或多个值.顾名思义就是用来筛选元素的一种方式.
(1)行内样式(内联样式):通过style属性将样式写入标签中.
例:
<html> <head> <meta charset="utf-8" /> <title></title> </head> <body> //border-style:solid;设置边框样式为实线// //margin:"auto";设置水平居中// <div style="width: 200px;height: 200px; border-color: red; border-style: solid; border-width: 5px; margin: auto;"></div> <div style="width: 1000px; height: 100px; background: red; border-color: green; border-width: 5px; border-style: solid;"></div> <br /> <div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div> <div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div> <p style="background: yellow;">我比你帅</p> </body> </html>
(2)内嵌样式:通过style标签将样式写入head标签中.
例:
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: url(img/r14.jpg);//插入背景图片// background-size: 100%,100%;//body要加逗号// } a{ text-decoration: none;font-family: 阿美简体;font-weight: 900;font-size: 54px;color: red; } p{ width: 200px; height: 50px; background: red;text-align: center;line-height: 50px; } div{ width: 400px; height: 200px; border: red solid 2px; background: url(img/img01.jpg); background-size: 100% 100%; } </style> </head> <body> <a href="#">我的超链接</a> <p>我爱学习,学习使我快乐</p> <div></div> </body> </html>
(3)外联样式(外部样式):通过link标签引入外部css文件夹中的xxx.css文件到head标签中.
div: 没有具体的含义(主要用来页面的布局中,替代了原始的table和框架布局).
块元素:所谓的块元素会占据一行显示称之为块元素,即便把宽高缩小也会占据一行显示.
3. CSS 文本设置
常用的应用文本的 css 样式：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜， font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗， 如： font-weight:bold; 设 置 加 粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
font：是否加粗字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高，如：line-height:24px; (文本的垂直居中)
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 (overline上划线,underline下划线)
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进 24px
text-align 设置文字水平对齐方式，如 text-align:center 设置文字水平居中
border-collapse: collapse;设置表格边框合并
4.css颜色的三种表现形式
(1).直接写颜色的名称
background:red;
(2).使用RGB三原色设置
background:rgb(76,50,0);
background:rgba(76,50,0,0.8);//a不透明度//
(3).使用16进制的方式表示颜色(最常用的一种)
background:#ff0000
5.css的选择器
(1).标签选择器
(2).ID选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能 对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id选择器.
(3).类选择器(class)
.class的值{属性:属性值}
例:
<style type="text/css"> //标签选择器// table{ border: 5px solid black; width: 300px; height: 200px; margin:100px auto; //设置表格的水平居中// //距离顶端100px 然后水平居中// border-collapse: collapse; //设置表格的边框合并// background: url(images/bg3.jpg); background-size: 100% 100%; } td{ border: 2px dashed green; color: red; font-family: 宋体; font-size: 24px; } //id选择器// #inp1{ background: pink; border: 5px solid black; width: 150px; height: 20px; } #inp2{ background: white; border: 5px solid black; width: 150px; height: 20px; } #ipn3{ background: goldenrod; border: 5px solid black; width: 150px; height: 30px; font-family: 阿美简体; font-size: 15px; color: white; } label{ text-align: right; /*border: 1px solid green;*/ } //类选择器// .td1{ text-align: right; } </style> <body> <form method="get"> <table> <tr> <td class="td1"> <label>姓名:</label> </td> <td> <input id="inp1" type="text" placeholder="请输入用户名" /> </td> </tr> <tr> <td class="td1"> <label>密码:</label> </td> <td> <input id="inp2" type="password" placeholder="请输入密码" /> </td> </tr> <tr> <td></td> <td> <input id="ipn3" type="button" value="点击登录" /> </td> </tr> </table> </form> </body>
层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元 素 结合使用，减少命名，同时也可以通过层级，防止命名冲突。
(4)子代选择器:父级元素1>子集元素2
(5)后代选择器:父级元素 后代元素 后代元素
例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> //子代选择器// #ul_01>li{ background: red; } #ul_01>li>ul{ background: yellow; } #ul_01>li>ul>li{ background: pink; } //后代选择器// #ul_01 a{ text-decoration: none; } #ul_01 li{ list-style: none;//去掉无序列表的点// } #ul_01 li ul li{ background: greenyellow; } #ul_01>li ul a{ color: red; } </style> </head> <body> <ul id="ul_01"> <li><a href="#">首页</a></li> <li><a href="#">数码产品</a></li> <li><a href="#">家用电器</a></li> <p><a href="#">学的不仅是技术</a></p> <li> <a href="#">其他类型</a> <ul> <li><a href="#">童装</a></li> <li><a href="#">男装</a></li> <li><a href="#">女装</a></li> <li><a href="#">时尚装</a></li> </ul> </li> </ul> </body> </html>
(6)组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
例:
.box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} <div class="box1">.........</div> <div class="box2">.........</div> <div class="box3">.........</div>
(7)伪类及伪元素选择器
常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容
例:
.box1:hover{color:red} .box2:before{content:'行首文字';} .box3:after{content:'行尾文字';} <div class="box1">.........</div> <div class="box2">.........</div> <div class="box3">.........</div>