我想做个网站要多少钱,望江县住房和城乡建设局网站,网上商城图片,旅游网站建设的技术可行性CSS进阶 目标#xff1a;掌握复合选择器作用和写法#xff1b;使用background属性添加背景效果 01-复合选择器
定义#xff1a;由两个或多个基础选择器#xff0c;通过不同的方式组合而成。
作用#xff1a;更准确、更高效的选择目标元素#xff08;标签#xff09;。…CSS进阶 目标掌握复合选择器作用和写法使用background属性添加背景效果 01-复合选择器
定义由两个或多个基础选择器通过不同的方式组合而成。
作用更准确、更高效的选择目标元素标签。
后代选择器
后代选择器选中某元素的后代元素。
选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用空格隔开。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 中间用空格隔开 *//* ul li {color: red;} *//* 只让第一组ul 里面的li变色 */.first li {color: red;}/style
/headbodyul classfirstli我是无序列表/lili我是无序列表/lili我是无序列表/lili我是无序列表/li/ululli我是无序列表/lili我是无序列表/lili我是无序列表/lili我是无序列表/li/ulolli我是有序列表/lili我是有序列表/lili我是有序列表/lili我是有序列表/li/ol
/body/html小技巧 后代选择器执行代码的时候先执行孩子后执行父亲。 先找li 后找ul 子代选择器
子代选择器选中某元素的子代元素最近的子级。
选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用 隔开。
stylediv span {color: red;}
/styledivspan这是 div 里面的 span/spanpspan这是 div 里面的 p 里面的 span/span/p
/div
如果使用后代选择器两个span都会被设置样式
并集选择器
并集选择器选中多组标签设置相同的样式。
选择器写法选择器1, 选择器2, …, 选择器N { CSS 属性}选择器之间用 , 隔开。
stylediv,p,span {color: red;}
/stylediv div 标签/div
pp 标签/p
spanspan 标签/span交集选择器
交集选择器选中同时满足多个条件的元素。
选择器写法选择器1选择器2 { CSS 属性}选择器之间连写没有任何符号。
stylep.box {color: red;
}
/stylep classboxp 标签使用了类选择器 box/p
pp 标签/p
div classboxdiv 标签使用了类选择器 box/div注意如果交集选择器中有标签选择器标签选择器必须书写在最前面。 伪类选择器
伪类选择器伪类表示元素状态选中元素的某个状态设置样式。
鼠标悬停状态选择器:hover { CSS 属性 }
stylea:hover {color: red;}.box:hover {color: green;}
/stylea href#a 标签/a
div classboxdiv 标签/div超链接伪类 提示如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写。 经验工作中一个 a 标签选择器设置超链接的样式 hover状态特殊设置 a {color: red;
}a:hover {color: green;
}基本选择器
基本选择器说明举例标签选择器选择页面中同名标签div {color: red;}类选择器选择1个或者多个.red {color: red;} id选择器唯一的只能使用一次#red {color: red;} 通配符选择器选择所有的标签* {color: red;}
复合选择器
复合选择器说明举例后代选择器选择子孙后代 用 空格 隔开div span {color: red;}子代选择器只选最近一级孩子亲儿子选择器 用 隔开divspan{color: red;}并集选择器选择多个标签 用 逗号 隔开 理解为 和div, span, p {color: red;}交集选择器既又的关系既是某标签又是某类名p.one {color: red;}伪类选择器状态关系 :hover 鼠标经过div:hover {color: red;}
02-CSS特性
CSS特性化简代码 / 定位问题并解决问题
继承性层叠性优先级
继承性
继承性子级默认继承父级的文字控制属性(如下属性)。 注意如果标签有默认文字样式会继承失败。 例如a 标签的颜色、标题的字体大小。 ①a标签不会继承颜色 p {color: pink;}pa href#我是链接/a/p标签颜色并没有改变
②标题的字体大小 div {color: red;/* 不加粗 */font-weight: 400;font-size: 14px;}divh1一级标题/h1/div只有颜色改变字体大小和加粗还是h1
层叠性
特点
相同的属性会覆盖后面的 CSS 属性覆盖前面的 CSS 属性不同的属性会叠加不同的 CSS 属性都生效
stylediv {color: red;font-weight: 700;}div {color: green;font-size: 30px;}
/styledivdiv 标签/div注意选择器类型相同则遵循层叠性否则按选择器优先级判断。 优先级
优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则。
stylediv {color: red;}.box {color: green;}
/stylediv classboxdiv 标签/div基础选择器
规则选择器优先级高的样式生效。
公式通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important
选中标签的范围越大优先级越低
复合选择器-叠加
叠加计算如果是复合选择器则需要权重叠加计算。
公式每一级之间不存在进位 规则
从左向右依次比较选个数同一级个数多的优先级高如果个数相同则向后比较!important 权重最高继承权重最低
选择器权重说明继承/ *通配符0没有权重标签选择器1累加类选择器/伪类选择器10累加id选择器100累加行内1000!important∞
继承的权重是0
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* li的权重是1 比 0 高 */li {color: red;}/* 继承的权重是 0, 所以无法直接修改 li的样式 */.box {color: green !important;}/* 结论 想要修改谁的样式就要选择谁 *//style/headbodyul classboxli我是文字/li/ul/body/html03-背景属性
背景图
网页中使用背景图实现装饰性的图片效果。
属性名background-imagebgi属性值url(背景图 URL)
div {width: 400px;height: 400px;background-image: url(./images/1.png);
}提示背景图默认有平铺复制效果。 平铺方式
属性名background-repeatbgr div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;
}背景图位置
属性名background-positionbgp
属性值水平方向位置 垂直方向位置
关键字 坐标 水平正数向右负数向左垂直正数向下负数向上
div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;
/*第二个值省略默认是center*/background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}提示 关键字取值方式写法可以颠倒取值顺序可以只写一个关键字另一个方向默认为居中数字只写一个值表示水平方向垂直方向为居中 背景图缩放
作用设置背景图大小
属性名background-sizebgz
常用属性值 关键字 cover等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见contain等比例缩放背景图片以完全装入背景区可能背景区部分空白 百分比根据盒子尺寸计算图片大小 数字 单位例如px
div {width: 500px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-size: cover;background-size: contain;
}提示工作中图片比例与盒子比例相同使用 cover 或 contain 缩放背景图效果相同。 背景图固定
作用背景不会随着元素的内容滚动。
属性名background-attachmentbga
属性值fixed固定sccoll滚动
body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-attachment: fixed;
}背景复合属性
属性名backgroundbg
属性值背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定空格隔开各个属性值不区分顺序
div {width: 400px;height: 400px;background: pink url(./images/1.png) no-repeat right center/cover;
}但是背景缩放必须跟在背景位置后面若无背景位置只需设置0 0 background: pink url(./images/1.png) no-repeat 0 0/cover;04-显示模式
显示模式标签元素的显示方式。 作用布局网页的时候根据标签的显示模式选择合适的标签摆放内容。
块级元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、preHTML5新增的header、section、aside、footer等
特点
独占一行宽度默认是父级的100%添加宽高属性生效 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title块元素/titlestyle/* 块级元素 *//* 1. 独占一行 *//* 2. 可以设置宽度和高度 *//* 3. 宽度默认和父亲一样宽如果么有父亲则和浏览器一样宽 */.box1,.box2 {width: 100px;height: 100px;background-color: pink;}/style/headbodypabc/pdiv classbox1div1/divdiv classbox2p123/pp123/p/div/body/html行内元素
span、img、a、lable、input、abbr缩写、em强调、big、cite引用、i斜体、q短引用、textarea、select、small、sub、supstrong、u下划线、button默认displayinline-block
特点
一行可以显示多个设置宽高属性不生效宽高尺寸由内容撑开 行内块元素
eg:img input td
特点
一行可以显示多个设置宽高属性生效宽高尺寸也可以由内容撑开 转换显示模式
属性display 经验 我们重点记住把行内元素比如链接转换为 块级或者行内块即可display: block 尽量写到样式的第一行块级元素可以控制里面的行内元素或者行内块元素 左中右对齐 tac 控制块级元素不能控制里面的块级元素对齐
