宝塔做网站安全吗,网上销售渠道,网站开发cms,江北区网站建设文章目录 定义方式选择器文本字体背景边框元素展示格式内边距与外边距盒子模型位置浮动flex布局响应式布局 定义方式 行内样式表 直接定义在style属性中#xff0c;作用于当前标签 img src /imges/logo.jpg alt style width 400… 文章目录 定义方式选择器文本字体背景边框元素展示格式内边距与外边距盒子模型位置浮动flex布局响应式布局 定义方式 行内样式表 直接定义在style属性中作用于当前标签 img src /imges/logo.jpg alt style width 400内部样式表 定义在style标签中通过选择器影响对应的标签 作用范围可以对同一页面中的多个元素产生影响 外部样式表 定义在css样式文件中通过选择器影响相应的标签可以用link标签引入某些页面 作用范围可以对多个页面产生影响 link rel stylesheet href css地址 type text/css注释 不能使用// 只有 /* 注释 */
选择器 标签选择器 选择所有div标签 div{width : 200pxheight : 200pxbackground-color : gray
}ID选择器 选择ID为rect-1的标签 #rect-1{width : 200pxheight : 200pxbackground-color : gray
}类选择器 选择所有rectangle的标签 .rectangle{width : 200pxheight : 200pxbackground-color : gray
}伪类选择器 伪类用于定义元素的特殊状态 链接伪类选择器 :link链接访问前的样式:visited链接访问后的样式:hover鼠标悬停时的样式:active鼠标点击后长按时的样式:focus聚焦后的样式.effect:hover{transform : scale(1.1);//变大多少倍transition : 200ms;//渐变经过多长时间变化
}位置伪类选择器 :nth-child(n)选择是父标签第n个子元素的所有元素 目标伪类选择器 :target:当url指向改元素时生效 复合选择器 由两个及以上基础选择器组合而成的选择器 element1, elemment2:同时选择元素element1和元素element2element.class:选择包含某类的element元素element1 element2选择紧跟element1的element2元素element1 element2选择element1内所有element2元素祖先结点有element1的element2元素element1 element2选择父标签是element1的所有element2元素 通配符选择器 *: 选择所有标签 [attribute]: 选择具有某个属性的所有标签 attribute value选择attribute值为value的所有标签 伪元素选择器 将特定内容当做一个元素选择这些元素的选择器称为伪元素选择器。 ::first-letter:选择第一个字母::first-line:选择第一行::selection:选择已被选中的内容::after:可以在元素后插入内容::before可以在元素前插入内容 样式渲染优先级
权重大小越具体的选择器权重越大!important 行内样式 ID选择器 类与伪类选择器 标签选择器 通用选择器权重相同时后面的样式会覆盖前面的样式继承自父元素的权重最低 文本 text-alignCSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似但是是水平方向的。 center居中left左对齐right右对齐justify两端对齐 文字对齐方式具有继承性父标签具有对齐方式子标签也会继承相应的对齐方式 line-height CSS 属性用于设置多行元素的空间量如多行文本的间距。对于块级元素它指定元素行盒line boxes的最小高度。对于非替代的 inline 元素它用于计算行盒line box的高度。 长度单位 单位描述px设备上的像素点%相当于父元素的百分比em相当于当前元素的字体大小rem相当于根元素的字体大小vw相当于视窗宽度的百分比vh相当于视窗高度的百分比 letter-spacing CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远而 letter-spacing 的负值会使字符更接近。 text-indent 属性能定义一个块元素首行文本内容前的缩进量 text-decoration 简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的text-decoration-thickness 属性的缩写。 去掉链接的下划线 a{text-decoration : none;
}text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。 字体
font-size CSS属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位定义该值可能改变其他元素的大小。font-style CSS属性允许你选择font-family字体下的italic或oblique样式font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。font-family CSS 属性 font-family 允许你通过给定一个有先后顺序的由字体名或者字体族名组成的列表来为选定的元素设置字体。属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体或者是通过 font-face 指定的可以直接下载的字体。 背景
background-color CSS属性中的background-color会设置元素的背景色属性的值为颜色值或关键字transparent二者选其一。background-image CSS background-image 属性用于为一个元素设置一个或者多个背景图像。 渐变色 linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)) background-size 设置背景图片大小。图片可以保有其原有的尺寸或者拉伸到新的尺寸或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴垂直轴两个轴重复或者根本不重复。background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。background-attachment CSS 属性决定背景图像的位置是在视口内固定或者随着包含它的区块滚动。 边框 border-style 是CSS简写属性用来设定元素所有边框的样式 将四个参数写全是按照上、右、下、左的顺序来写的 缺省的参数会取对边的样式 border-width 属性可以设置盒子模型的边框宽度 border-color CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性 border-top-color、border-right-color、border-bottom-color、border-left-color。 border-radius CSS属性border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用一个半径时确定一个圆形当使用两个半径时确定一个椭圆。这个椭圆与边框的交集形成圆角效果。 border-collapse border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下相邻的单元格都拥有独立的边框。在合并模式下相邻单元格共享边框。
块内上下居中方式 给里面的元素添加
position: relative;
top: 50%;
transform: translateY(-50%);元素展示格式 display block 独占一行width、height、margin、padding均可控制width默认100% inline 可以共占一行width与height无效水平方向的margin与padding有效垂直方向的margin与padding无效width默认为本身内容宽度 inline-block 可以共占一行width、height、margin、padding均可控制width默认为本身内容宽度 white-space CSS white-space 属性用于设置如何处理元素内的空白字符。 over-flow overflow 是 CSS 的简写属性其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。 内边距与外边距
margin margin 属性为给定元素设置所有四个上下左右方向的外边距属性 可以接受1~4个值上、右、下、左的顺序可以分别指明四个方向margin-top、margin-right、margin-botton、margin-left可取值 length : 固定值percentage: 相对与包含块的宽度以百分比值为外边距。auto : 让浏览器自己选择一个合适的外边距。有事在一些特殊情况下该值可以是元素居中。 外边距重叠 块的上边距和下边距有时合并为单个边距其大小为单个边距的最大值如果相等就取其中一个这种行为成为边距折叠。父元素与后代元素父元素没有上边距和padding时后代元素的margin-top会溢出溢出后父元素的margin-top会与后代元素取最大值。 padding padding CSS 简写属性一次性设置元素所有四条边的内边距区域。 可以接受1~4个值可以分别指明四个方向padding-top、padding-right、padding-botton、padding-left可取值 length作为定值的内边距尺寸。必须是非负值。percentage相对于包含块的行内尺寸水平语言中的宽度由 writing-mode 定义的百分比。必须是非负值。相当于上级宽度百分比 盒子模型
box-sizing 每个元素真是的宽度为width content padding border CSS中的box-sizing属性定义了user agent 应该如何计算一个元素的总宽度和总高度。
content-box:是默认值设置border和padding均会增加元素的宽高border-box设置border和padding不会改变元素的宽高而是基调内容区域 位置
position CSS position属性用于指定一个元素在文档中的定位方式。 定位类型
定位元素是其计算后位置属性为relativeabsolutefixed或sticky的一个元素换句话说出static以外的任何东西相对定位元素是计算后位置属性为relative的元素绝对定位元素是计算后位置属性为absolute或fixed的元素粘性定位元素是计算后位置属性为sticky的元素
取值
static:该关键字指定元素使用正常的布局行为即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。relative:该关键字下元素先放置在未添加定位时的位置再在不改变页面布局的前提下调整元素位置因此会在此元素未添加定位时所在位置留下空白。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。absolute:元素会被移出正常文档流并不为元素预留空间通过指定元素相对于最近的非 static 定位祖先元素的偏移来确定元素位置。绝对定位的元素可以设置外边距margins且不会与其他边距合并。fixed:元素会被移出正常文档流并不为元素预留空间而是通过指定元素相对于屏幕视口viewport的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时容器由视口改为该祖先。sticky:元素根据正常文档流进行定位然后相对它的最近滚动祖先nearest scrolling ancestor和 containing block最近块级祖先 nearest block-level ancestor包括 table-related 元素基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文stacking context。注意一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。 浮动 float CSS 属性指定一个元素应沿其容器的左侧或右侧放置允许文本和内联元素环绕它。该元素从网页的正常流动文档流中移除但是仍然保持部分的流动性与绝对定位相反。 由于float意味着使用块布局它在某些情况下修改display值的计算值 display为inline或inline-block时使用float后会统一变成block 取值 left表明元素必须浮动在其所在的块容器左侧的关键字right表明元素必须浮动在其所在的块容器右侧的关键字 clear clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。比如你可能希望某个段落与浮动元素保持相邻的位置但有希望这个段落从头开始强制独占一行。此时可以使用clear 取值 left:清除左侧浮动right清除右侧浮动both清除左右两侧浮动 实战 效果
html源码
div classcarddiv classbackgroundimgimg src./images/personbg.jpg alt stylewidth: 100%; height: 100%; object-fit: cover;/divdiv classuserbodydiv classhaedimgimg src./images/personheadimg.jpg alt/divdiv classperson-infodiv classperson-info-textdiv classperson-info-text-username新岛真span classlvLV/spanspan classnum5/span/divdiv classperson-info-text-reputationspan classtext-introducespan724/span span关注/span/spanspan classtext-introducespan33.8万/span span粉丝/span/spanspan classtext-introducespan9324.5万/spanspan获赞/span/span/divdiv classperson-introduce铁拳制裁/div/divdiv classperson-info-buttonbutton关注/buttonbutton发消息/button/div/div/div/divCSS源码
.card {width: 366px;height: 247px;box-shadow: 2px 2px 5px lightgray;border-radius: 5px;
}.backgroundimg {width: 366px;height: 85px;
}.userbody {width: 366px;height: calc(100% - 85px);box-sizing: border-box;
}.haedimg {width: 70px;height: 100%;float: left;text-align: center;
}.haedimgimg {width: 48px;height: 48px;border-radius: 50%;margin: 10px
}.person-info {width: calc(100% - 70px);height: 100%;float: left;
}.person-info-text {width: 100%;height: calc(100% - 71px);/* background-color: brown; */box-sizing: border-box;
}.person-info-text-username {width: 100%;height: 30px;font-size: 16px;color: #222222;font-weight: bold;margin: 10px 0px 0px 0px;padding: 5px 0px 0px 0px;/* background-color: azure; */
}.lv {font-size: 9px;margin: 0px;padding: 0px;background-color: #EE672A;color: aliceblue;border-radius: 2px;
}.num {font-size: 11px;margin: 0px;padding: 0px;background-color: #EE672A;color: aliceblue;border-radius: 2px;
}.person-introduce {width: 100%;height: calc(100% - 55px);/* background-color: aquamarine; */box-sizing: border-box;padding: 5px 0px;font-size: 13px;color: #9499A0
}.person-info-button {width: 100%;height: 61px;/* background-color: aqua; */
}.text-introducespan:nth-child(1) {font-size: 12px;color: #222222;font-weight: 500;
}.text-introducespan:nth-child(2) {font-size: 12px;color: #9499A0;
}.person-info-button {margin: 0px;padding: 5px 0px;/* background-color: #EE672A; */box-sizing: border-box;
}.person-info-buttonbutton {width: 102px;height: 30px;border: none;border-radius: 5px;margin: 5px 0px;
}.person-info-buttonbutton:nth-child(1) {background-color: #00A1D6;color: white;
}.person-info-buttonbutton:nth-child(2) {background-color: white;border: #CCD0D7 solid 1px;color: #6D757A;
}.person-info-buttonbutton:nth-child(1):hover {background-color: #00B5E5;transition: 700ms;
}.person-info-buttonbutton:nth-child(2):hover {border-color: #00b5e5;color: #00B5E5;transition: 700ms;
}flex布局
CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。 定义在父节点上的属性
flex-direction CSS flex-direction 属性指定了内部元素是如何在弹性容器中布局的定义了主轴的方向正方向或反方向。 取值 rowflex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。row-reverse:表现和 row 相同但是置换了主轴起点和主轴终点column:flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同column-reverse:表现和column相同但是置换了主轴起点和主轴终点 flex-wrap CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行这个属性允许你控制行的堆叠方向。 取值 nowrap:默认值不换行wrap换行第一行在上面wrap-reverse: 换行第一行在下方 flex-flow CSSflex-flow属性是flex-direction和flex-wrap的简写。默认值为row nowrap justify-content CSSjustify-content属性定义了浏览器之间如何分配顺着弹性容器主轴的元素之间及周围的空间。 取值 flex-start:默认值左对齐flex-end:右对齐space-between:左右两段对齐space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半space-evenly: flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距主轴起始位置到第一个flex项的间距主轴结束位置到最后一个flex项的间距都完全一样 align-items CSSalign-items属性将所有直接子节点上的align-self值设置为一个组。align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。 取值 flex-start: 元素向主轴起点对齐flex-end:元素向主轴终点对齐center元素侧轴居中stretch弹性元素被侧轴方向被拉伸到容器相同的高度或宽度。没有空隙 align-content CSS的align-content属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。 取值 flex-start:所有行从垂直周起点开始填充。第一行的垂直周起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行flex-end:所有行从垂直轴末尾开始填充。最后一行的垂直周终点和容器的垂直周终点对齐。同时所有后缀行与前一个对齐center所有行朝向容器的中心填充。每行相互紧凑相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。只有一行的时候居中效果会消失而item仍然可以居中stretch:拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。space-betweenspace-around 定义在flex子元素
order 定义flex项目的顺序值越小越靠前 flex-grow CSS属性flex-growCSS设置flex项主尺寸的flex增长系数。 负值无效默认为0 flex-shrink CSSflex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩其收缩的大小是依据flex-shrink的值 负值无效默认为1 flex-basis CSS属性flex-basis指明flex元素在主轴方向上的初始大小 取值 width值可以是[HTML_REMOVED];该值也可以是一个相对于其父弹性盒子容器主轴尺寸的百分数。负值是不被允许的。默认为auto flex flex-grow、flex-shrink、flex-basis的缩写 常用取值 auto: flex: 1 1 autonone: flex: 0 0 auto 响应式布局
media查询 当屏幕宽度满足特定条件时应用css 例如 当屏幕宽度大于768时将背景颜色换成淡蓝media(min-width: 768px) {.container{width: 968px;background-color: lightblue;}
}将屏幕尺寸分成12份将对应不同相应使用不同份量 因此有实现此功能的库 Bootstrap
