网站开发主要包括哪些方面,云浮哪有公司做网站的,如何建微信微商城网站,住房和城乡建设部标准定额司网站这两天真有点忙#xff0c;期末的实验最难做了#xff01;
了解了 css 的一些特性#xff0c;一直没觉得 css 没多难#xff0c;但是学着学着发现#xff0c;选择器这东西像是石山
尤其是选择器权重更是重量级的石山#xff0c;就没有更简单一点的办法#xff1f;
有没有…这两天真有点忙期末的实验最难做了了解了css的一些特性一直没觉得css没多难但是学着学着发现选择器这东西像是石山尤其是选择器权重更是重量级的石山就没有更简单一点的办法有没有懂的能告诉我选择器1. 复合选择器复合选择器是由两个或多个基础选择器通过特定的方式组合而成用于更精准地定位 HTML 元素。后代选择器 (Descendant Selector)用空格隔开如.box p选择父元素内所有的后代元素。子代选择器 (Child Selector)用隔开如.box p只选择亲儿子层级的元素。并集选择器 (Union Selector)用逗号,隔开集体声明多个选择器共享同一套样式。交集选择器 (Intersection Selector)紧密相连如div.red既是 div 又是 .red 的元素注意标签名必须写在前面。2. 伪类选择器 (Pseudo-classes)伪类本质上是用来描述元素处于某种特定状态的类。链接伪类遵循 LVHA 顺序编写:link未访问的链接状态。:visited已访问后的链接状态。:hover鼠标悬停状态最常用。:active鼠标点击按下但未松开的状态。补充知识除了链接还有结构伪类如:first-child,:nth-child(n)和行为伪类如:focus焦点状态它们在布局中也非常高效。CSS 三大特性1. 继承性子元素会继承父元素的某些样式。哪些能继承主要是文本相关的属性如font-size,font-family,color,line-height,text-align。哪些不能继承布局相关的属性如margin,padding,border,width,height等。2. 层叠性当同一个元素被设置了多个相同的属性时CSS 的冲突处理机制。如果选择器权重相同则遵循就近原则写在 CSS 样式表下方的属性会覆盖上方的属性。3. 优先级/权重优先级决定了哪条规则最终生效。我们可以用一套“权重权重计分表”来快速判断选择器类型权重权重数值表示说明!important∞\infty∞(无穷大)强制生效尽量少用行内样式(1,0,0,0)(1, 0, 0, 0)(1,0,0,0)写在标签style属性里ID 选择器(0,1,0,0)(0, 1, 0, 0)(0,1,0,0)如#header类/伪类/属性选择器(0,0,1,0)(0, 0, 1, 0)(0,0,1,0)如.content,:hover标签选择器(0,0,0,1)(0, 0, 0, 1)(0,0,0,1)如div,p通配符/继承(0,0,0,0)(0, 0, 0, 0)(0,0,0,0)*权重最低口诀选中的范围越精确优先级越高。复合选择器计算权重会累加。例如nav ul li的权重是0,0,0,30,0,0,30,0,0,3而.nav ul li是0,0,1,20,0,1,20,0,1,2。后者胜出。背景属性CSS 的background属性不仅能设置颜色还能精细控制图片的显示。CSS.the-image{width:300px;height:300px;background-color:pink;/* 背景颜色 */background-image:url(../image/cuteReisentyan.jpg);/* 背景图片路径 */background-repeat:no-repeat;/* 不平铺/不重复 */background-size:contain;/* 图片缩放模式cover(充满) 或 contain(完整显示) */background-position:center center;/* 图片水平垂直居中 */background-attachment:fixed;/* 背景固定不随页面滚动 */}补充背景复合写法Shorthand为了简化代码通常写成一行background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 / 背景尺寸;(注背景尺寸必须紧跟在位置后面并用斜杠隔开)元素显示模式 (Display Mode)理解显示模式是掌握网页布局尤其是后续 Flex 布局的前提。块级元素 (Block-level)代表div,h1~h6,p,ul,li。特点独占一行宽度默认是父级 100%可以设置宽、高、内外边距。行内元素 (Inline)代表span,a,i,em。特点一行可以显示多个设置宽高无效大小由内容撑开。行内块元素 (Inline-block)代表img,input,td。特点一行显示多个但可以设置宽高和内外边距。模式转换使用display属性display: block;转换为块级常用让a标签可设置宽高。display: inline;转换为行内。display: inline-block;转换为行内块。display: none;隐藏元素不占位。