web初学 CSS(层叠样式表)一

• 编写CSS思想：第一步：确定html的大体框架；
•                          第二步：查找网页共同点编写CSS样式表；
•                          第三步：将CSS写入HTML标签中。

一、CSS的基本认识

        1、CSS的作用：

                  CSS：层叠样式表，主要用于美化HTML结构体。

二、CSS语法格式与三种运行格式：

    1、CSS语法格式：

p{ font-size: 36px;  color: red;  text-align: center;}   /*  注意：这里加引号   */

     2、CSS语法规则：

    3、CSS样式表的三种形式：

         （1）行内式：

         （2）嵌入式：

                     规则：

                   例：

<style type="text/css">         /*            */
        body{width: 600px;
			}
			p{text-indent: 32px;
			}
</style>

          （3）外链式：通过 link 标签的用法：

           

                          https://blog.csdn.net/qq_16555103/article/details/83573279#t12

三、CSS选择器的分类：

       1、标签选择器：权重为  1

      2、类名选择器：权重 为 10

             特点：一个标签可以有  多个class选择器（用 空格 隔开）  多个标签可以使用  同一个 class名。

            易错：类名 前面的 . 不要忘记。

      3、id 名 选择器：权重 为 100

            特点：id是唯一的 且 一个标签不能有多个id 名。

            易错：id 前面 # 易忘记 、 id 不能设置 int 类型 

      4、属性选择器： 

•          特点： 标签名[属性名=属性值]       ------  不需要加 ‘ ’

                 CSS属性选择器：http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

      5、通配符选择器：

四、CSS常见的属性

•                                单位 ：px  像素  、   em 自适应大小（默认1em  等于  16px ）

    1、字体样式属性：

      （1）font-size 字体大小：

     （2）font-family  字体类型：

• 字体注意项：①  各种字体之间必须用英文状态下的逗号隔开。
•                      ②英文字体名必须位于中文字体名之前
•                      ③如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引, 例如，                                                         font-family:  “Times New Roman”

      （3）字体的粗细：font-weight

     （4）font-variant 字体变体：

               例：

      （5）font-style  字体风格（倾斜）---  值 ：italic 

p{font: italic bold small-caps 23px/40px '黑体';}   ----- 综合字体样式，有顺序、必须属性（font-size/line-height 和 font-family 必须存在） 要求

      （6）综合设置字体样式：

               易错点：① font-size/line-height 和 font-family 必须存在，否则 代码失去作用。

                              ② 特定的顺序：属性之间用 空格 隔开。

                 例：

    2、CSS文本外观属性：

      （1）颜色属性： color

p{color:red;}  
p{color:#CC9933;}   ------ 十六进制方式 每两个为一组,分别对应 红色 绿色 蓝色
p{color:rgb(255,45,0);}  ------ rgb(n,n,n) rgb方式 n为从0-255
p{color:rgba(122,122,122,0.5);}  ----- rgba(n,n,n,m) 前面三个值 跟 rgb相同 m为透明度 0-1 之间

     （2）字符间距letter-spacing与单词间距word-spacing：

                ①letter-spacing：英文字符与中文字符的间距：

                 ② word-spacing：英文单词之间的间距，中文不受影响

                      注意：注意word-spacing 与 letter-spacing 英文的区别：

----------------  <p>we are one</P>
p{letter-spacing:10px;}     --结果 ： w e  a r e  o n e
p{word-spacing:10px;}       --结果 ：we   are   one

     （3）行间距：line-height

     （4）文本转化：text-transform

    （5） text-decoration  文本装饰

      （6）text-align：水平对齐方式 ----- 只对块级元素有效

 注意：

      （7）text-indent：首行缩进  --------  只对块级元素有效

      （8）white-space：空白符处理

p{white-space:pre;}   -----  pre 空白符处理 源代码原样显示 
p{white-space:nowrap;}    -----nowrap 强制不换行,多个空格只会显示一个滑动轮，用<br />标签换行。

五、CSS的复合选择器：

     1、标签指定选择器：

               概念：指定某类相同标签中属性为特定值的某些标签。

p.span{color:blue;}  ------  所有 class属性 为 span 的 p标签。 
p#span{color:blue;}  ------  所有 id属性 为 span 的 p标签。 

     2、后代选择器：

             概念：某些标签递进下一层的某些标签。

             易错：注意 空格 与 > 的区别，>  只操作一层，但某些属性会被继承。

--------------------- 两种方法都是匹配多个标签 ----------

1、 用 空格 的方法--- 特点：递归查找所有子标签、子孙标签 .....
p strong{ ;}  ------ p标签下所有strong标签 
p .strong{ ;}  ------ p标签下所有class属性为strong标签
p .strong span{ ;}  ------- 空格可以多层递进
 2、用 > 的方法 ---- 特点：只会查找 第一层（子标签层）
p > strong{ ;}  ------ p标签下 第一层 所有strong标签 （注意：操作某些属性会被 继承，因此结果与 空格 方式无区别，但 > 只查找 一层。 ）
p > .strong > span{ ;}

    3、并集选择器：

六、CSS的层叠性与继承性：

    1、CSS的层叠性：

                （1）概念：多个选择器 作用 于一个 标签。

                （2）显示方式：根据权重（优先级）显示。

    2、CSS的继承性：

•                注意：后代选择器中 > 与 空格 显示结果 相同的原因是 父标签的继承。> 只匹配 子层标签 , 空格 递归匹配所有                                 子、子孙级标签。

          （1）特点：

              ① 子标签 会默认继承 父标签的 属性 值。

              ② 继承父标签属性 的权重 为 0 (可以用任意标签修改)

              ③ h1 - h6 标题标签的字号会覆盖 所继承 父标签的 字号。

              ④ 并非所有的 父类标签 都可以 继承。

  七、CSS的权重优先级：

                  三条需要注意：

                         ① 权重判断复合 " 就近原则 " ：（1）同权重 ，自上向下 （2）行内式 >  嵌入式 > 外链式 

                         ② 通常情况 复合选择器的权重可以理解是相加的：

                        ③ 最高权限 ：!important 

                     注意