css入门学习
1:认识CSS
1.1：css简介，css全称是层叠样式表，Cascading style sheets
1.2：css的作用，主要是用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等
使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等
1.3：css代码语法
css样式由选择器和声明组成，而声明又由属性和值组成
h1 { color:red;font-size:14px;}
选择器 属性 值{属性和值构成声明}
选择器：指明网页中要应用样式规则的元素
声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分割。当有多条声明时，中间可以英文分号":"分隔
css注释代码
2：CSS基本知识（就近原则）
2.1：内联式css样式，直接写在现有的html标签中
2.2：嵌入式css样式，写在当前的文件中
2.3：外部式css样式，写在单独的一个文件中，使用link引入
css样式文件名以称以有意义的英文字母命名
rel="stylesheet" type="text/css"是固定的写法，一定要写到link标签内不可修改
语法格式(<link href="" rel="stylesheet" type="text/css">)
<link>标签位置一般写在<head>标签之内
2.4：优先级
内联式>嵌入式>外部式
3：CSS选择器
3.1：什么是选择器
每一条css样式声明或者定义由两部分组成(选择器（样式）)
3.2：标签选择器
3.3：类选择器
《实际开发过程中使用类选择器最多》
类选择器名称(css样式代码;)
3.4：ID选择器
为标签设置id="id名称"，而不是class="类名称";
ID选择符的前面是#号，而不是英文圆点(.);
3.5：类和ID选择器的区别
相同点：可以应用于任何元素
不同点：(1)ID选择器只能在文档中使用一个，与类选择器不同，在一个HTML文档中，ID选择器只能使用一个，而且仅一次，而类选择器可以使用多次
(2)可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，不能使用id词列表
ID选择器优先于类选择器
3.6：子选择器
还有一个比较有用的的选择器子选择器，即大于符号>，用来选择指定标签元素的第一代元素
3.7：包含(后代)选择器
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，如右侧代码编辑器中的代码。
3.8：通用选择器(了解即可)
*{color:red;}
*{margin:0;padding:0}//去掉页面样式
3.9：伪类选择符(一般用在链接的标签上面)
伪类选择器：a:link正常连接的方式
a:hover:鼠标放上去的样式
a:active:选择链接时的样式
a:visited:已经访问过的链接的样式
3.10：分组选择符
案例实验如下，运行结果暂不演示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>实验</title>
<!--外部式css样式-->
<link href="3.html" rel="stylesheet" type="text/css"/>
<!--嵌入式css样式-->
<style type="text/css">
p{color:red;font-size:60px;}
div{color:blue;text-align:center;}
input{background-color:black;color:white}
table{text-align:center;border:1px red solid;}
.p1{font-family:"楷体";font-size:24px;}
.p2{font-family:"宋体";font-size:36px;}
</style>
</head>
<body>
<p>实验的内容</p> <!--内联式css样式-->
<div style="font-size:30px">
今晚吃牛排
</div>
<!--选择器的使用-->
<form>
账号<input type="text" name="userId"><br/>
密码<input type="password" name="pw"><br/>
<div>好好学习将来涨工资</div>
</form>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>10010</td>
<td>别先生</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>10010</td>
<td>别先生</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>10010</td>
<td>别先生</td>
<td>男</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">合计</td>
</tr>
</tfoot>
</table>
<!--类选择器的用法-->
<div>
<h1>春晓</h1>
<p class="p1">春眠不觉晓，处处闻啼鸟</p>
<p class="p2">夜来风雨声，处处闻啼鸟</p>
</div>
</body>
</html>
body{background-color:green;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>实验</title>
<style type="text/css">
/*{background-color:blue;}*/
#p1{font-family:"宋体";color:blue
;font-size:30px;}
.p3{font-size:10px;color:yellow;}
.p2{font-size:40px;color:red;}
p > strong{color:red;font-size:15px;}
ul > li{color:blue;font-size:20px;}
table{font-size:25px;color:red; text-align="center";}
table tr th{font-size:20px;color:yellow;}
table tr td{font-size:25px;color:white;background-color:black;}
<!--display:inline(效果是不显示下划线)-->
.b1 li{display:inline;}
.b1 a{text-decoration:none;}
.b1 a:link{text-decoration:none;text-align:center;font-size:20px;}
.b1 a:hover{font-size:30px;color:red;}
.b1 a:active{font-size:40px;color:blue;}
.b1 a:visited{font-size:80px;color:blink;}
<!--分组选择符-->
p,h3{color:blue;background:yellow;font-size:30px;}
</style>
</head>
<body>
<ul class="b1">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<ul>
<p>javaweb工程师</p>
<h3>android工程师</h3>
<!--id选择器的用法-->
<p id="p1">今天是二零一六年八月十八日</p>
<!--class选择器使用多个样式，后定义的显示出来-->
<p class="p2 p3">春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少</p>
<!--子选择器-->
<p>锄禾日当午，<strong>汗滴</strong>禾下土，<strong>谁知</strong>盘中餐，粒粒皆辛苦</p>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</ul>
<!--包含选择器的使用联系；标签内设置样式必须使用=如border="1px";-->
<table border="1px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>10010</td>
<td>别先生</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>10010</td>
<td>别先生</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>10010</td>
<td>别先生</td>
<td>男</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">合计</td>
</tr>
</tfoot>
</table> </body>
</html>
<html>/*实现某行特定元素的标记*/
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>实验</title>
<style type="text/css">
p:nth-child(2){
background:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦</p> </div>
</body>
</html>
4：常见属性(百度搜索在线API,查询更多字体属性，火狐浏览器使用火狐firbug进行前段开发调正)
4.1：颜色属性
color属性定义文本的颜色
color：green;
color:#ff6600;
color:#f60;
color:rgb(255,255,255);
color:rgba(255,255,255,1);
4.2：字体属性
font-size:字体大小
font-famliy:定义字体
font-weight:字体加粗
4.3：背景属性
背景颜色：background-color;
背景图片：background-image;
背景重复：background-repeat;
背景位置：background-position;
简写方式：
4.4：文本属性
text-align:横向排列
line-height:文本行高
(1):%基于字体大小的百分比行高
(2):数值来设置固定值
text-indent:首行缩进
letter-spacing:字符间距
属性值：normal默认，length设置具体的数值，可以设置负数，inherit继承
4.5：边框属性
4.5.1:边框风格border-style;
(1):统一风格(简写风格)border-style;
(2):单独定义某一方向的边框样式
border-bottom-style:下边框样式
border-top-style:上边框样式
border-left-style:左边框样式
border-right-style:右边框样式
(3):边框风格样式的属性值
none:无边框
solid:直线边框
dashed:虚线边框
dotted:点状边框
double:双线边框
groove:吐槽边框
ridge:垄状边框
inset inset边框
outset outset边框
inherit继承
依托border-color的属性值
4.5.2:边框颜色border-color;
(1):统一风格(简写风格)
border-color;
(2):单独风格
border-top-color:上边边框颜色
border-bottom-color:下边边框颜色
border-left-color:左边边框颜色
border-right-color:右边边框颜色
(3):属性值
颜色值得名称：red,yellow;
RGB:rgb(255,255,0,0.1)
十六进制：#ff0,#ffff00;
(4):属性值的四种方式
一个值：border-color：(上,下,左,右)
两个值：border-color：(上,下)(左,右)
三个值：border-color：(上)(下,左)(右)
四个值：border-color：(上)(下)(左)(右)
4.5.3:简写方式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>实验</title>
<style type="text/css">
body{background:yellow;
/*background-color:blue;*/
/*background-image:url(image/1.jpg);*/
}
.p1{text-align:center;
<!--行距-->
line-height:120%;
<!--首行缩进-->
text-indent:;
<!--字体之间的间距-->
letter-spacing:15px;
}
.p2{
width:300px;
height:450px;
border-color:red;
<!--边框的实线或者虚线-->
border-top-style:dashed;
border-left-style:solid;
border-bottom-style:dashed;
border-right-style:solid;
}
</style>
</head>
<body>
<p>锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦</p>
<p class="p1">好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，
天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，
好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，
天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，
好好学习，天天向上，</p>
<div class="p2">
</div>
</body>
</html>
5：DIV+CSS布局
5.1：div和span
div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式
div和span的区别在于，span是内联元素，div是块级元素
5.2：盒模型
5.2.1:margin
盒子外边距
5.2.2:padding
盒子内边距
5.2.3:border
盒子边框宽度
5.2.4:width
盒子宽度
5.2.5:height
盒子高度
5.3：布局相关的属性
5.3.1：position定位方式
(1):正常定位：relative
(2):根据父元素进行定位：absolute
(3):根据浏览器窗口进行定位：fixed
(4):没有定位：static
(5):继承inherit
5.3.2：定位
左left 右right 上top 下bottom离页面顶点的距离
5.3.3：z-index层覆盖先后顺序(优先级)
5.3.4：display显示属性(学习的重点)
display:none层不显示
display:block块状显示，在元素后面换行，显示下一个块元素
display:inline内联显示，多个可以显示在一行内
5.3.5：float浮动属性
left:左浮动
right:右浮动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>实验</title>
<style type="text/css">
.p1{
width:300px;
height:400px;
background-color:yellow;
margin:50px;
padding:50px;
border:10px blue dashed;
<!--浮动属性-->
float:right;
}
</style>
</head>
<body>
<div class="p1">
<img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="200px" height="300px" title="盒模型"/>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--link href="*.css" rel="stylesheet" type="text/css">-->
<title>实验</title>
<style type="text/css">
.p1{
<!--绝对定位-->
position:absolute;
left:100px;
top:100px;
border:5px red solid;
<!--设置覆盖-->
z-index:;
}
.p2{
position:absolute;
left:100px;
top:200px;
border:5px blue solid;
z-index:;
}
</style>
</head>
<body>
<div class="p1">
<img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>
</div>
<div class="p2">
<img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>
</div>
</body>
</html>
