CSS选择器 字体 引入方式总结

CSS 选择器 字体 引入方式

ps: 自动排版快捷键
alt+shift+f (windows)
option+shift+f (IOS)

一、选择器

选择器分为 基础选择器 和 复合选择器

1、基础选择器

基础选择器 由 单个选择器组成的
基础选择器 包括：标签选择器， 类选择器，id选择器，通配符选择器

（1）标签选择器

标签名{
atrribute name:value;
}
eg:
P {
color:red;
}

（2）类选择器

.类名{
attribute name:value;
}
eg:
.red {
color: red;
}
//可以单独选一个或者某几个类选择器

eg:

<style>
.red {
 color: red;
 }
</style>
.Nav {
color:black;

（3）id选择器

#id name{
attribute name:value;
…
}

eg:

#Nav{
color:red;
}
<div id="Nav">
content
</div>

PS：id选择器只能调用一次

（4）通配符选择器

* {
 attribute name: value;
 ...
}

选取了页面中所有的标签

基础选择器conclusion

2、复合选择器

（1）后代选择器

eg:

ol li a {
color: red;
}
.nav li a {
color:red;
}

所有后代都会被选中

（2）子选择器

eg:

.hot>a {
color: red;
}

（3）并集选择器

eg:

.pig li {
color:pink;
}

（4）伪类选择器

//1.未访问的链接a:link 把没有点击过的（访问过的）链接选出来
a:link {
color: black;
text-decoration:none;
}
//2.a:visited 选择点击过的（访问过的）链接
a:visited {
color:orange;
}
//3. a:hover 选择鼠标经过的那个链接
a:hover {
color :blue;
}
4.a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
a:active {
color: green;
}

（5）focus伪类选择器

:focus 伪类选择器次用于选取焦点的表单元素
焦点 —光标 一般情况用于input标签
eg：

input:focus{
background-color:yellow;
}

复合选择器总结

二、字体

（1）字体系列

（2）字体大小

（3）字体粗细

（4）字体样式

（5）font复合写法

eg:

font: italic 700 16px 'Microsoft yahei';

三、CSS引入方式

1、内部样式表（嵌入式引入）

将CSS放入HTML文档内的style标签中
注意：
（1）样式表可放置在HTML文档内部任意位置
（2）可控制整个HTML页面的的元素样式

2、行内样式表（行内式引入）

直接在元素标签内部的style属性中设定CSS样式，此方法适用于一些简单样式

<div style="color: red;">
Levi is writing her blog.
</div>

3、外部样式表

适用于样式较多的情况。
将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
step1： 新建CSS文件，即建立后缀名为.css的样式文件（在其中无需写style标签，直接写样式）
step2：在HTML页面中，使用标签引入上述样式文件
在head标签中引入以下代码，以连接两个文件

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

CSS引入方式总结