11.1  装饰文本

text-decoration可以设置添加到文本的修饰  

underline为定义文本下的一条线

overline为定义文本下的一条线

line-through为定义穿过文本的一条线

span {

        text-decoration:line-through;

    }

11.2

p{text-indent:2em;} 2em是字体的两倍的意思

此代码可以让段落前空两格

11.4

little-spacing 改变文字之间的间距

word-spacing 改变字母之间的间距

11.5

text-align： center  使块状元素中的文本等居中

text-align ：left       使块状元素中的文本等居左

text-align： right     使块状元素中的文本等居右

11.6  长度：

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

2.em:相对单位（相对于像素）随着给定字体大小变化而变化

例：p{font-size:12px;line-indent:2em;}(就是可以使文章开头空24px 也就是2个字体大小的单位)

3.%:相对单位(相对于像素)随着给定字体大小变化而变化

例:p{font-size:12px;line-height:130%}       行间距为12*1.3=15.6px

absolute  与 relative 组合使用

如：

设置两个盒子div1，div2

可以在父div1中设置relative，

div2中设置absolute

就可以在div1中设置div2的位置，不会相对于浏览器定位了

position:fixed;

固定定位

相对于浏览器定位的，不会随滚动条的位置变化而变化。

绝对定位 position：absolute；

a标签有的target属性，代表打开网页的方式。
可选值为”_self和_blank”，默认值为
_self，代表在当前页面打开链接，
_blank代表在新窗口打开链接。
    <a href="https://www.sina.com.cn/" target="_self">新浪<br/></a>  
    <a href="https://www.qq.com/" target="_blank">腾讯</a>

层模型

1、绝对定位 position：absolute

2、 相对定位 position：relative

3、 固定定位 position：fiexd

float

浮动    起飞喽

网页中添加链接：
<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

流动模型中，

内联元素 ，独占一行

1、src：标识图像的位置（网络上已经发布的照片地址）；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
语法应用：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

块级元素：

独占一行，有宽高

font样式的简写方式

body{
   font-style:italic;
   font-weight:bold;
   font-size:12px;
   line-height:1.5em;行间间距
   font-family:"宋体",sans-serif;
}

简写为

body{
   font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

需要注意的是：

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

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

css样式的继承

一般来说继承是一种规则，其标签内的子标签也是可以遵循标签的css样式进行变换

但有些情况下不行

例：p{border:1px solid red;}

其只给p标签进行css样式变换，其内的标签不进行变换

子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素,即元素中的直接元素

例：.first>span{  }

后代选择器，即加入空格,用于选择指定标签元素下的后辈元素

例：.first spam{}

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

                 总结 ：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器，使用*可以让html中所以标签全部设置

                    * {color:red;}

伪类选择符 ：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

            a:hover{color:red;}

分组选择符（，）当你想为html中多个标签元素设置同一个样式时，可以使用

h1,span{color:red;}相当于

h1{color:red;}
span{color:red;}

优先级: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

    ***权值***浏览器是按照权值大小选择服从哪个选择符的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*/

在某个css样式后加！important可以让这个css样式的权值最高

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

以上用类选择器是正确的

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

以上用id选择器是错误的 id选择器只能用一次