从零开始学习前端开发 — 2、CSS基础
一、CSS简介
1.CSS是什么
CSS是Cascading Style Sheets的简称，中文称为层叠样式表。特点：实现了表现与结构相分离
2.css基础语法
css是由选择符和声明两大部分组成，声明由属性和值组成。
语法： 选择符{
属性:值;
属性:值;
}
注： （1）属性和值用冒号连接 （2） 一条声明结束要添加分号 （3）属性和属性不分先后顺序
3、样式表的创建
1.内联样式（行间样式，行内样式）
语法：<标记 style="属性:值;"></标记>
eg: <h1 style="color:red;">内联样式</h1>
2.内部样式（嵌入式样式）
语法：
<head>
...
<style type="text/css">
...此处写CSS样式
</style>
</head>
注：一般将style标签放置在head部分
3.外部样式
（a）首先需要创建一个外部css文件（后缀名为.css）
使用link标签引入css文件
语法： <link rel="stylesheet" type="text/css" href="css文件路径"/>
eg:
<head>
...
<link href="xxxx.css" rel="stylesheet" type="text/css">
</head>
注：rel（relationship的简称）用来设置当前文件和引入的文件之间的关系
（b）使用@import的方式引入css文件（import方式现使用较少，老程序员的代码可能会出现如此写法）
语法： @import "css文件路径";
eg:
<head>
...
<style type="text/css">
@import "My.css"; 此处注意.css文件的路径
</style>
</head>
注：link和@import引入外部样式的区别：
（1）link属于html标签，除了可以引入css文件外还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗的区别）
（2）link加载的css文件和页面同时加载，@import引入css文件在页面加载完成后载入（加载顺序的区别）
（3）link是html标签，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持的区别）
（4）link支持js改变DOM样式，@import不支持（对js支持的区别）
4、样式表的优先级
在没有出现!important的时候，采取就近原则（离被设置的元素越近，优先级越高）
内联样式>内部样式>外部样式
当出现!important的时候，它的优先级最高
!important>内联样式>内部样式>外部样式
5、css注释
语法： /*注释内容*/（********注意区分CSS注释和html注释，出错难以发现*******）
二、css选择器
基本选择器
1.id选择器
语法： <标记 id="***"></标记>
#id名{属性:属性值;}
eg: <h1 id="test">测试数据</h1>
#test{color:red;}
注：a）id名是唯一的，不能出现同名的id b) id选择器的优先级最高 c) id名要语义化命名（下划线连接法，驼峰命名法）
2.class选择器（类选择器）
语法：<标记 class="***"></标记>
.类名{属性:属性值;}
eg: <a href="#" class="nav">新闻资讯</a>
.nav{color:red;}
注：a)可以给具有相同样式的元素添加同一个class名 b)类选择器的优先级仅次于id选择器
注：还可以使用类名词列表的方式设置样式
语法： <a href="#" class="nav news">新闻资讯</a>
.news{color:pink;}
3.标签选择器（类型选择符，元素选择符）
语法：标记名称{属性:属性值;}
eg: a{text-decoration:none;}
注：1)如果想改变某个元素的默认样式时，可以使用类型选择符；
2)当统一文档某个元素的显示效果时，可以使用类型选择符；
4.通用选择器（通配符）
语法：*{属性:属性值;}
常用写法： *{margin:0; padding:0;}
注：*匹配html根元素下的所有标签元素
组合选择器
5.群组选择器（多元素选择器）
语法： 选择符1,选择符2,选择符3{属性:属性值;}
eg: .box,.uls,p{color:black;}
6.后代选择器(包含选择器)
语法：选择符1 选择符2{属性:属性值;}
eg:
div p {color: yellow;}
<div>
<p>xxxxxx</p>
<div>
<p>xxxx</p>
</div>
</div>
注：a)选择符1和选择符2必须是包含与被包含关系
7.子元素选择器
语法：父标签>字标签{属性：属性值}
eg:
div > p {color: yellow;}
<div>
<p>xxxxxxx</p>
<p>xxxxxxx</p>
</div>
注：匹配所有div标签里嵌套的子P标签，之间用>分隔。
8.毗邻元素选择器
语法：选择器+毗邻选择器{属性：属性值}
eg:
div + p {color: yellow;}
<div>xxxx</div>
<p>xxxxx</p>
注： 匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
属性选择器
7.属性选择器：
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
1.属性选择器
设置所有具有title属性的标签元素；
<style type="text/css"> [title] { color:red; } </style>
<h2 title="Hello world">Hello world</h2> <a title="a1" href="http://xxxx.com.cn">某某某网址</a>
2.属性和值选择器
下面的例子为 title="xxx" 的所有元素设置样式：
<style type="text/css">
[title=use]
{
border:5px solid blue;
}
</style>
<h1>可以应用样式：</h1>
<img title="use" src="/i/w3school_logo_white.gif" />
<br />
<a title="use" href="http://xxxxx.com.cn">某某某网址</a>
<hr />
<h1>无法应用样式：</h1>
<p title="unuse">Hi!</p>
<a class="W3School" href="http://xxxx.com.cn">某某某网址</a>
3.属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello students!</h1>
<hr />
<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello students!</p>
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
伪类选择器
8.伪类选择器
语法： 选择符:hover{属性:属性值;}
(1)超链接a的四个状态
a） a:link 链接没有被访问过时的状态（超链接的初始状态）
b） a:visited 链接被访问过后的状态
c） a:hover 鼠标滑过时的状态
d) a:active 鼠标按下时的状态
记忆方法：爱恨原则
L o V e H A t e
注：为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
eg: a{color:red;} a:hover{color:green;}
注：除了可以给a添加滑过状态，还可以给其他元素添加滑过状态
eg： .uls li:hover a{color:red;}
当滑过li时，li中的a字体颜色变为红色
(2) before、after
P:before 在每个<p>元素的内容之前插入内容;
P:after 在每个<p>元素的内容之后插入内容。
eg:
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p>测试数据</p>
css选择器权重
将css选择器的权重分为四个等级：
第一等：内联样式 style="..." 权重：1000
第二等：id选择器 权重：100
第三等：类选择器，伪类选择器，属性选择器 权重：10
第四等：标签选择器（类型选择符），伪元素选择器 权重：1
后代选择器权重：所有选择器权重之和
群组选择器权重：选择器自身的权重
当权重相同时，后写的样式会覆盖先写样式
扩展：
css层叠的概念（含义）
层叠指的是样式的优先级，当产生冲突时以优先级高的为准
1. 内联样式>内部样式>外部样式（除非使用!important标记 ）
2. id选择器>类选择器>元素选择器
3. 权重相同时取后面定义的样式
三、CSS核心属性
1.、字体类属性
1.1.字体类型语法： font-family:字体1,字体2,字体3;
常用写法：body{font-family:"微软雅黑",Arial;}
注：a）多个字体之间用逗号分隔
b) 中文字体要加双引号，英文字体由多个单词组成也要加双引号
c) 浏览器会优先识别字体1，如果找不到，识别字体2，如果都找不到，采用浏览器默认字体
1.2.字体大小语法： font-size:数值+单位;
eg: font-size:12px;
注：a）浏览器默认字体大小为16px;
b）字体单位常用的有px,em,rem,pt;
c) 字体一般设置偶数不设置奇数
d) font-size:medium; 等价于 font-size:16px;
1.3.字体加粗语法：font-weight:normal(常规字体)| bold(加粗)|bolder(加粗)| 100-900;
注：100-500为常规字体，600-900为加粗字体
eg： h1{font-weight:normal;}
1.4.字体倾斜语法：font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);
eg: p{font-style:italic;}
1.5.小型大写字母字体语法： font-variant:normal(常规字体)|small-caps(小型大写字母字体);
注：只对英文起作用
1.6.font复合写法语法： font:style weight size family;
eg: font:oblique bold 12px "宋体";
注：a）font-size和font-family不可以互换位置
b) font-size和font-family必须放在最后，不可以和其他属性互换位置
eg： font:12px/1.5 "微软雅黑";
上述写法代表字体大小为12px,行高为字体大小的1.5倍即18px,字体类型为微软雅黑；
1.7.字体颜色语法：color:颜色值;
注：颜色值的三种写法：
a）十六进制写法 #000（黑色） #fff(白色) #f00（红色） (项目开发中常用的写法)
b) rgb模式 rgb(0,0,0) 黑色 rgb(255,255,255) 白色 rgb(255,0,0) 红色
c) 颜色单词 red(红色) green(绿色) blue(蓝色) yellow(黄色) black(黑色) white(白色) gray(灰色)
eg: color:#000; color:rgb(0,0,0); color:black;
2、文本类属性
2.1.文本水平对齐方式语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);
注：a）justify两端对齐只对英文起作用
b) 设置文本内容在父元素中的水平对齐方式，text-align给父元素加
2.2.行高语法： line-height:数值+单位;
注：a）当单行文本的行高等于容器高时，可以实现单行文本在容器中垂直居中
b) line-height不允许设置负值
c）当line-height只写数值不加单位时，代表倍行高，即按照字体大小的倍数设置行高
2.3.文本修饰语法：text-decoration:none|underline(下划线)|overline(上划线)|line-through(删除线);
eg：a{text-decoration:none;} 去掉超链接下划线
2.4.首行缩进语法：text-indent:数值+单位;
eg: text-indent:32px;
注：text-indent设置正值向后缩进，负值向前缩进
2.5.字符间距语法： letter-spacing:数值+单位;
注：主要用来设置字与字，字母与字母之间的间距
letter-spacing允许设置负值
2.6.词间距语法： word-spacing:数值+单位;
注：主要用来设置英文单词和单词之间的间距
允许设置负值
2.7.控制文本大小写语法：text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);
注：只对英文起作用
2.8.长单词换行语法：word-wrap:normal(默认值)|break-word(长单词换行);
注：在长单词或URL地址内部进行换行
2.9.强制在一行显示语法：white-space:normal(默认值)|nowrap(不换行，强制在一行显示);
2.10.文本流控制语法：layout-flow:horizontal（从左到右）/vertical-ideographic（从上到下）;
2.11.垂直对齐方式语法：vertical-align:baseline(基线对齐)|top(顶部对齐)|middle(中部对齐)|bottom(底部对齐);
注：vertical-align主要应用在两个方面:
a）用来设置表格单元格内容的对齐方式
b) 设置行内元素的基线相对于该元素所在行的基线的垂直对齐
3、列表类属性
3.1.列表符号样式语法： list-style-type:disc(实心圆)|circle(空心圆)|square(方块)|decimal(数字)|none(去掉列表符号样式);
3.2.使用图片作为列表符号语法：list-style-image:url(图片路径);
3.3.列表符号位置语法：list-style-position:outside(外边)|inside(里边);
3.4.去掉列表符号样式语法：list-style:none;
常用写法： ol,ul{list-style:none;}
li{list-style:none;}
4、背景类属性
4.1.背景色语法：background-color:颜色值;
eg: background-color:blue;
4.2.背景图片语法：background-image:url(图片路径);
eg: background-image:url(1.jpg);
4.3.背景平铺属性语法：background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);
4.4.背景图位置语法：background-position:left|center|right|数值 top|center|bottom|数值;
eg: background-position:right bottom;
注：a）background-position的属性值中，第一个值代表水平方向，第二个值代表垂直方向
b）当设置数值时，水平方向向右为正，向左为负，垂直方向向下为正，向上为负
c) 当水平方向和垂直方向都为center，可以省略第二个值
4.5.background属性复合写法（简写方式）语法： background:背景色 背景图 背景平铺属性 背景图位置;
eg: background:#f00 url(1.jpg) no-repeat right bottom;
4.6.背景图的显示原则
a）当容器尺寸等于背景图尺寸时，背景图恰好显示在容器中
b) 当背景图尺寸小于容器尺寸时，背景图默认平铺，直至铺满整个容器
c) 当背景图尺寸大于容器尺寸时，只能显示容器范围以内的背景图
4.7.背景图固定语法： background-attachment:scroll(滚动)|fixed(固定);
注：主要用来设置当出现滚动条时，背景图固定不跟随滚动条滚动
4.8.网页上常见的三种图片格式
a）jpg格式：有损压缩格式，适用于颜色丰富的图像
b) gif格式：有损压缩格式,支持动画，支持透明
c) png格式：有损压缩格式，支持透明
5、浮动属性
浮动属性语法: float:none(默认值，不浮动)|left(左浮动)|right(右浮动);
6、清除浮动语法：clear:none|left|right|both;
none:默认值，不清除任何浮动
left: 清除左浮动
right: 清除右浮动
both:清除左浮动和右浮动
注：前面有元素存在左浮动或右浮动，影响到该元素的正常显示，给受影响的元素添加clear属性
