1.选择器的优先级
根据选择器的权重进行优先级判断
id 选择器 100
class选择器/伪类选择器 10
标签选择器 1
注意：
1.组合选择器的权重，由各个选择器的权重相加得到
2.选择器的优先级与书写顺序无关，只看权重
3.行内样式的优先级最高
#h1{
color: green;
}
<h1 id="h1" style="color: red;"></h1>
2.尺寸与边框
1.尺寸单位:
1. px 像素，最常用的单位，也是浏览器默认单位
2. % 百分比 占据父元素对应属性的占比
------以下为绝对单位，不常用---
3. in 英寸 1 in = 2.54 cm
4. pt 英磅 1 pt = 1/72 in
5. cm 厘米
6. mm 毫米
注意：css中的尺寸单位是不能省略的，0除外
2.颜色取值：
1. 取值英文单词 red green blue ...不考虑单位
2. 取值十六进制 #aabbcc
每两位一组代表一种三原色 三组分别对应红绿蓝
每一位取值范围 0~9 a~f
3. 短十六进制 #abc
由三位组成，每一位就代表了一种三原色
浏览器在渲染时会自动对每一位进行重复，补全成六位的十六进制
#abc = #aabbcc
4. css 提供的颜色表示法
rgb(r,g,b) 每个值取值 0~255
红色 rgb(255,0,0)
5. css提供的颜色表示法
rgba(r,g,b,alpha) 颜色取值 0~255 alpha 表示透明度 取值 0-1(透明-不透明)
3.尺寸属性
1.作用：
改变元素的宽度和高度
属性 width height
取值为数值，单位为px 或 %
2.使用：
所有的块级元素可以设置宽高，默认情况宽度与父元素保持一致，高度由内容决定;
所有的行内元素不可以设置宽高，大小由内容决定
3.内容溢出处理:
属性：overflow
取值：
1.visible 默认值，溢出部分可见
2.hidden 溢出部分隐藏不可见
3.scroll 设置内容滚动显示，显示滚动条
4.auto 自动 当内容溢出时，自动添加滚动条并且可用
注意：
scroll 表示显示水平和垂直方向的滚动条，不管是否真的需要
auto 根据内容需要，添加水平或者垂直方向的滚动条
4.边框
1.属性 border
2.取值 border-width border-style border-color
三个值缺一不可
e.g. border : 5px solid red;
border-width:设置边框线的宽度
border-style：设置边框线的样式，取值
1.solid 实线
2.dashed 虚线
3.dotted 点线
4.double 双线(不常用)
border-color:颜色值，可以使用transparent表示透明色
3.特殊用法
取消边框 border: none
4.单边框设置
border 属性用来设置 上右下左四个方向的边框
四个方向单独设置边框：
border-top : 5px solid red;
border-right : 10px solid green;
border-bottom : 4px solid gray;
border-left : 1px solid blue;
5.网页三角标制作
1.元素尺寸为0
2.为元素添加四个方向的边框
3.设置其中三条边框颜色为透明transparent
6.圆角边框
属性:border-radius
取值:px 或 %
作用:将边框的直角变成圆角
e.g.
border-radius : 10px;表示四个角都按照10px的半径去生成圆角
border-radius : 5px 10px 15px 20px;四个值代表了上右下左四个角
border-radius : 5px 10px;第一个值表示上下，第二个左右
border-radius : 5px 10px 15px;第四个默认和第二个值相同
注意：边框圆角在元素不设置边框的情况下依然有效，可以通过设置50%呈现圆形或椭圆形，修改元素显示形状
7.边框阴影
属性 box-shadow : h-offset v-offset blur spread color;
h-offset:阴影的水平偏移距离
取值为数字
取值为正，阴影向右偏移
取值为负，阴影向左偏移
v-offset:阴影的垂直偏移距离
取值为数字
取值为正，阴影向下偏移
取值为负，阴影向上偏移
blur:阴影的模糊程度
取值为数字
值越大，越模糊
spread:阴影扩大或是缩小的距离
取值为数字
取值为正，阴影会扩大
取值为负，阴影会收缩
color:设置阴影颜色
8.浏览器坐标系
默认浏览器左上角为原点，向右向下为X轴和Y轴正方向，向左向上为负方向
3.盒模型/框模型
1.元素皆为框
盒模型：元素在文档中占据尺寸的计算方式
组成：外边距margin 边框border 内边距padding 内容尺寸
计算方式：
标准盒模型：
最终width=左右外边距+左右边框+左右内边距+内容宽度
最终height=上下外边距+上下边框+上下内边距+内容高度
（了解）怪异盒模型：
元素内容宽度=左右内边距+边框+内容
2.外边距margin
1.元素边框与边框之间的距离
2.语法
1.属性 margin
2.取值:
margin:10px;表示上右下左四个方向都设置10px的外边距
margin:10px 20px；上下为10px左右为20px
margin:10px 20px 30px;上下分别是10px 30px左右为20px
margin:10px 20px 30px 40px;设置上右下左四个方向的外边距
3.特殊值
margin:0 auto;表示自动，可以用来设置元素居中
4.margin 取值可以分正负
正值 就代表正方向
负值 就代表负方向
margin 设置为负值，元素将进行偏移
5.四个方向单独设置外边距
margin-top 设置上方的外边距
margin-right 设置右边的外边距
margin-bottom 设置底部外边距
margin-left 设置左边外边距
取值同样是数值，取一个值
6.具有默认外边距的元素
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0
}
3.内边距padding
1.表示元素内容与元素边框之间的距离
通过设置width height 属性，实际上设置的是元素内容框的大小
2.使用
1.属性padding
2.取值 数值，可以给定 1/2/3/4个值
padding:2px;上右下左都为2px的内边距
padding:10px 20px;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
3.具有默认内边距的元素
ol,ul,input(文本框，密码框，按钮会存在)
ol,ul,input{
padding:0;
}
页面开发时，清除浏览器的默认边距
body,ul,ol,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
input 可以根据需求单独设置
4.盒模型属性的支持度
1.盒模型属性:margin border padding width height
2.块元素对盒模型属性完全支持
3.行内元素对盒模型属性部分支持
行内元素可以设置 左右的内外边距
不可以设置 宽高 上下内外边距
5.元素类型转换
属性 display
取值:
inline 行内元素
block 块元素
inline-block 行内块
none 元素隐藏 元素在文档中就不占位了
6.文本居中显示
水平居中:text-align : center;
垂直居中：设置元素 高度height 与行高line-height 保持一致
作业：
1.制作精美导航条，内容不限
实现鼠标悬停能够改变背景色和文本色；
文本点击之后修改文本色
2.根据图片素材中作业.png 完成表单部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
body{
/*外边距*/
margin: 0;
}
td{
/*右内边距*/
padding-right: 30px;
float: left;
}
.uinput{
width: 298px;
height: 38px;
/*边框*/
border: 1px solid #ccc;
/*内边距*/
padding: 0 12px;
/*取消轮廓线*/
outline: none;
/*文本框默认文本尺寸较小,手动调整为16px*/
font-size: 16px
}
.rightText{
/*水平右对齐*/
text-align: right;
}
span input{
width: 18px;
height: 18px;
/*设置input img 与其他文本元素的对齐方式 上对齐*/
vertical-align: middle;
}
span{
margin-right: 50px;
}
a{
color: #999
}
.login,.regist{
width: 145px;
height: 38px;
border: 1px solid #64a131;
/*圆角*/
border-radius: 5px;
/*字体大小和居中 按钮文本模式水平居中显示*/
font-size: 18px;
/*行高*/
line-height: 38px;
}
.login{
background-color: #64a131;
color: white;
margin-right: 20px;
}
.regist{
color: #7bae55;
background-color: #f5ffed;
}
img{
display:inline-block;
}
</style>
</head>
<body>
<h2>会员登录</h2>
<img src="../web001/img/huiyuan.jpg">
<form action="login" method="get"></form>
<table>
<tr>
<td class="rightText">手机号</td>
<td>
<input type="text" name="uphone" class="uinput">
</td>
</tr>
<tr>
<td class="rightText">密码</td>
<td>
<input type="password" name="upwd" placeholder="请输入6-20位号码字符" class="uinput">
</td>
</tr>
<tr>
<td></td>
<td>
<span><input type="checkbox" name="isSaved" checked>记住密码</span>
<a href="#">忘记密码?</a>
<a href="#">快捷登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="login" value="登录" class="login">
<input type="submit" name="button" value="注册会员" class="regist">
</td>
</tr>
</table>
</body>
</html>