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是一个复合样式:
-
font-style:文字倾斜
-
font weight加粗
-
font-size:字体大小
-
line-height:行号
5.font-family:字体设置[宋体、微软雅黑]
相当于:这个五个样式简写方式
font: font- style font-weight font- size line height font family
●font是 上面五个属性简写方式。多个属性值之间用空格隔开。
●字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换●字体大小和行高之间用斜杠链接。
●font是 上面五个属性简写方式。多个属性值之间用空格隔开。
●字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换●字体大小和行高之间用斜杠链接。
text align
text-align:它主要的作用是设置网页中的文本的水平对齐方式。
- left让网页中的文本水平靠左侧对齐。 (默认数值)
2.center让网页中的文本水平居中对齐。
- right让网页中 的文本水平靠右侧对齐。
注意:不管单行文本、多行文本都可以通过text lign属性值,进行设置文本水平方向对齐方向。
text decoration
text-decoration:它主要的作用是可以给文本添加线条修饰。
-
none:没有线条修饰
-
overline:文本上方有线条修饰
-
line-through:文本 有中线的修饰
-
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一样。