黑马程序员第三天
今天是学习css的第一天
1.css基础认知：css使用场景，美化网页，布局页面
1.1简介：css是层叠样式表
1.2css设置哪些样式：文本内容、图片、版面布局。
1.3css语法规范：
包含：选择器（改谁的样式）、样式声明（改成什么样式）。
位置：<head></head>中
语法格式：属性：_值；属性；属性
2.选择器
分为基础选择器和复合选择器
2.1标签选择器：
定义：用html标签名作为选择器
作用：把某一类标签全部选出来，统一修改
2.2类选择器：（.）
口诀：样式点定义，结构类调用，一个或多个，开发最常用。
作用：差异化选择不同标签
注意：不能使用纯数字、中文命名；写拼音定义最好写全拼；点后不要加标签名。
多类名：给一个标签指定多个类名。
①多类名使用方式：class中多个类名，类名之间空格隔开
②多类名使用场景：把一些标签元素相同的样式放在一个类里面
2.3id选择器（#）id=…
场景：给页面唯一的元素样式
id只能调用一次（唯一）id选择器用的较少
2.4通配符选择器：（*）
选取页面中所有的标签
不需要调用，自动使用
特殊情况才使用。
3.字体属性（定义字体系列）
3.1 font-family （字体系列）
各种字体之间必须用英文逗号隔开；
有空格隔开的多个单词组成的字体加引号
尽量使用系统默认自带字体
3.1 font-size （字体大小） px：单位（像素） 谷歌默认：16px
标题标签需要单独指定字体大小；
可以给body指定整个页面文字大小
扩展：ctrl+滚轮：页面放大缩小、ctrl+0：恢复
3.3 font-weight （字体粗细）
normal：正常字体（400）
bold：加粗（700）
bolder：特粗
实际开发中用数值，表示加粗加细，没有单位。
3.4 font-style （字体样式）
主要针对倾斜，
normal：默认值；italic：倾斜
3.5 font复合属性写法
文字样式综合来写
顺序：font-style，font-weight，font-size/line-height，font-family
必须按照顺序来写，各个属性空格隔开
必须保留 font-size和font-family
4 文本属性（定义文本外观）
4.1 color （文本颜色）
预定义： 英文
十六进制：#…（用得最多）
RGB代码：rgb（.,.,.）
注释：#ffffff：白色；#000000：黑色；#ff0000：红色
rgba代码多加了个透明色
4.2 text-align（对齐文本）水平对齐方式
属性：left（左）；right（右）；center（居中）
文本对齐对span，a，em，ins，strong等设置不生效
4.3 text-decoration（文本装饰）
可以给文本添加下划线、删除线、上划线
属性：none默认没有；underline下划线；line-throught删除线；overline上划线
a{text-decoration：none}：取消下划线
4.4 text-indent（文本缩进）
文本第一行的缩进（段落首行）
em是一个相对单位，相对当前元素一个文字大小
仅对独占一行元素生效
4.5 line-height（行间距）
用于控制文字行与行之间的距离
行间距：上间距，下间距，文本高度
5 css的三种引入方式
5.1 css三种样式表
5.11 内部样式表：写在html内部
理论可以放在html任何地方，一般放在 /head 上
5.12 行内样式表：
在元素标签内部中的style属性中设定样式
没有实现分离，样式少时使用，不推荐使用
5.13 外部样式表：
适合样式比较多的情况
单独写在 .css文件中，把css文件引入到html中
css文件中只有样式，没有标签
新建 .css文件，写代码，在html页面中，使用link标签引入这个文件
<link rel="stylesheet" href=".css文件">
6 Chrome 调试工具
6.1 打开调试工具：F12或者右键（检查）
6.2 使用调试工具
6.11 ctrl+滚轮：缩放；ctrl+0:恢复
6.12 左：html；右：css
6.13 检查错误
7 百度案例：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
font: 15px 'microsoft yahei';
}
.xiahuaxian {
text-decoration: none;
font-weight: 700;
color: #000000;
}
.box {
width: 400px;
height: 40px;
}
.box1 {
width: 100px;
height: 45px;
}
a {
color: rgb(87, 0, 128);
}
p {
color: gray;
}
</style>
</head>
<body>
<div><img src="./image/bdlogo.gif" alt=""></div>
<div><a href="#">新闻</a>
<a href="#" class="xiahuaxian">网页</a>
<a href="#">贴吧</a>
<a href="#">知道</a>
<a href="#">音乐</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">地图</a>
</div><br><br><br>
<div>
<input type="text" class="box"> <button class="box1">百度一下</button>
</div><br><br><br>
<div>
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao12 | </a>
<a href="#">更多>></a>
</div><br><br><br>
<div>
<img src="./image/ic.jpg" alt="">
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div><br><br><br>
<div>
<a href="#">把百度设为主页安装百度卫士</a><br><br>
<a href="#">加入百度推广|</a>
<a href="#">搜索风云榜|</a>
<a href="#">关于百度|</a>
<a href="#">About Baidu|</a><br>
<p>
©2013 Baidu 使用百度前必读 京ICP证030173号
</p>
</div>
</body>
</html>
8 心得体会：
今天是学习css的第一天，经过昨天老师的帮助，预习了今天的课程，让我学习的能够轻松一些，希望明天能够右更多的收获，也会一直好好学习。