一篇文章带你入门css

css是什么？

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

css其实相当于化妆品，让你的网页更加好看。举个例子，下图为世界上第一个网站的图片

 

虽然这个网站是在现代浏览器上打开的，但是他的确是世界上第一个网站，网址 

http://info.cern.ch

可以看到，那时并没有css，网页就像我们写的word文档一样，但是网页就是要吸引住更多的人

单纯的把word变成网页是肯定不行的，所以就有了css

css怎么实际应用到我的html里面？

首先，引用css有两种情况，第一就是直接在html添加css代码，第二种就是在head里面引用其他后缀为css的文件，它可以是你电脑上的，也可以是其他以网址（URL）形式出现的路径

引用其他css文件的代码

<link rel="stylesheet" type="text/css" href="css文件路径">

关于文件的路径，这里我们不得不再提到一个概念

相对路径和绝对路径

绝对路径：

在你电脑上的任意文件，右键它，选择复制文件地址，得到的地址就是这个文件在你电脑上的路径，这被称为绝对路径

相对路径：

比如你在你桌面上新建了一个html文件，又在桌面上新建了一个css文件，那么你在引用这个css文件时，你可以在路径里面直接填写上这个css文件的名字，前提是他们在同一目录里面。

再比如，你在桌面新建了一个html文件，又新建了一个文件夹，这个文件夹名叫1234，你又在1234里面新建了一个css文件，名叫css.css，那你在桌面的html文件里面引用这个css文件时，就可以再路径里面填写为1234/css.css。具体的你熟悉了就明白了。

使用相对路径的好处：

1. 便于维护项目
2. 如果进行大规模的移动，比如你想把整个项目的文件夹移动到另一个地方，那如果使用绝对路径，就要全部进行改动，如果使用相对路径就不会有这种情况

言归正传！！！

如果你是初学者，我建议你先在自己的html里面直接添加css代码，便于理解。在实际项目里面，大多情况都是引用css文件，这样便于项目的管理，不会让主html文件不便于维护和添加新元素

 在html里面直接写入css代码的方法：

<style>
css代码
</style>

给你的页面元素添加css样式！

知道了怎么引用css，接下来就要知道怎么给html中的元素添加css，使其更加美观！

举个例子，我们要给一个按钮（button）添加上css样式

<button>这是一个按钮</button>

首先要给这个button按钮添加上一个参数，“class”

<button class="A">这是一个按钮</button>

class参数的内容主要就是这个元素对于css的名字

就相当于我们每个人的名字，我们要想给自己添加css样式，就要告诉css，我们叫什么

接下来在html文件里面添加style标签，并且告诉css，我们要给谁添加样式

<button class="A">我是一个按钮，我要添加样式！</button>

<style>
.A{

样式

}
</style>

这样，我们就可以开始写按钮A的样式了，当然还有一种情况，就是要给页面中某一种标签全部添上同一种样式

比如页面中有三个按钮，要给它们添加上同一种样式，就可以这样写

<button>我是一个按钮</button>
<button>我是一个按钮</button>
<button>我是一个按钮</button>
<button>我是一个按钮</button>
<button>我是一个按钮</button>

<style>
button{
页面中所有button的样式
}
</style>

css的这种，获取某一元素或者多个元素的方式，被称为“选择器”

css选择器有很多类型，可以根据实际情况决定

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和 <p> 元素	1
element.class	p.hometown	选择所有 class="hometown" 的 <p> 元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute|=language]	[lang|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<p>元素的第一个字母	1
:first-line	p:first-line	选择每一个<p>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读） 属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

• 元素选择器（Element Selector）：通过元素名称选择 HTML 元素。例如，p 选择器将选择所有 <p> 元素。

• 类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头，后面跟着类别名称。例如，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

• ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。ID 选择器以 # 开头，后面跟着 ID 名称。例如，#logo 选择器将选择具有 ID 为 "logo" 的元素。

• 属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

• 后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。例如，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

• 子元素选择器（Child Selector）：通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

• 相邻兄弟选择器（Adjacent Sibling Selector）：通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素。例如，h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

• 通用选择器（Universal Selector）：选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。

通过选择器，你就可以快速的给某一元素或者多个元素添加样式

css常用的样式

width: 20px;                                        设置元素长度
height: 65px;                                      设置元素宽度
background-color: #44495a;              设置元素背景颜色
font-size: 24px;                                   设置元素内文字的字号
color: #fff;                                            设置元素内文字的颜色
 

css的样式参数有很多，上面的都是常见的参数，积累更多的参数的好方法就是随便找一个网页，通过查看源代码，获取它的css代码，有不懂的，可以上网查，从而快速的积累更多的css参数，这种方法比死记硬背更好

css参数的长度单位

1.绝对单位（指定该元素的某一参数的长度）

单位	描述	浏览器兼容性（最低版本）
cm	厘米	IE 3.0
mm	毫米	IE 3.0
in	英寸 (1in = 96px = 2.54cm)	IE 3.0
px *	像素 (1px = 1/96th of 1in)	IE 3.0
pt	point，大约1/72英寸； (1pt = 1/72in)	IE 3.0
pc	pica，大约 12pt，1/6英寸； (1pc = 12 pt)	IE 3.0

2.相对单位（通过获取浏览器窗体的大小决定某一元素的某一参数的长度） 

单位	描述	在线实例
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；	尝试一下
ex	依赖于英文字母小 x 的高度	尝试一下
ch	数字 0 的宽度
rem	rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。	尝试一下
vw	Viewport Width，视窗宽度，1vw=视窗宽度的1%	尝试一下
vh	Viewport Height，视窗高度，1vh=视窗高度的1%	尝试一下
vmin	vw和vh中较小的那个。	尝试一下
vmax	vw和vh中较大的那个。	尝试一下
%	指定该元素的长度或者宽度占用页面的百分比	暂无

---

 css入门课程到这里就结束了，学习css的最好方法就是自己新建一个html文件，自己去慢慢的实现一些样式，因为我们生活中见到的用css实现的样式太多了，我们可以自己去尝试实现它，如果有不会的参数，可以上网查。自己去琢磨，当你实现一个目标时，这个css参数，你自然就记在脑子里了。学习代码最忌讳的就是死记硬背，自己去试一试，自然就学会了

---

如果有不对的地方，欢迎指正！！！