【关于CSS第一节】

一、 css的三种引入方式 1. 内部样式

2. 行间样式

	
		
		
	
    
        1
	

3. 外部样式

新建一个css文件，把css的文件引入到HTML的页面里,同样的一个css文件可以引入到多个HTML页面里,同一个HTML页面也可以引入多个css文件

	
		
		
        
	
    
        1
	

 内部外部行间的优先级

行间大于内部，行间大于外部，内部和外部采用就近原则

二、选择器 1、基础选择器

             *{  }                                              /* 通配符 */
            [href]{ }                                         /* 属性选择器 */
            [href="#"]{        }                            /*属性值全部匹配的*/
            [href^="https"]{      }                      /* 属性值开头匹配的属性选择器 */
            [href$=".cn"]{     }                          /* 属性值结尾匹配的属性选择器 */
            [href*="qq"]{    }                            /* 属性值包含指定字符的属性选择器 */
            [class~="aa"]{       }                       /* 属性值具有多个值时，匹配其中一个值的属性选择器 */
            [type="password"]{    }                  /* 匹配属性值的属性选择器 */
            

2、复合选择器

        1、并集选择器，用，分隔开

        2、后代选择器  用空格表示

        3、子元素选择器 用>表示

        4、兄弟选择器+ 匹配的是和第一个元素相邻的第二元素 

        5 普通兄弟选择器 ~

3、伪元素选择器

        ::first-line        块级首行                         ::first-letter        块级首字母

        ::before        文本前插入                         ::after        文本后插入

4、结构性伪类

       :root        根元素选择器                        :first-child        选择元素中第一个子元素 

       :last-child       选择元素中最后一个子元素                   :only-child        选择元素中唯一子元素 

       :only-of-type     选择指定类型的唯一子元素                  :nth-child()      选择指定第 N 个子元素 

       :nth-last-child()        选择指定倒数第 N 个子元素

5、UI伪类选择器

       :enabled        选择启用状态的元素                        :disabled        选择禁用状态的元素 

       :checked        选择被选中 input 勾选元素                :valid        验证有效选择 input 元素

       :invalid        验证无效选择 input 元素                      :required        有 required 属性选择元素

       :optional        无 required 属性选择元素                   :focus        获取焦点的元素

6、动态伪类选择器

       :link       鼠标未单击访问的时候的超链接                :active        鼠标单击按下的时候的超链接 

       :hover        鼠标悬停在超链接上 （text-decoration:under; color:yellow; cursor:pointer;）

       :visited        鼠标单击访问后的超链接

三、理想视口

         

四、em和rem

em根据父级变化；rem根据根元素变化

五、 文字和文本相关样式

font-size：字体                                        font-family：文字字体

font-weight： 文字是否加粗  100-700 / bold加粗 /  normal 不加粗   

font-style：italic 倾斜 / normal 不倾斜

line-height：行高（当行高和盒子的高度相等，单行文字在盒子里垂直居中）

文字的复合写法：font： 是否倾斜 是否加粗 字号/行高 字体    （字号和字体是不可以省略）

color：文字颜色                                        text-indent: 2em;首行缩进

文字水平对齐方式text-align：left  左对齐 / center 居中  / right 右  / text-align: justify;  两端对齐

text-decoration：underline下划线 / overline上划线 / line-through 中划线 / none 取消线

solid  实线        dotted 点状        dashed 虚线        double  双线        wavy  波浪线S

文字与文字之间的距离        letter-spacing：

单词与单词之间的距离        word-spacing：         word-wrap: break-word;单词断开 ，文本换行

text-transform: uppercase;全员大写 / lowercase全员小写 / capitalize首字母大写

text-shadow: 4px 4px 4px #008000;（文本添加阴影 横坐标 纵坐标 模糊程度 颜色）

white-space: nowrap;强制不换行        white-space: pre-line;强制换行

white-space: pre-wrap;pre是空白符被保留

                overflow: hidden;/* 超出隐藏 */
                white-space: nowrap;/* 强制不换行 */
                text-overflow: ellipsis;/* 变成省略号 */

引用字体

	
		
		
		
	
	
		HTML无意义的html标签,可以加任何样式
	

六、盒模型

边框 border：

border-width：边宽        border-radius: 50px;圆角

border-style：边型  solid：实线 dotted:点状 dashed:虚线 wavy:波浪线  double:双实线

盒模型宽度：margin+border+padding+content

边宽可以增大盒模型（想要不增大 box-sing：boder-box）

边框的型式必不可少，默认黑色        transparent:透明

内边距 padding：内容与边框的距离（以内容为主）

 padding为一个值的时候，上右下左四个方向都是变化的 
padding为2个值的时候 第一个值代表上下，第二个值代表左右
 padding为3个值的时候 ，上，左右，下
 padding为4个值的时候，顺序为，上，右，下，左 

外边距：margin：boder以外的距离

margin值 同 padding

七、块级元素和行内元素

display: block;块 / inline 行内 / inline-block行内块 / none

八、背景属性

Background:背景颜色 背景图片的路径 是否平铺 背景图片的位置 背景图片是否滚动

背景图片的路径 background-image:url（地址）；

是否平铺：background-repeat:repeat/no-repeat/repeat-x/repeat-y

背景图片的位置：background-position： px px /% % /right bottom left top center

背景图片是否滚动 background-attachment:fixed 固定随着滚动条动背景图片不动 /scroll 卷曲 （随着滚动条动背景图片也动）