城镇建设部网站,xampp 开发网站,网站建设方维,比较开放的浏览器网址目录
复合选择器,CSS特性,背景属性,显示模式知识点:
练习一:
练习二: 复合选择器,CSS特性,背景属性,显示模式知识点: 复合选择器:后代选择器 :父选择器 子选择器(中间用空格隔开) eg:对div中的span进行设置,会对后代中的所有span都进行设置 选中所有后代(后代选择器.html)…目录
复合选择器,CSS特性,背景属性,显示模式知识点:
练习一:
练习二: 复合选择器,CSS特性,背景属性,显示模式知识点: 复合选择器:后代选择器 :父选择器 子选择器(中间用空格隔开) eg:对div中的span进行设置,会对后代中的所有span都进行设置 选中所有后代(后代选择器.html) 子代选择器: 父选择器子选择器 只有儿子的同类选择器会产生变化(子代选择器.html) 并集选择器: (相同的样式) 用逗号,隔开 最后一个没有(并集选择器.html) 交集选择器:标签选择器写在前面 中间没有空格(交集选择器.html) 伪类选择器:选中某个状态 鼠标悬停状态:选择器:hover(鼠标悬停状态.html),任何标签都可以设置鼠标悬停 访问前: :link 访问后 :visited 点击时 :active CSS属性:子级可以继承父级的文字控制属性 如果标签有自己的样式,不继承父级的样式 层叠性: 相同的选择器:相同的属性会覆盖:后者覆盖前者,不同的属性会叠加 优先级: 选中标签的范围越大,优先级越低 通配符标签类选择器id选择器行内样式!important(提高优先权) (行内样式div stylecolor:purple/div) *{color:red !important} 优先级叠加计算原则:(行内样式,id选择器个数,类选择器个数,标签选择器个数)从左向右依次比较个数,同一级个数多的优先级高,如果相同,则向后比较 继承权重最低 Emmet写法: /*w500h200bgc*/ !--类选择器: p.box .box(div)-- !--id选择器: p#box-- !--同级别用 divp-- !--父子级 divp -- !--多个相同的标签- span*3-- !--有内容的标签 div{11}-- 背景属性: 背景色:background-color 背景图:background-image 背景平铺方式:background-repeat 背景图位置:background-position 背景图缩放:background-size 背景图固定:background-attachment 背景图复合属性:background 显示模式: 块级元素 div独占一行,宽度默认父级的100%,可以添加宽高 行内元素:span 一行可以共存多个,尺寸由内容撑开,添加宽高不生效 行内块元素:image:一行可以共存多个,尺寸由内容撑开,宽高生效 转换模式: display 块级:block 行内块:inline-block 行内:inline
练习一:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title热词/titlestylea{width: 200px;height: 80px; background-color: #3064bb;display: block; color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 18px;}a:hover{background-color: #608dd9;}/style
/head
bodya href#HTML/aa href#CSS/aa href#JavaScript/aa href#Vue/aa href#React/a/body
/html
练习二:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlebanner效果/titlestyle.banner{height: 500px;background-image: url(./bk.png);background-repeat: no-repeat;background-color: #f3f3f4;/* background-size: contain; */background-position: lef bottom;/*文字控制属性*/text-align: right;color: #333;}.banner .ht{height: 100px;font-size: 36px;line-height: 100px;}.banner .txt{font-size: 20px;}.banner a{width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/*转块无法右对齐*/text-decoration: none;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}/style
/head
bodydiv classbannerp classht让创造产生价值/pp classtxt我们希望小游戏平台可以提供无限的可能性让每一个创作者都可以将他们的才华和创意传递给用户。/pa href#我要报名/a!--行内标签--/div/body
/html
