本文主要向大家介绍了机器学习入门之css样式选择器学习笔记，通过具体的内容向大家展现，希望对大家学习机器学习入门有所帮助。

选择器

ID选择器   #id

类选择器   .class

标签选择器 span

通用选择器 #{}

伪类选择符 a:link  a:visited

a:hover a:active

分组选择符 h1，span

注意！

1.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2.可以使用类选择器词列表方法为一个元素同时设置多个样式。

3.子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择

4.继承

某些样式可继承color

不可继承border:1px solid red

5.权值

CSS权值标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /权值为1/

p span{color:green;} /权值为1+1=2/

.warning{color:white;} /权值为10/

p span.warning{color:purple;} /权值为1+1+10=12/

 footer .note p{color:yellow;} /权值为100+10+1=111/

p{color:red!important;} 最高权值  注意：!important要写在分号的前面

6.层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

7.body{font-family:"Microsoft Yahei";}  英文，M和Y一定要大写才能显示出来

因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）

8.字体

font-family:设置字体；

font-size:字体大小；

{font-style:italic;}斜体

{text-decoration:underline;}设置字体样式_下划线

{text-decoration:line-through;}_删除线

p{text-indent:2em;}首行缩进2em

p{line-height:2em;}行高 2em

{letter-spacing:10px}文字间隔   或字母间隔

word-spacing单词间距设置

{text-align:center;}文本、图片设置居中样式

font-weight:bold：设置为粗体样式；

font-weight:normal 默认值

bold 定义粗体字符

bolder 定义更粗的字符

lighter 定义更细的字符

100-0=900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold

元素分类

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

常用的内联块状元素有：

<img>、<input>

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

将内联元素a转换为块状元素，从而使a元素具有块状元素特点。a{display:block;}

将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

div{display:inline;}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标人工智能机器学习频道！