信阳市网站建设,响应式网站一般做多大,wordpress首页404伪静态,wordpress 最新 调用文章目录 CSS三大特性层叠性继承性优先级 CSS盒子模型网页布局的核心和过程盒子模型的组成盒子模型的边框盒子模型的内边距盒子模型的外边距 CSS圆角边框CSS盒子阴影CSS文字阴影 CSS三大特性
层叠性
基本概念#xff1a;给相同的选择器设置了相同的样式#xff0c;则此时一… 文章目录 CSS三大特性层叠性继承性优先级 CSS盒子模型网页布局的核心和过程盒子模型的组成盒子模型的边框盒子模型的内边距盒子模型的外边距 CSS圆角边框CSS盒子阴影CSS文字阴影 CSS三大特性
层叠性
基本概念给相同的选择器设置了相同的样式则此时一个样式就会覆盖层叠另一个冲突的样式。此时层叠性就是为了解决样式冲突的问题。层叠性原则样式属性冲突的情况下CSS遵循就近原则即哪个样式离结构近就执行哪个样式中的属性值对于没有发生冲突的样式属性则不会发生重叠。
继承性
基本概念子标签会继承父标签的某些样式并非全部样式如文本的颜色和字体大小等。使用优点恰当地使用继承可以简化CSS代码降低样式的复杂性。根据文字大小自动调整行高如果设置某个标签元素的font属性的字体/行高属性值类似于12px/1.5表示父元素的文本的行高为字体大小的1.5倍此时该标签的子标签中的元素可以设置不同的字体但是可以继承父元素的行高即各自的文本行高都是各自的字体大小的1.5倍。这是实际开发过程中常用的一种方法。
优先级
基本概念为同一个标签的某个属性设置了多个样式则优先执行哪一个样式。基本原则 选择器相同如果设置不同样式的选择器都相同例如都是类选择器则变为层叠性的情况。选择器不同根据选择器的权重进行执行其实就是不同类型选择器的优先级。 优先级顺序通配符选择器 标签选择器 类选择器和伪类选择器 ID选择器 行内样式表。!important在某个选择器的后面添加一个!important例如 div {color: pink !important; }则会默认此选择器具有最高的权重优先级。继承后的权重继承得到的权重为0子元素都会优先执行为自己定义的样式。复合选择器的权重对于复合选择器其权重是构成该复合选择器的多个选择器的权重之和。记忆方法作用域越小权重优先级越大。
CSS盒子模型
网页布局的核心和过程
网页布局的三大核心盒子模型、浮动和定位。网页布局过程 先准备好相关的网页元素这些元素基本上都是盒子元素接下来利用CSS设置好盒子的样式然后摆到相应的位置最后向盒子里面添加内容。
盒子模型的组成
基本概念盒子模型就是把HTML界面中的布局元素视为一个矩形的盒子也就是一个用来装内容的容器。盒子模型的组成包括边框、外边距、内边距和实际内容四个部分。 边框盒子的区域边缘构成一个边框实际内容盒子中的所有东西都属于盒子模型的内容内边距盒子中的内容离盒子边框的距离外边距盒子与其他盒子之间的距离。
盒子模型的边框
边框的三部分组成边框宽度、边框样式、边框颜色。设置语法分别用border-width、border-style和border-color属性设置边框的宽度、样式和颜色。 border-width一般将属性值设置为...px即多少个像素宽border-style常用的属性值包括solid实线、dashed虚线、dotted点线、none无边框等。border-color常用的属性值即各种各样的颜色字符串。 边框属性简写语法使用border边框宽度属性值、边框样式属性值、边框颜色属性值即可通过一个属性同时设置边框的三个特征并且这几个特征之间没有先后顺序。单独修改盒子的某一条边框基于边框属性的简写将其中的border属性修改为border-top、border-bottom、border-left和border-right即可单独修改盒子的某一条边框。border-collapse属性如果将该样式的属性值设置为collapse则会自动合并相邻的盒子的边框。注意事项边框的粗细会修改盒子模型的实际大小。
盒子模型的内边距
设置语法使用padding属性设置盒子模型的内边距即边框与内容之间的距离属性值也是以像素px为单位的。设置某一边的边距分别使用padding-top、padding-bottom、padding-left、padding-right四个属性即可完成设置。使用padding属性设置内边距 只接一个属性值表示与四条边的内边距都等于该属性值。接两个属性值前面的值表示与盒子模型的上下内边距后面的值表示与盒子模型的左右内边距。接三个属性值第一个值表示与上边的内边距第二个值表示与盒子模型左右的内边距第三个值表示与盒子模型下边的内边距。接四个属性值分别按照顺时针表示上、右、下、左四条边的内边距。 注意事项 修改内边距也会修改盒子模型的大小。这一个特点有时候不太好但是有时候是可以利用的。另外如果没有给盒子模型设置宽度属性weight则使用padding设置内边距不会撑大盒子模型。
盒子模型的外边距
基本作用设置盒子模型之间的距离。使用语法分别设置属性margin-left、margin-right、margin-top和margin-bottom即可设置盒子模型四条边的外边距。简单写法可以采用与padding类似的方式对盒子模型的外边距进行设置。通过外边距设置盒子水平居中将盒子模型的样式margin属性的属性值设置为auto即可。如果想要将行内元素或行内块元素设置水平居中只需要给它们的父元素设置text-align:center样式即可。塌陷问题对于两个嵌套关系父子关系的块元素父元素有上外边距的同时子元素也有上外边距则此时父元素会塌陷较大的外边距值。此时可以给父元素设置一种样式overflow: hidden来避免这种情况。清除内外边距对于一些自带内外边距的网页元素标签且一个一个设置去除内外边距的样式很麻烦则此时可以使用通配符选择器创建一个padding和margin属性值都为零的样式来清除所有标签的内外边距。注意事项对于行内标签元素尽量只设置左右外边距而不要设置上下外边距这是出于兼容性的考虑。如果一定要设置应该优先考虑将行内标签元素转换为块标签元素或行内块标签元素。
CSS圆角边框
注意事项该特性是CSS3才能使用的特性如果浏览器的版本较低可能不能兼容。使用语法对需要采用圆角边框的HTML标签元素只需要设置其border-radius属性的值即可。该属性的属性值也是以像素px为单位是指当一个指定半径的圆与矩形边框的一个角的两条边相切的时候所产生的弧度。另外一种属性值可以用百分数作为该属性的属性值该百分数表示圆的半径和长方形长的比。只设置某个角为圆角可以分别使用border-top-left、border-top-right、border-bottom-left和border-bottom-right属性设置该边框的某一个角为圆角。
CSS盒子阴影
基本作用设置盒子模型的背后阴影使用语法通过样式中的box-shadow属性即可为盒子模型添加阴影。其属性值如下 h-shadow必须参数。指定水平阴影相对于盒子向右平移的位置允许负值v-shadow必须参数。指定垂直阴影相对于盒子向下平移的位置允许负值blur可选参数。指定模糊距离spread可选参数。指定阴影的尺寸color可选参数。指定阴影的颜色inset可选参数。将外部阴影修改为内部阴影。
CSS文字阴影
基本作用为指定区域的文字设置阴影效果。使用语法使用text-shadow属性进行设置即可。 h-shadow必须参数。指定水平阴影相对于文字向右平移的位置允许负值v-shadow必须参数。指定垂直阴影相对于文字向下平移的位置允许负值blur可选参数。指定模糊距离color可选参数。指定阴影的颜色
