CSS：
css基础选择器
可以理解为：选择器{样式}
（给谁改样式{改什么样式}）
例： p { color: red;
font-size: 12px;
}
选择器：用于指定css样式的html标签
{}花括号内：对该对象设置的具体样式，如字体大小、文本颜色等
- 属性（选择器）和属性值（样式）以“键值对”的形式出现
- 属性和属性值间用冒号（：）隔开，键值对之间用分号（；）隔开
3、css代码风格：展开式（如上例）
1、标签选择器：指用html标签名作为选择器，按标签名称分类
p { color: red;
font-size: 12px;
}
div { color: green;
width: 10px;
}
作用：可以把某一类标签全部选择出来，如所有的<div>标签等
优点：能快速为页面中同类型的标签设置统一样式
缺点：不能设计差异化样式，只能选择全部的当前标签
2、类选择器（口诀：样式点定义，结构类class调用。一个或多个，开发最常用）
<head>
<style>
.news {
color: red;
}
.star-sing {
color: green;
}
<style>
<head>
<body>
<ul>
<li class=”news”>冰雨</li>
<li class=”news”>来生缘</li>
<li class=”star-sing”>搁浅</li>
<ul>
<body>
- 类选择器用“.”进行标识，后面紧跟类名（自己命名）
- 不要使用纯数字和中文命名，使用英文字母来表示（拼音都行）
- 命名要有意义，尽量是别人一眼就知道这个类名的目的
- 命名规范参考（Web前端开发规范手册.doc）
类选择器——多类名：
例： <li class=”news star-sing”>冰雨</li>
- 各个类名中间用空格隔开
- 标签可以分别具有这些类名的样式效果
- 节省css代码且修改更方便
- 布局越复杂越要使用多类名
3、id选择器：（口诀：样式#定义，结构id调用。）
<head>
<style>
.news {
color: red;
}
#star-sing {
color: green;
}
<style>
<head>
<body>
<ul>
<li class=”news”>冰雨</li>
<li class=”news”>来生缘</li>
<li id=”star-sing”>搁浅</li>
<ul>
<body>
id选择器和类选择器的区别：
- 类选择器就像人名，一个人可以有多个名字，同一名字也可以被多个人使用
- id选择器就像人的身份证号码，是唯一且不可重复的
- 最大的不同在使用次数上，id选择器只能使用一次
- 类选择器在修改样式中用的最多，id选择器用于页面唯一性的元素上，经常和JavaScript搭配使用
4、通配符选择器：(样式“*”定义，它表示选取页面中所有元素（标签））
* {
属性1: 属性值1;
...
}
- 通配符选择器不需要调用，自动给所有元素使用样式
- 特俗情况使用，后面讲解使用场景
css字体属性
1、font-family设置字体系列：
p { font-family: “微软雅黑”; }
div {font-family: “Microsoft Yahei”,Arial; }
- 各种字体间必须使用英文状态下的逗号隔开
- 尽量使用系统默认自带字体，保证用户的浏览器能正确显示
- 最常见的几个字体：（一般设置在body，默认显示第一个字体）
Body {font-family: “Microsoft Yahei”,Arial;”Hiragino Sans GB”;}
2、font-size 设置字体大小：
p {font-size: 20px; }
- px（像素）大小是我们网页的最常用单位
- 谷歌浏览器默认的字体大小为16px
- 不同浏览器默认显示的字号大小可能不一致，尽量给一个明确值大小，不要默认大小
- 可以给body指定整个页面的文字大小
- 标题标签（h1-h6）比较特殊，需要单独指定文字大小
- font-weight设置字体粗细：
p { font-weight: bold;}
- normal：默认值（不加粗的）
- bold：定义粗体（加粗的）
- 100-900：400等同于normal，700等同于bold（注意数字后面不加单位）
- 实际开发中，用数字表示粗细更专业
- font-style 设置文字样式（斜体）：
p {font-style: normal;}
- normal：默认值，浏览器会显示标准的字体样式
- Italic：浏览器会显示斜体的字体样式
- 很少给文字加倾斜，反而要给斜体标签<em>改成不倾斜
5、字体复合属性：font（字体）
body {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: “Microsoft yahei”;
}
以上代码可以综合起来写，以更节约代码：
body { font: font-style font-weight font-size/line-height font-family; }
- 使用font属性时，必须按上面语法格式的顺序书写，不能更换顺序，且各属性间用空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，
否则font属性不起作用
CSS文本属性（文本的颜色、对齐文本、装饰文本、文本缩进、行间距）
- 文本颜色：
div{ color: red }
- 预定义的颜色值：red,green,blue,pink
- 十六进制：#FF0000,#FF6600,#29D794
- RGB代码：rgb（255,0,0) , rgb(100%,0%,0%)\
- 开发中最常用十六进制（不需要记，可以用photoshop吸取得到）
- 文本对齐：（设置元素内文本内容的水平对齐方式）
div{ text-align: center; }
- left：左对齐（默认值）
- right：右对齐
- center：居中对齐
3、装饰文本：（给文本删除线、添加下划线、添加上划线）
a { text-decoration: none; }
- none：默认。没有装饰线，常用于链接除去下划线（上面语句即是给链接删除下划线）
- underline：下划线。链接a自带下划线
- line-through：给文本加上删除线（不常用）
- overline：上划线（几乎不用）
4、文本缩进：（指定文本的第一行的缩进，通常是将段落的首行缩进）
div { text-indent: 10px; }
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，该长度甚至可以是负值、
p { text-indent: 2em; }
em是一个相对单位，就是当前元素(font-size)1个文字的大小 （相当于写作文的首行空两格）
5、行间距：（控制文字行与行之间的距离）
p {line-height: 26px; }
改行高实际上是改上间距和下间距
css的引入方式
- 行内样式表（行内式）
<div style=”color: red; font-size: 12px;”>青春不常在</div>
- style就是标签的属性
- 并未体现出结构与样式分离，只有对当前元素添加简单样式的时候可以考虑使用
- 内部样式表（嵌入式）
<style>
div {
color: red;
font-size: 12px;
}
</style>
- <style>一般放在文档的<head>中
- 此种方式可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但并没有实现结构与样式的完全分离
- 此方式练习时较为常用
- 外部样式表（链接式）（实际开发中都是用链接式）
核心：样式单独写到css文件中，之后把css文件引入html页面中使用
两步：
- 新建后缀名为.css的样式文件，把所有css代码放入此文件中
- 在html页面中，使用<link>标签引入css文件
<link rel=”stylesheet” href=”css文件路径” >
（此代码不需要记，link加tab可以出来且要放在<head>标签中）
Chrome（谷歌）浏览器
- ctrl+滚轮 可以放大代码
- 右边css样式可以改动数值和查看颜色（左右箭头或直接输入）
- ctrl+0 复原原浏览器大小
- 点击元素，右边css无样式引入，极有可能是类名或者样式引入错误
- 如有样式，但样式前有黄色感叹号提示，则是样式属性书写错误
