CSS入门篇基础总结（一）

Css—层叠样式表

网页是多层的，可以给每层设置样式，最终看到最上一层

第一种方法：内联样式、行内样式

直接写在开始标签里面

Style属性，在属性值里写css样式，可写多组样式，；隔开

优势：1.比较有针对性

缺点：1.修改起来不方便

                2.结构和表现耦合了

第二种方法：内部样式表

写在head标签内部，写一个style标签，选中对应元素，在{}内设置样式，多组样式；隔开

优势：1.修改比较方便2.结构和表现分开

缺点：不方便复用

第三种方法：外部样式表

在html文件外，新建.css文件，在css文件里，选中对应元素，设置样式；通过link标签，引入.css文件，即可生效

css选择器

css中常用的选择器有许多种，本篇就先介绍以下这六种：

1.元素选择器 语法：标签名{}

2.ID选择器 语法：#id的属性值{}

3.class选择器 语法：.class属性值{}

4.通配选择器 语法：*{}

5.复合选择器 ：

                           1.交集选择器 语法：选择器1选择器2{}

                           2.并集选择器 语法：选择器1，选择器2{}

6.关系选择器：.

                         1.子元素选择器 语法：父元素>子元素{}

                        2.后代选择器 语法：祖先元素 后代元素{}

                        3.下一个兄弟选择器 语法：兄+弟{}

                        4. 所有兄弟选择器 语法：兄~弟{}
 

7.属性选择器

语法：1.[属性名]{} 选择含有指定属性的元素

                2. [属性名=属性值]{} 选择含有指定属性及属性值元素

                3. [属性名^=属性值]{} 选择含有指定属性及属性值开头

                4. [属性名$=属性值]{} 选择含有指定属性及属性值结尾

                5. [属性名*=属性值]{} 选择含有指定属性，只要含有某个属性值的元素

8.伪类选择器

全部类型中 ：first-child 第一个子元素

：last-child 最后一个子元素

：nth-child（n） n个子元素

同类型中：：first-of-type 第一个子元素

：last- of-type    最后一个子元素

：nth-of-type（n） n个子元素

否定伪类：not（）

9.伪元素选择器

Lorem 随机生成单词

：：first-letter 第一个字母

：：first-line 第一行

：：selection 选中的内容

：：before 在元素开始的位置前

：：after 在元素开始的位置后

选择器的权重
样式冲突

优先级：

!important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器

注意：1.选择器的权重一样，优先选用靠下的样式

2.如果是交集选择器，则所有选择器权重相加，最终谁大听谁的

3.如果是并集选择器，则选择器的权重各算各的

4.选择器的权重相加，再大也不会超过它上一级权重

总结：哪个选择器越具体，权重越大

实际应用过程中，样式没设置成功：

1.有没有选择2.选择器权重

字体样式
1.长度单位：

                像素 px、                

                百分比 % 是一个相对单位，相对于其父元素高宽，多用于流体式布局、

                em 相对于当前字体的大小设置的，是一个相对单位，字体默认大小16px，若没设置字体大小，则继承其祖先元素字体大小，直到根标签默认字体大小16px、

                 rem 只相对于根标签字体大小来设置，是一个相对单位

2.颜色单位

Rgb（red、green、blue）

Rgba（red、green、blue 、0—1） 0是透明，1是不透明

Hsla 表示亮度、色相、颜色、透明度

使用十六进制 0-9abcdef

 

3.字体样式

Color 文字颜色

Font-family 文字字体

Font-size 文字大小

@font-face 自定义字体

Font简写：大小、字体必须写，而且大小在倒二，字体在倒一

行间距
行高（line height）：文字占有的实际高度、上间距+下间距+字体大小

行间距=上间距+下间距

Line-heigh属性：1.直接放大小单位px、em、rem、%

2.直接放倍数（当前字体大小的倍数） 例如：1  2  3

3.放百分比（当前字体大小的百分比）

单行文本在父元素中垂直居中：单行文本高度设置和高度一致，就会垂直居中

font也可以指定大小
 

文本样式
text-transform：设置文本的大小写
可选值：none 默认值，正常显示

                        Uppercase 文本大写

                        Lowrcase 文本小写

                        Capitalize 首字母大写

text-décoration：设置文本的修饰
               可选值：none 默认值，正常显示

                                Underline 下划线

                                Overline 上划线

                                Line-though 删除线

3. letter-spacing：字符距离

4. word- spacing：单词距离

5. text-align：对齐方式

可选值：center 居中、left（默认值）、right、justify（两端对齐）

6. text-indent：首行缩进

常用的 em单位

7. white-space：设置网页如何处理空白

可选值：normal 换行显示

Nowrap不换行

8. text-overflow：文本溢出包含元素的情况

可选值：clip 裁剪

ellipsis 显示省略号

Overflow属性：hidden 隐藏

9. vertical-align：设置元素垂直对齐

可选值：baseline 基线对齐，沿着x字母最下方对齐，默认值

Top、bottom、middle

功能：1. 设置元素垂直对齐（只针对图片、文字、表格）

2.解决图片三像素的问题：图片与图片之间有空白间隙

a. vertical-align属性，设置一个非baseline的样式值

b.设置父元素font-size为0

c.将图片转成块元素（block）

d.将元素脱离文档流

10. text-shadow：（四个参数：） 设置文本的阴影

四个参数：1.阴影水平位移距离（必填）正右负左

                        2.阴影垂直位移距离（必填）正下负上

                        3.阴影的模糊半径

                        4.阴影的颜色（默认字体颜色）

11. box-shadow：设置块元素的阴影

四个参数：1.阴影水平位移距离（必填）正右负左

                        2.阴影垂直位移距离（必填）正下负上

                        3.阴影的模糊半径

                        4.阴影的颜色（默认黑色）