# CSS介绍
为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生.
CSS是 Cascading Style Sheets 的首写字母缩写,意思是层叠样式表.
有了CSS, html 中大部分表现样式的标签就废弃不用了, html只负责文档的结构和内容,
表现形式完全交给CSS, 这样使得html文档变得更加简洁.
1. CSS基本语法
CSS使用格式:
选择器 {
属性 : 值;
属性 : 值;
...
}说明:
- 选择器是将样式和页面元素关联起来的名称
属性名是希望设置的样式属性, 每个属性有一个或者多个值
属性和值之间用冒号隔开
- 一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
例如:
div {
width: 100px;
height: 100px;
background: gold;
}2. CSS引入方法
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.
<div style="width:100px; height:100px; background:red;">
这是个div标签
</div>2. 嵌入式:
通过 style 标签, 在网页上创建嵌入的样式表.
<head>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>3.外联式:
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">3. CSS选择器
CSS选择器: 帮助我们找寻标签, 找到之后 添加样式
CSS 的四种基本选择器:
- 通用选择器 ( * )
- 标签选择器 ( 标签名 )
- 类选择器 ( class )
- id 选择器 ( id )
CSS 组合选择器:
- 多元素选择器
- 后代选择器(层级)
- 子元素选择器
- 兄弟选择器
CSS 属性选择器:
- 属性选择器
3.1 基础选择器:
1. 通用选择器
通用选择器, 匹配任何元素:
使用格式:
* {
属性名: 值;
属性名: 值;
...
}例如:
* {
margin: 0px;
padding: 0px;
}有些标签自动会增加一些内边距和外边距等样式, 我们可以使用这个选择器把默认的都给去掉
2.标签选择器
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
通用格式:
标签名 {
属性名: 值;
...
}例如:
CSS部分:
<style>
div {
color: red;
}
p {
font-size: 18px;
}
</style>
HTML部分:
<div>这里是html部分</div>
<p>html区域的p标签</p>一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意
3.类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
应用灵活, 可复用, 是css中应用最多的一种选择器
常见格式:
.类名 {
属性名: 值;
...
}举例:
CSS部分:
<style>
.blue {
color: blue;
}
.header {
font-size: 19px;
}
.box {
color:orange;
}
/* 这是CSS注释的写法,可以作为单行注释,也可以作为多行注释 */
/* 针对下面的代码, 如果我们想单独选中div, 则可以这样写: */
div.blue {
/*文字变为斜体*/
font-style: italic;
}
</style>
HTML部分:
<div>这是div标签</div>
<div class="blue">这个标签的字体颜色会变成蓝色,是因为class选择器</div>
<p class="blue">这是div下面的p标签,也会变成蓝色,因为用的是同样的选择器,名字也一样</p>
<h3 class="blue header box">这个标签有好多个class类名, 则都会加载不同类名下面的样式, 形成重叠效果</h3>
<p class="header">这个标签的类名和上面的有一样的,所以上面的header样式也会加载在这个标签上</p>4. id选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
使用格式:
#ID名 {
属性名: 值
}举例：
CSS部分:
<style>
#box {
color:red
}
#box1 {
background:blue;
}
</style>
HTML部分:
<p id="box">这是第一个段落标签</p>
<p id="box1">这是第二个段落标签</p>
<p>这是第三个段落标签</p> 3.2 组合选择器
1. 多元素选择器
同时匹配所有 E元素 和 F元素, E和F之间用逗号分隔:
使用格式:
E,F {
属性名: 值;
属性名: 值;
...
}例如:
CSS部分:
<style>
.box,p {
color: red;
}
</style>
HTML部分:
<div class="box">这是一个美丽的div</div>
<p>美丽div下面的段落标签p</p>2.后代选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
使用方式:
E F {
属性名: 值;
属性名: 值;
...
}例如:
CSS部分:
<style>
.con {
width: 100px;
height: 100px;
}
div p {
color: red;
}
.con .pbox {
color: pink;
}
</style>
HTML部分:
<div class="con">
<p>这里是span标签的内容</p>
<div class="pink">
这里是div中的div标签
<p class="pbox">粉红色啊粉红色</p>
</div>
</div>层级选择器: 按照标签的层级来匹配对应的标签
3. 子代选择器
E > F 匹配所有 E元素的 子元素F
使用格式:
E > F {
属性名: 值;
属性名: 值;
...
}例如:
CSS部分:
<style>
div>p {
color: red;
}
div>div{
font-size:30px;
}
/* 选中了a标签, 但是div内部的内容是没有改变的,说明可以确切的选中某一个 */
.box>a {
background: pink;
}
</style>
HTML部分:
<div class="con">
<p>这是div元素的子集p元素</p>
<div class="box">
div标签的内容部分
<a href="#">第二个div的子集:a元素</a>
</div>
</div>4. 毗邻选择器
匹配所有紧随 E元素 之后的同级元素F (向下寻找)
使用格式:
E + F {
属性名: 值;
属性名: 值;
...
}例如:
CSS部分:
<style>
.box + div {
color: red;
}
</style>
HTML部分:
<div>第一个div,啦啦啦~</div>
<div class="box">第二个div,啦啦啦~</div>
<div>第三个div,啦啦啦~</div>3. 3 属性选择器
1. 第一种属性选择器的使用
使用方法:
[attr] {
属性名: 值;
属性名: 值;
...
}
[title] {
}例如:
CSS部分:
<style>
[name] {
color: red;
}
</style>
HTML部分:
<div> hello1 </div>
<div name="peter"> hello1 </div>
<div title="haha"> hello1 </div>
<div> hello1 </div>2. 第二种属性选择器的使用
使用方法:
E[attr=val] {
属性名: 值;
属性名: 值;
...
}例如:
CSS部分:
<style>
[name="peter"] {
color: red;
}
</style>
HTML部分:
<div> hello1 </div>
<div name="peter"> hello1 </div>
<div name="bill"> hello1 </div>
<div> hello1 </div>3.4 伪类选择器
1. 伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
CSS部分:
<style>
.box1 {
width:100px;
height:100px;
background:gold;
}
.box1:hover {
width:300px;
}
</style>
HTML部分:
<div class="box1">别看村子不咋大呀， 有山有水有树林， 邻里相亲多和睦， 老少爷们也合群</div>
补充:
#input:focus {
outline: none;
border: 2px solid red;
}总结:
- CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.
- CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.
- 标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.
- class 类选择器是经常使用的选择器. 可以多多练习
- 层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素
- id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.
- 伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可
<html>
<head>
<style type="text/css">
a:link {color: red} /* 未访问时的状态 */
a:visited {color: orange} /* 已访问过的状态 */
a:hover {color: pink} /* 鼠标移动到链接上时的状态 */
a:active {color: yellow} /* 鼠标按下去时的状态 */
</style>
</head>
<body>
<p>
<b><a href="/index.html" target="_blank">这是一个链接。</a></b>
</p>
<p>
<b>注释：</b>
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
</p>
<p>
<b>注释：</b>
在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！
</p>
</body>
</html>注意嵌套规则:
- 块级元素 可以包含内联元素或某些块级元素, 但是内联元素不能包含块级元素,它只能包含其他内联元素
- 有几个特殊的块级元素只能包含内联元素,不能包含块级元素. 如h1, h2, h3, h4, h5, h6, p
- li 内可以包含 div
- 块级元素与块级元素并列 , 内联元素与内联元素并列.
补充: (仅需要了解)
初始化CSS (需要了解)
为什么要初始化CSS？
建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。
写过css的都知道每个网页引进的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘宝等都出现他的影子），业内用的最多的还有Erik Meyer’s CSS Reset。
CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。
雅虎工程师提供的CSS初始化示例代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }