一. 概述、
CSS 是一门语言，用于控制网页表现。我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
好处：
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）
二. 导入方式
css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：
1. 内联样式
定义：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red;">鸡你太美</div>
给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。
2. 内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
3. 外部样式
方法1
- 定义css资源文件。
- 在head标签内，定义link标签，引入外部的资源文件
- 如：
- a.css文件：
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
方法2
注意：对于样式表而言，后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中，也可以放在body中，一般建议放在head中，以便于浏览器渲染样式，因为样式在加载完成前需要渲染
注意
css也提供了一种在css文件中到导入其他css文件的功能 – @import，这样就可以也可以导入css文件。
<style>
/* @import 是在css中使用url函数导入其他的css文件，是css本身的能力*/
@import url("css/index.css");
</style>
link和@import的区别
从本质上说，这两种方式都是为了加载css文件，但它们还是存在细微的差别。
- link属于XHTML标签，而@import完全是css提供的一种方式。
link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。 - 加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import
引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。 - 兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
- 使用dom控制样式时的差别：当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
三. 选择器和属性
一般我们会根据使用的频繁率和定义的标准，将css的选择器分为如下几种，方便于我们理解和掌握
1. 基本选择器
基本选择器是使用概率最高，也是最常被使用的选择器，必须要掌握它。基本选择器包括如下选择器：
- 标签选择器（根据标签名称获取）
- ID选择器（获取id为xx的标签）
- 类选择器（获取标签中class=xxx的标签）
- 通用选择器（通配符）
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*不建议使用通配符选择器，建议使用reset.css * { color: red; }*/
/* 标签选择器 */
div {color: aqua; }
/* id选择器 */
#myprogram { background: yellow; }
/* 类选择器题 */
.mylove2 { color: red; }
</style>
</head>
<body>
<div id="first" class="mylove" >
这个是一个div
</div>
<p id="myprogram">这个是段落标签</p>
<div class="mylove mylove2">这个是一个div</div>
<h1>这个是标题</h1> <hr />
<div class="list">
<ul>
<li>这是是一个列表1</li>
<li>这是是一个列表2</li>
<li>这是是一个列表3</li>
<li>这是是一个列表4</li>
<li>这是是一个列表5</li>
<li>这是是一个列表6</li>
<li>这是是一个列表7</li>
<li>这是是一个列表8</li>
<li>这是是一个列表9</li>
<li>这是是一个列表10</li>
</ul>
<li>这是是一个列表8</li>
<li>这是是一个列表9</li>
<li>这是是一个列表10</li>
</div>
</body>
- 注意：
- 标签选择器就是以标签名称为标准选择对应的标签，id则是#id属性来选中标签，
- 一个页面上id必须是唯一的，所以id选择器只能选择一个标签，类选择器是.class属性选择，class
属性的值一个页面上允许出现多次，所以class选择器更加灵活，在开发中一般使用最多，通配符选择器不建议使用（*匹配所有标签）
2. 包含选择器
<style>
/* 子代选择器 */
div.list>ul { border: 1px solid red; }
/* 后代选择器 */
.list li { border: 1px solid red; }
/* 逗号选择器 */
.mylove, #myprogram, h1 { color: #eee; width: 200px; height: 30px;
background: skyblue;}
</style>
层次选择器
<body>
<span>和div平级的span元素</span>
<div>
<p>我的div下的p元素</p>
<span>我是div下的span元素</span>
<p> <span>我是div下 的p下的span元素</span> div下的p </p>
<h1>div下的h1 <span>h1中的span</span> </h1>
</div>
<span>和div平级的span元素</span>
<h2>和div平级的h2</h2>
<span>和div平级的span</span>
</body>
- 概述:
后代选择器:div span:选择div下的所有的span元素，包括子元素的子元素
子选择器:div>span:div下的子元素span元素
相邻兄弟选择器:div+span:和div相邻的兄弟选择器
通用兄弟选择器:div~span:通用兄弟选择器,和div相邻的span元素
结构伪类选择器
同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么
状态，点击后是什么状态。所以，就叫做“伪类”
-
概述
ul li:first-child : 选取ul下的第一个子元素是li的。如果第一个子元素不是li则定位不到
ul li:first-of-type :选择ul li下的第一个类型是li的元素
ul li:nth-of-type(2):找li这个类型第二个的元素
ul li:nth-child(2) :第二个子元素是li的 -
注意：
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点- u E F:
nth-hild(n)在父级里从一个元素开始查找，不分类型 - u E F:
nth-of-type(n)在父级里先看类型，再看位置(推荐使用！！！！)
- u E F:
属性选择器
- 概述
a[title=‘flower’]:a 标签而且属性title的值等于flower
a[title^=‘a’]:a标签而且由title属性的值开头是a
a[title$=‘e’]:a标签而且由title属性的值结尾是e
a[title*=‘e’]:a标签而且由title属性的中包含e
四. 深入css
字体样式
- 概述
font: 风格 粗细 大小 类型 :按照顺序写出来
font-size:字体的大小 12px 24px
font-family:字形 看word中字形的设置
font-weight:粗细 normal[正常] bold[加粗]
font-style:风格 normal[正常] italic[倾斜]
文本设置
- 概述
color:字体颜色
text-decoration:下划线underline 删除线line-through 去掉下划线none 上划线 overline
text-indent:首行缩进 em: 一个汉字
line-height:行高
letter-spacing:字符和字符之间的距离
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
