CSS基础入门及案例一
一.CSS基础选择器
1.标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名 {
属性1: 属性值：
属性2: 属性值;
}
示例：
p {
color: red;
}
2.类选择器
如果想要差异化选择不同的标签， 单独选一个或者某几个标签，可以使用类选择器。
语法：结构需用class属性来调用class类的意思
.类名{
属性1: 属性值;
属性2: 属性值;
}
<div class='color'>你好明天</div>
<style>
.color {
color: red;
}
</style>
注：
1）类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）
2）长名称或词组可以使用中横线来为选择器命名（-）
3）不要使用纯数字、中文等命名，尽量使用英文字母表示
4）命名要有意义，尽量让人一眼就知道这个类名的目的
3.类选择器-多类名
可以给一个标签指定多个类名，从而达到更多的选择目的，这些类型都可以选出这个标签（即一个标签有多个名字）,不同类名之间用空格隔开
<div class="类1 类2"></div>
4.id选择器
id选择器只能调用一次
<style>
#pink {
color: pink;
}
</style>
<div id="pink"></div>
5.通配符选择器
语法：
* {
属性1: 属性值;
}
注：
1）在CSS中，通配符选择器使用”*“定义，它表示选取页面中的所有元素（标签）。
2）通配符不需要调用，自动就给所有的元素使用样式
3）特殊情况才使用，（以下是清除所有的元素标签的内外边距）
* {
margin: 0;
padding: 0;
}
二、CSS字体属性
1.字体系列
CSS使用font-family属性定义文本的字体系列
.text {
font-family: "宋体";
}
注：
1）各字体之间必须用英文逗号隔开
2）如果有空格隔开的多单词组成的字体，需加引号
3）尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
4）最常见的字体：
.ziti{
font-family:"Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";
}
5)多字体时，浏览器依次匹配字体，若有，则使用，反之，再匹配下一个
2.字体大小
CSS使用font-size来定义字体大小
语法：
.ziti {
font-size: 16px
}
注：
1）标题标签比较特殊，需单独指定文字大小，若用body等通用匹配符进行配置，无法生效
3.字体粗细
CSS使用font-weight定义字体粗细
语法：
.ziti {
font-weight: normal;
}
属性值：
normal：默认值，正常字体，相当于number值为400
bold：粗体，相当于number为700
bolder：IE5+ 特粗体
lighter：IE5+ 细体
number：IE5+ 100|200|300|400|500|600|700|800|900
注：
1）number数字后面不需要跟单位
2）实际开发常使用number
4.文字样式
CSS使用font-style定义文本的风格
p {
font-style: normal;
}
属性值：
normal：默认值，浏览器会显示标准的字体样式
italic：斜体显示
注：
常用来使<em><i>倾斜的字体变正
5.复合属性
复合属性可以节约代码的书写，但格式顺序为固定式
p { 行高
font: font-style font-weight font-size/line-height font-family;
如：
font: italic bolder 16px/20px "宋体";
}
注：
1）使用font属性时，必须按照语法顺序书写，不能更换顺序，并且各个属性间用空格隔开
2）不需要设置的属性可以省略（默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
如：font: 20px "宋体";
三、CSS文本属性
1.文本颜色
color属性定义文本的颜色
p {
color: red;
}
属性值：
预定义颜色值-red，green，blue
十六进制-#FF000
RGB代码-rgb(255,0,0)或rgb(100%,0%,0%)
2.对齐文本
text-align属性用于定义文本内容的对齐方式
p {
text-align: center;
}
属性值：
center
left
right
3.装饰文本
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
属性值：
none：默认，没有装饰线
underline：下划线，链接a自带下划线
overline：上划线
line-through：删除线
blink：定义闪烁的文本（无法运行在 IE 和 Opera 中）。
4，文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是段落的首行缩进
p {
text-indent: 10px;
text-indent: 10em; #相当于缩进10个文字
}
属性值：
数字+px：定义缩进多少个字符
数字+em：em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
5.行间距
line-height属性用于定义行间的距离（行高），可以控制文字行与行之间的距离
四、CSS样式补充
1.透明度
opacity属性指定元素的透明度，取值范围在0.0-1.0之间，值越低，越透明。
div {
opacity: 0.3;
}
注：
1）使用opacity属性为元素添加背景透明度时，其所有子元素都继承相同的透明度，这可能会使完全透明的元素内的文本难以阅读。
2.background属性
background：可以一次性定义所有的背景属性
body {
background: #fff url("图片路径") no-repeat fixed top;
}
1)background-color：定义背景色
body {
background-color: red;
}
2)background-image：定义背景图片
body {
background-image: url("图片路径")
}
3)background-size：定义背景图片大小
属性值：
length：设置背景图像的宽度和高度（第一个参数为宽度，第二个参数为高度），若只写第一个参数，则第二个参数默认为auto
percentage：以百分比的方式设置图像的宽度和高度，若只设置一个参数，则第二个参数默认为auto
cover:把图像拓展到足够大，使图像可以完全覆盖背景区域，但背景图像的某些部分也许无法显示在背景区域内。
contain：把图像拓展至最大尺寸，使图片的宽度和高度完全适应背景区域
div {
background-size: 20px 50px;
background-size: 50px;
background-size: 50%;
background-size: cover;
background-size: contain;
}
4)background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll：默认值，背景图片会随着页面其余部分的滚动而滚动(图片留在原地)
fixed：当页面滚动时，背景图片不会移动
inherit：规定应该从父元素继承 background-attachment 属性的设置。
5)background-position：定义背景图片的位置
6)background-clip：定义背景的绘制区域
7)background-origin：定义背景图片的定位区域
8)background-repeat：定义背景图片是否平铺
9)inherit：定义从父元素继承background属性的设置
五、CSS的引入方式
按照CSS样式书写的位置（或者引入的方式），CSS样式表分为三大类：
1）行内样式表（行内嵌）
即将CSS代码单独写到<style>标签中，<style>一般放在<head>标签中
2）内部样式表（嵌入式）
直接在标签中添加style属性，如<div style="color: red;">
3）外部样式表（连接式）
即将CSS样式写到CSS文件中，之后把CSS文件引入到HTML页面中使用
外部样式表引用步骤：
1）创建.CSS文件，并将CSS样式写入到CSS文件中
2）在HTML页面中，使用<link>标签引入CSS文件
<link rel="stylesheet" href="CSS文件路径">
六、CSS的复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器的基础之上，对基本选择器进行组合形成的。
复合选择器可以由两个或多个基础选择器，通过不同的方式组合而成。
常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等
1.后代选择器
后代选择器又称包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 {样式}
如：
ul li { 样式 } #选择ul里面的所有li标签元素
.nav li {样式}
注：
1）元素1和元素2中间用空格隔开
2）元素1是父级，元素2是子级，最终选择的是元素2
3）元素1和元素2可以是任意的标签选择器
2.子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。
语法：
元素1 > 元素2 {样式}
如：
div > p {样式} #选择div里面所有最近一级P标签元素
注：
1）元素1和元素2中间用大于号隔开
2）元素1是父级，元素2是子级，最终选择的是元素2
3）元素2必须是亲儿子其孙子、重孙之类都不归它管。
3.并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器是个选择器通过英文逗号（,）链接而成，任何形式的选择器都可以作为并集选择器的一部分。
约定的语法规范，并集选择器习惯竖着写
语法：
元素1,元素2 {
样式
}
div,
p,
.pig li {
样式
}
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，如给链接添加特殊效果（当鼠标移过去变颜色等），或选择第1个，第n个元素。
伪类选择器书写特点的用冒号（：）表示：
:hover、:fist-child
1)链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注：
1）为了确保生效，请按照LVHA的顺序声明：-:link -:visited -:hover -:active
2）因为a链接在浏览器中具有默认样式，所有实际工作中都需要给链接单独指定样式
2）:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input:focus {
background-color:yellow;
}
注：
1）用于input
2）用于a标签
六、CSS的元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，如<div>自己就独占一行，一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型。
1.块元素
常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
块元素的特点：
1）比较霸道，独占一行
2）高度、宽度、外边距以及内边距都可以控制
3）宽度默认是容器（父级宽度）的100%
4）块元素是一个容器及盒子，里面可以放行内或块级元素
注：
1）文字类的元素内不能使用块元素
2）<p>标签主要用于存放文字，因此，<p>里面不能放块元素，特别是不能放<div>
3）同理，<h1>~<h6>
2.行内元素
常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>是典型的行内标签，有的地方也将行内元素称为内联元素。
行内元素的特点：
1）相邻的行内元素在一行上，一行可以显示多个
2）高、宽直接设置是无效的
3）默认宽度就是它本身的宽度
4）行内元素只能容纳文本或其他行内元素
注：
1）链接里面不能再放链接
2）特殊情况链接<a>里面可以放块元素，但是给<a>转换一下块级模式最安全
3.行内块元素
在行内元素中有几个特殊的标签<img>、<input>、<td>，它们同时具有块元素和行内元素的特点，称行内块元素。
行内块元素的特点：
1）相邻行内元素（行内块）在一行上，但它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2）默认宽度就是它本身的宽度（行内元素的特点）
3）高度、行高、外边距以及内边距都可以控制（块级元素特点）
4.元素显示转换
特殊情况下，我们需要元素的转换，简单理解：一个模式的元素需要另一种模式的特性，如想要增加链接<a>的触发范围
模式转换：
1）转换为块元素：display:block;
2）转换为行内元素：display:inline;
3）转换为行内块元素：display:inline-block;
5.截图小工具snipaste
常用快捷键
1）F1截屏，同时测量大小、设置箭头、书写文字等
2）F3在桌面置顶显示
3）点击图片，alt可以取色（按下shift可以切换取色模式）
4）按下esc取消图片显示
6.文字垂直居中（原理）
当行高(line-height)等于盒子(height)高度时，文字垂直居中显示
div {
height: 40px;
line-height: 40px;
}
原理：盒子高度=文字高度+上下边距（正常上边距=下边距）
行高=文字高度+上下边距
故：
1）当行高=盒子高度时，由于上下边距相同，故文字会被挤到中间
2）当行高>盒子高度时，由于文字高度加上边距>盒子高度/2，故文字会被挤到中下方，即文字偏下显示
3）当行高<盒子高度时，由于文字高度加上上边距<盒子高度/2，故文字会偏上显示
七、案例
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
<title>小米侧边栏</title>
</head>
<body>
<div>
<ul>
<li>
<a href="#">手机 电话卡</a>
</li>
<li>
<a href="#">电视 盒子</a>
</li>
<li>
<a href="#">笔记本 平板</a>
</li>
<li>
<a href="#">出行 穿戴</a>
</li>
<li>
<a href="#">智能 路由器</a>
</li>
<li>
<a href="#">健康 儿童</a>
</li>
<li>
<a href="#">耳机 音响</a>
</li>
</ul>
</div>
</body>
</html>
CSS代码
li {
list-style: none;
}
ul li a:link {
display: block;
width:204px;
height: 42px;
background-color: rgb(83, 87, 88);
text-decoration: none;
color: white;
font-size: 16px;
padding-left: 30px;
line-height: 42px;
}
ul li a:hover {
background-color: rgb(255, 103, 0);
color: white;
}
