【青训营】- CSS选择器及字体样式CSS书写位置行内式：内部样式表：外部样式表： CSS选择器标签选择器：示

CSS书写位置

行内式：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

内部样式表：

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

外部样式表：

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

CSS选择器

标签选择器：
```
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
```
- 示例：
```
p{
	color:red;
}

<p>
    我是红色的
</p>
```
- 优点：可以把一类标签全部选择出来，比如为某个标签设置统一基础样式，再从此上面修改特定样式。

类选择器：

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

示例：

.para{
	color:green;
}

<p class="para">
    我是绿色的
</p>

优点：可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签

id选择器：

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

示例：

#box{
	background-color:red;
}

<div id="box">
    我的背景时红的
</div>

优点：id唯一，权重高，可以为一个标签设置专属样式，不会不小心影响到其他标签

通配符选择器：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

示例：

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

使用场景：在页面初始情况下，去除页面和浏览器的边距

后代选择器：

父级 子级{属性:属性值;属性:属性值;}

示例：

.box p{
	color:red;
}

<div class="box">
    <p>
        我是红色的
        <p>
        我是红色的
    	</p>
    </p>
    <p>
        我是红色的
    </p>
    <p>
        我是红色的
    </p>
</div>

写法：中间用空格分隔，先写祖先元素，再写后代元素
作用：用来选择指定元素的后代指定元素

子元素选择器：

父级>子级{color:red;font-size:14px;}

示例：

.box>p{
	color:red
}

<div class="box">
    <p>
        我是红色的
        <p>
        我不是红色的，我只是后代不是子代
    	</p>
    </p>
    <p>
        我是红色的
    </p>
    <p>
        我是红色的
    </p>
</div>

写法：中间用>隔开，先写父元素，再写子元素
作用：选择当前元素的子元素，也就是下一级元素，不会选择下下级元素

交集选择器：
```
p.para1{
	color:red
}

<div class="para1">
    我没有被选择
</div>
<p class="para1">
    我被选择了
</p>
```
- 写法：需要选择的标签满足的两个或多个属性连这些，不能加空格，若有标签选择器，优先把标签写在开头
- 作用：选择同时满足两个或多个条件的标签，增加选择器精准度
并集选择器：
```
p,div,.para{
	color:red
}

<p>
    我被选择了
</p>

<div>
    我被选择了
</div>
<span class="para">
	我被选择了
</span>
```
- 写法：各个选择器通过,连接而成
- 作用：如果某些选择器定义了相同的样式，可以利用并集选择器一次定义，让代码更简洁

链接的伪类选择器：

a:link{
	未访问的链接
}
a:visited{
	已访问的链接
}
a:hover{
	鼠标移动到链接上
}
a:active{
	按下鼠标的链接
}

示例：

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

效果：
注意事项：link visited hover active 按照顺序写，可以缺少，最好不要打乱顺序

CSS字体样式

font-size:大小
```
p {  
    font-size:20px; 
}
```
- 作用：设置字体大小
font-family:字体
```
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
```
- 作用：设置字体类型，能够根据不同类型，显示不一样的字体样式,英文有空格或中文需要使用双引号括起来,多个字体类型使用,隔开
font-weight:字体粗细
```
p{
    font-weight:bold
}
```
- 两个值：normal 默认值不加粗，bold加粗用数字表示的话 400表示normal 700表示bold 超过700依然只有700粗
font-style:字体风格
```
p{
    font-style:italic
}
```
- 默认值：normal表示标准字体样式 italic表示字体倾斜，一般可用<em>标签实现倾斜字体

font:综合设置字体样式

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

示例：
```
p{
    font:30px/15px Arial;
}
```
必须保留font-size和font-family属性，其他可以省略

CSS外观属性

color:文本颜色
```
p{
    color:red
}
p{
    color:#ff00
}
p{
    color:rgba(255,0,0,1)
}
```
- 三种写法：英文写，十六进制写，rgb/rgba写，rgba中最后一个值为透明度，1为不透明，0为全透明
text-align:文本水平对齐方式
```
div{
    text-align:center;
}
```
- 三个属性：left左对齐默认值，right右对齐，center居中对齐
- 注意：是让盒子中得内容水平居中，而不是盒子本身，所以属性应该写在一个父盒子上，让子元素对齐
line-height:行间距
```
p{
    line-height:32px
}
```
- 行高等于盒子高时，文本垂直居中
text-indent:首行缩进
```
p{
    text-indent:2em
}
```
- 单位em表示和字号相同，比如2em表示两个字符大小，即首行缩进两字符
text-decoration:文本得修饰
```
span{
    text-decoration:none;
}
```
- 四个值：none默认，没有任何变化 underline文本有下划线 overline文本有上划线 line-through删除线
- 主要用来取消超链接得下划线样式

标签显示模式display

display实现标签显示转换
```
span{
    display:block;
}
```
- 块转行内：display:inline
- 行内转块：display:block
- 转行内块：display:inline-block