网站建设公司初心,建立知识体系,最珠海app下载官方,电子商务网一 选择器进阶
后代选择器#xff1a;空格
作用#xff1a;根据HTML标签的嵌套关系#xff0c;#xff0c;选择父元素 后代中满足条件的元素
选择器语法#xff1a;选择器1 选择器2{ css }
结果#xff1a;
*在选择器1所找到标签的后代#xff08;儿子 孙子 重孙子…一 选择器进阶
后代选择器空格
作用根据HTML标签的嵌套关系选择父元素 后代中满足条件的元素
选择器语法选择器1 选择器2{ css }
结果
*在选择器1所找到标签的后代儿子 孙子 重孙子...中找到满足选择器2的标签设置样式
注意点
1.后代包括儿子 孙子 重孙子....
2.后代选择器中选择器与选择器之间通过空格隔开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv p{color: red;}/* div{color: chartreuse;} *//style
/head
bodydivp这是一个div标签/p/divdiv看看我变红了吗/div
/body
/html
子代选择器
作用根据HTML标签的嵌套关系选择父元素 子代中满足条件的元素
选择器语法选择器1选择器2{ css }
结果在选择器1所找到标签的子代儿子中找到满足选择器2的标签样式设置样式
注意点
1.子代只包括儿子
2.子代选择器中选择器与选择器之间通过 隔开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediva{color: brown;}/style
/head
bodydivpa href#我是超链接/a/pa href#我是超链接2/a/diva href#我是超链接3/a
/body
/html
并集选择器
作用同时选择多组标签设置相同的样式
选择器语法选择器1 选择器2{ css }
结果找到 选择器1和选择器2选中的标签设置样式
注意点
1.并集选择器中的每组选择器之间通过分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个提高代码的可读性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep,div,span,a{font-family: 楷体;color: rgb(255, 0, 0);}/style
/head
bodyp我是p标签/pdiv我是div标签/divspan我是span标签/spanbra href#我是超链接/ah1现在需要把上面的四个改色和字体/h1
/body
/html
交集选择器紧挨着
作用选择器1 . 选择器2{css}
结果既又原则找到页面中既能被选择器1选中又能被选择器2选中的标签设置样式
注意点
1.交集选择器中的选择器之间是紧挨着的没有东西分隔
2.交集选择器中如果有标签选择器标签选择器必须写在最前面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv.class{color: brown;}/style
/head
bodypThis is a p /pdiv classclass这里有一个div标签/divp classclass这里是一个p标签/p
/body
/html
hover伪类选择器
作用选中鼠标悬停在元素上的状态设置样式
选择器语法选择器 hover{ css }
注意点伪类选择器选中的元素的某种状态
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv:hover{color: green;}a:hover{color: brown;}p:hover{color: rgb(99, 30, 210);}/style
/head
bodyp鼠标悬停时 文字显示为绿色/pdiv上面是一个p标签/diva href#超链接/a
/body
/html
emment语法
作用通过简单语法快速生成代码
语法类似于刚刚学的选择器的写法
记忆示例效果标签名divdiv div类选择器.reddiv class red divid选择器#onediv idone div交集选择器p.red#one p classred idone p 子代选择器ulliulli /li/ul内部文本ulli(我是li的内容)ulli我是li的内容/li/ul创建多个ulli*3ulli /lili /lili /liul
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- p.box --p classbox/p!-- p.red#one --p classred idone/p!-- 同级的div和p divp --p/pdiv/div!-- 父子 --divp/p/div!-- ulli*3 --ulli/lili/lili/li/ul!-- ulli*3{$} --ulli1/lili2/lili3/li/ul!-- ulli{1111}*3 --ulli1111/lili1111/lili1111/li/ul
/body
/html
背景相关属性
背景颜色
属性名background-colorbgc
属性值颜色取值关键字 rgb表示法 rgba表示法 十六进制...
注意点背景颜色默认值使透明rgba0000 transparent
背景颜色不会影响盒子大小并且还能看清盒子的大小和位置一般在布居中会习惯给盒子设置背景颜色
背景图片
属性名background-imagebgi
属性值
background-imageurl图片的路径
注意点:
背景图中url中可以省略引号
背景图片默认仅仅是在水平和垂直方向上平铺的
背景图片仅仅是指给盒子起到装饰效果类似于背景颜色是不是能撑开盒子的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 300px;background-color: pink;background-image: url(./beauty.jpg);}/style
/head
bodydiv整个背景吧/div
/body
/html
背景平铺
属性名background-repeatbgr
属性值
取值效果repeat默认水平和垂直方向都平铺no-repeat不平铺repeat-x沿着水平方x轴平铺repeat-y沿着垂直方向y轴平铺
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 300px;background-color: red;background-image: url(./beauty.jpg);background-repeat: no-repeat;/* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-repeat: repeat; */}/style
/head
bodydivload/div
/body
/html
背景位置
属性名background-positionbgp
属性值
background-position水平方向位置 垂直方向位置;注意点方位名词取值和坐标取值可以混使用第一个取值表示水平第二个取值表示垂直
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 1900px;height: 1600px;background-color: white;background-repeat:no-repeat ;background-image: url(./bird.jpg); /* background-position: center center; *//* background-position: right bottom; *//* background-position: left top; *//* background-position: center; */background-position: -50px 60px; }/style
/head
bodydiv这是背景位置/div
/body
/html
背景相关属性的连写形式
属性名backgroundbg
属性值单个属性的合写取值之间用空格隔开
书写顺序
推荐backgroundcolor image repeat position
省略问题
*可以按需求省略
*特殊情况在pc端如果盒子大小和背景图片大小一样此时可以直接写backgroundurl
注意点
*如果需要设置单独的样式和连写 要么把单独的样式写在连写的下面 要么把单独的样式写在连写的里面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 2000px;height: 1900px;/* background: pink url(./bird.jpg) no-repeat bottom center; *//* background: pink url(./bird.jpg) no-repeat center bottom; *//* background: pink url(./bird.jpg) no-repeat center bottom; */background: pink url(./bird.jpg) no-repeat 50px 100px;/* 背景图如果是英文单词可以颠倒顺序 *//* 测试背景图位置如果是数值 不要颠倒顺序 */}/style
/head
bodydiv/div
/body
/html
img标签和背景图片的区别
需求需要在网页中展示一张图的效果
法一直接写上img标签即可
法二div标签背景图片
*需要设置div的宽高因为背景图片只是装饰css样式不能撑开div标签
元素单独显示模式
块级元素
显示特点
1.独占一行一行只能显示一个
2.宽度默认是父元素的宽度高度默认由内容撑开
3.可以设置宽高
代表标签
div p h系列、ul 、li、dl、dd、form、header、nav、footer...
行内元素
显示特点
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签
a、span、b、u、i、s、strong、ins、em、del...
行内块元素
显示特点
1.一行可以显示多个
2.可以设置宽高
代表标签
input、textarea、button、select...
特殊情况img标签有行内块元素特点但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的改变元素默认的显示特点让元素符合布局要求
语法
属性效果使用频率displayblock转换成块元素较多displayinline-block转换成行内块元素较多displayinline转换成行内元素极少
拓展1HTML嵌套规范注意点
1.块级元素一般作为大容器可以嵌套文本、块级元素、行内元素、行内块元素等等...
但是p标签中不要求嵌套div、p、h等块级元素
1.a标签内部可以嵌套任意元素
但是a标签不能嵌套a标签
CSS特性
1.继承性
特性子类元素默认继承父类元素样式的特点(子承父业)
可以继承的常见属性文字控制属性都可以继承
1.color
2.font-weight、font-style、font-size、font-family
3.text-indent、text-align
4.line-height
5.。。。
注意点可以通过调试工具判断样式是否可以继承
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{color: blueviolet;font-family: 楷体;}div p a {color:black;}/style
/head
bodydivpa href#超链接/a/pspanspan /spanbra href#a /ah1一级标题/h1/div
/body
/html
拓展继承失效的特殊情况
如果元素有浏览器默认样式此时继承性依然存在但是如果子类本身就有的属性 就不会继续继承
1.a标签的color会继承失效
2.h系类标签的font-sizde会继承失效
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 控制文字的属性都能继承不是控制文字的不能继承 *//*css上一行出错会影响下一行*/div{color: red;font: size 30px;;height: 300px;}/style
/head
bodydiv这是div标签span这是div里面的span/span/div
/body
/html
继承的例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 都是继承继承里面谁高看继承哪个父级哪个父级高哪个选择器生效 */div p{color: red;}.father{color: blue;}/style
/head
bodydiv classfatherp classsonspan文字/span/p/div
/body
/html 2.层叠性
特性
1.给同一个标签设置不同的样式→ 此时样式会层叠叠加 →会共同作用在标签上
2.给同一个标签设置相同的样式→ 此时样式会层叠覆盖 →最终写在最后的样式会生效
注意点当样式冲突时只有选择器优先级相同时才能通过层叠性判断结果
3.1优先级的介绍
特性不同的选择器具有不同的优先级优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式
继承通配符选择器标签选择器类选择器id选择器行内式important
注意点
1.important写在属性值的后面分号的前面
2.important不能提升继承的优先级只要是继承优先级最低
3.实际开发中不建议使用important。
3.2权重叠加计算 测试优先级例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box{color: aqua;}.box{color: blue;}div{color: chartreuse!important;}body{color: red;}/style
/head
bodydiv classbox idbox stylecolor:blueviolet;测试优先级/div
/body
/html
Chrome调试工具
