CSS 基本使用_2 css样式p{font-size:14px;}作用是？-CSDN博客

本文链接：https://blog.csdn.net/qq_33758347/article/details/89215745

样式优先级：

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

标签的权值为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*/

还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低
!important 最高权值

选择器：

标签选择器：用标签名
id选择器：用#+id
类选择器：用.+类名
子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素
```
.food>li{border:1px solid red;}
```
包含(后代)选择器：即加入空格,用于选择指定标签元素下的后辈元素
```
.first  span{color:red;}
```
通用选择器：匹配html中所有标签元素
伪类选择符：比较常用的是 a:hover 的组合，其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器。
分组选择符：个标签元素设置同一个样式时，可以使用分组选择符（，）
```
h1,span{color:red;}
```

样式

font-family:"Microsoft Yahei"; /*设置样式*/
font-size:20px; /*设置文字字号*/
font-weight:bold; /*设置字体加粗*/
font-style:italic; /*设置字体斜体*/
text-decoration:underline; /*设置下划线*/
text-decoration:line-through; /*删除线*/
text-indent:2em; /*设置缩紧*/
line-height:3em; /*设置行间距*/
letter-spacing:20px; /*设置字间距*/
text-align:center; /*距中*/

css盒模型

块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联块状元素：<img>、<input>
display:block; 将元素转为块元素 display:inline;将块元素转为内联元素 display:inline-block 将元素转为内联块元素
盒子模型边框
1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

3、border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用像素（px）
设置边框：border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;border-bottom:1px solid red;

css布局模型

三种布局模型：1、流动模型（Flow）2、浮动模型 (Float) 3、层模型（Layer）
流动模型：自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置
浮动模型：流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示，块级原素通过float来浮动
层模型有三种形式：1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)
盒子模型代码简写：
1、如果top、right、bottom、left的值相同，如下面代码：
```
margin:10px 10px 10px 10px; 可缩写为：
```
```
margin:10px;
```
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
```
margin:10px 20px 10px 20px;
```
可缩写为：
```
margin:10px 20px;
```
3、如果left和right的值相同，如下面代码：
```
margin:10px 20px 30px 20px;
```
可缩写为：
```
margin:10px 20px 30px;
```
注意：padding、border的缩写方法和margin是一致的。
颜色值缩写

例子1：
```
p{color:#000000;}
```
可以缩写为：
```
p{color: #000;}
```
例子2：
```
p{color: #336699;}
```
可以缩写为：
```
p{color: #369;}
```
字体缩写
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
```
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
```
这么多行的代码其实可以缩写为一句：
```
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
```
注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
```
body{
    font:12px/1.5em  "宋体",sans-serif;
}
```
只是有字号、行间距、中文字体、英文字体设置。

颜色值

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

1、英文命令颜色

前面几个小节中经常用到的就是这种设置方法：

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

长度值

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。