css继承性 标签同时被多个选择器选中，添加相同样式 标签没有被选择器选中，继承祖先元素的文字样式 样式 复合样式-font text align text decoration

css继承性

css层叠样式中有继承性。祖先元素的样式中（涉及到文字相关样式），后代元素可以继承。

标签同时被多个选择器选中，添加相同样式

解决方案：层叠性。

在CSS中权重高的选择器，会层叠掉权重低的选择器。

1 基础选择器:

在基础选择器中，根据选择器选择范围大小，划分权重，选择器选择范围越小，权重越高。

id选择器权重>类选择器权重>标签选择器权重通配符选择器权重

2 如果是高级选择器，某一标签同时被多个选择器选中。

层叠依据是：

对比：id选择器个数=>类选择器个数=>标签选择器个数

3 如果高级选择器中id选择器个数、类选择器个数、标签选择器个数一样，后者覆盖前者。

标签没有被选择器选中，继承祖先元素的文字样式

1后代元素可以继承祖先元素的文字样式，就近原则。（不看选择器权重）

2当后代标签继承祖先元素的文字样式，都有的话（比选择器权重权重）

3后代标签继承祖先元素文字样式，权重是一样的（后者覆盖前者）

样式

./文字颜色:英文单词、颜色数值:

color:rgb(123,66, 99);

/文字倾斜:英文单词/

font-style: italic;

/文字加粗:属性值、英文单词、纯数字/font- weight: bold;

/字体大小设置:px、百分比、em/

font-size: 50px;

/字体设置:宋体、微软雅黑/

font -family: “楷体”; I

/文字实际占有高度:像素单位/

line -height: 300px;

复合样式-font

其实font是一个复合样式:

1. font-style:文字倾斜

2. font weight加粗

3. font-size:字体大小

4. line-height:行号

   5.font-family:字体设置[宋体、微软雅黑]

相当于:这个五个样式简写方式

font: font- style font-weight font- size line height font family

●font是 上面五个属性简写方式。多个属性值之间用空格隔开。

●字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换●字体大小和行高之间用斜杠链接。

●font是 上面五个属性简写方式。多个属性值之间用空格隔开。

●字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换●字体大小和行高之间用斜杠链接。

text align

text-align:它主要的作用是设置网页中的文本的水平对齐方式。

1. left让网页中的文本水平靠左侧对齐。 (默认数值)

​ 2.center让网页中的文本水平居中对齐。

3. right让网页中 的文本水平靠右侧对齐。

注意:不管单行文本、多行文本都可以通过text lign属性值，进行设置文本水平方向对齐方向。

text decoration

text-decoration:它主要的作用是可以给文本添加线条修饰。

1. none:没有线条修饰

2. overline:文本上方有线条修饰

3. line-through:文本 有中线的修饰

4. uhderline:文本有 下线的修饰

   text-indent

   text-indent:英文含义，文本缩进。

   text-indent:可以设置文本首行的缩进的距离。

   属性值: 2种

   像素单位:比如100px,代表文本首行向右缩进100像素

   em单位:比如10em,代表文本首行向右缩进10个中文字符。

   盒模型

   盒模型有人也称之为‘框模型’，盒模型就是网页中的标签，在网页中实际占有区域而已。盒模型是有五个样式组成:

   width(宽度)、height (高度)、padding(内边距)、border (边框)、 margin(外边 距)。

   1 标签在网页中实际占有区域：width(宽度)+height (高度)+padding(内边距)+border (边框)+margin(外边 距)

   2标签可以书写内容的区域：width(宽度)+height (高度)

   宽度、高度

   宽度(width)和高度(height) :设置标签可以书写内容区域。

   属性值:像素单位、百分比单位。

   1非常常用像素单位

   宽度和高度常用的单位为像素单位:数字设置为多少，宽度和高度即为多少像素。

   2 也是比较常用的单位：百分比

   元素的宽度和高度可以写成百分比单位：元素的宽度和高度百分比参照父元素的宽度和高度进行划分的

   注意事项:

   1.元素 的宽度和高度属性值为百分比。元素的宽度和高度会随着父元素的宽度和高度变化而变化。

   \2. body 为网页主题部分，它有默认宽度。默认宽度为用户浏览器宽度。在开发当中很少设置body的宽度如果某一个标签想和网页主体一样宽。 作为body的子元素设置为100%即可。

   \3. 类似div这种容器级别标签，如果没有设置w、h。宽度默认和父元素一般宽。高度为零。如果设置文本会让文本撑出一个高度。

   内边距

   内边距:内边距(paddng)，它主要的作用是,设置宽高区域和边框距离的设置。特点:内边距不能显示内容的，但是可以设置背景。

   属性值:像素单位。

   注意: padding这个样式，它是一个复合样式。是由下面这四个单一样式组成的。padding-top、padding-right 、padding-bottom、 padding-1eft。2.2内边距

   内边距:内边距(paddng)，它主要的作用是,设置宽高区域和边框距离的设置。特点:内边距不能显示内容的，但是可以设置背景。

   属性值:像素单位。

   注意: padding这个样式，它是一个复合样式。是由下面这四个单一样式组成的。padding-top、padding-right 、padding-bottom、 padding-1eft。

   padding是一个复合样式，是由上面这四者组成。而我们这个padding样式，它的样式属性值写法，有四种。多个属性值之间用空格隔开。

   1 第一种写法:四个属性值(多个属性值之间，用空格隔开)

   分别代表:上C右、下、左四个内边距数据设置。

   2 第二种写法:三个属性值(多个属性值之间，用空格隔开)

   分别代表:上、右和左、下内边距数据设置。

   3 第三种写法:两个属性值(多个属性值之间，用空格隔开)分别代表:上下和左右内边距数据设置。

   4 第四种写法: -个属性值。

   分别代表的是:上右下左内边距设置。第二种写法:三个属性值(多个属性值之间，用空格隔开)

   分别代表:上、右和左、下内边距数据设置。

   如果符合样式padding属性值书写完毕，在复合样式后面，如果在出现单一内边距样式出现。会覆盖前面内边距设置的数据。

   边框

   作用:边框(border) ，主要的作用是设置标签外层边框。

   属性值:属性值是由三部分组成，三个属性值之间需要用空格隔开。三个属性值分别是:边框的宽度、边框线条设置、边框的颜色。

注意: border是一个复合样式。是由下面这三个单一样式组成。1. border-width: 边框的宽度

border-style:边框的线条类型

2.3.1 border width

作用:它主要的作用是，设置标签边框的宽度。

属性值:它的属性值的写法，类似padding,属性值都是像素单位。

2.3.2border-style

作用:它主要的作用是，设置边框的线条类型。

属性值:它的属性值写法类似于padding,也是有四种写法。

属性值都是英文单词solid实线。

dashed虚线

2.3.3border color

作用:主要的作用是设置边框的颜色。

属性值:属性值写法，类似于padding。也是有四种写法。

属性值可以英文单词、也可以16进制颜色值。

外边距

作用:外边距，主要的作用是设置标签与标签之间的距离。

特点:外边距中不能显示内容，不能设置背景。

属性值:它的属性值写法类似于padding,单位都是像素单位。

注意: margin它也是一个复合样式。是由下面四个单一的样式组成的。margin-top、margin-right、 margin-bottom、 margin-left。2.4外边距

作用:外边距，主要的作用是设置标签与标签之间的距离。

特点:外边距中不能显示内容，不能设置背景。

属性值:它的属性值写法类似于padding,单位都是像素单位。

注意: margin它也是一个复合样式。是由下面四个单一的样式组成的。margin-top、margin-right、 margin-bottom、 margin-left。

有四种写法和padding一样。