什么网站可以做试卷,长沙出名的网站设计推广,做个企业网站多少钱,旅游攻略网站模板01-复合选择器
定义#xff1a;由两个或多个基础选择器#xff0c;通过不同的方式组合而成。
作用#xff1a;更准确、更高效的选择目标元素#xff08;标签#xff09;。
后代选择器
后代选择器#xff1a;选中某元素的后代元素。
选择器写法#xff1a;父选择器 …01-复合选择器
定义由两个或多个基础选择器通过不同的方式组合而成。
作用更准确、更高效的选择目标元素标签。
后代选择器
后代选择器选中某元素的后代元素。
选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用空格隔开。
stylediv span {color: red;}
/style
•span span 标签/span
divspan这是 div 的儿子 span/span
/div
子代选择器
子代选择器选中某元素的子代元素最近的子级。
选择器写法父选择器 子选择器 { CSS 属性}父子选择器之间用 隔开。
stylediv span {color: red;}
/style
divspan这是 div 里面的 span/spanpspan这是 div 里面的 p 里面的 span/span/p
/div
并集选择器
并集选择器选中多组标签设置相同的样式。
选择器写法选择器1, 选择器2, …, 选择器N { CSS 属性}选择器之间用 , 隔开。
stylediv,p,span {color: red;}
/style
div div 标签/div
pp 标签/p
spanspan 标签/span
交集选择器
交集选择器选中同时满足多个条件的元素。
选择器写法选择器1选择器2 { CSS 属性}选择器之间连写没有任何符号。
stylep.box {color: red;
}
/style
p classboxp 标签使用了类选择器 box/p
pp 标签/p
div classboxdiv 标签使用了类选择器 box/div 注意如果交集选择器中有标签选择器标签选择器必须书写在最前面。 伪类选择器
伪类选择器伪类表示元素状态选中元素的某个状态设置样式。
鼠标悬停状态选择器:hover { CSS 属性 }
stylea:hover {color: red;}.box:hover {color: green;}
/style
a href#a 标签/a
div classboxdiv 标签/div
超链接伪类 提示如果要给超链接设置以上四个状态需要按 LVHA 的顺序书写。 经验工作中一个 a 标签选择器设置超链接的样式 hover状态特殊设置 a {color: red;
}
a:hover {color: green;
}
02-CSS特性
CSS特性化简代码 / 定位问题并解决问题 继承性 层叠性 优先级
继承性
继承性子级默认继承父级的文字控制属性。 注意如果标签有默认文字样式会继承失败。 例如a 标签的颜色、标题的字体大小。 层叠性
特点 相同的属性会覆盖后面的 CSS 属性覆盖前面的 CSS 属性 不同的属性会叠加不同的 CSS 属性都生效
stylediv {color: red;font-weight: 700;}div {color: green;font-size: 30px;}
/style
divdiv 标签/div 注意选择器类型相同则遵循层叠性否则按选择器优先级判断。 优先级
优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则。
stylediv {color: red;}.box {color: green;}
/style
div classboxdiv 标签/div
基础选择器
规则选择器优先级高的样式生效。
公式通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important
选中标签的范围越大优先级越低
复合选择器-叠加
叠加计算如果是复合选择器则需要权重叠加计算。
公式每一级之间不存在进位 规则 从左向右依次比较选个数同一级个数多的优先级高如果个数相同则向后比较 !important 权重最高 继承权重最低
03-Emmet 写法
Emmet写法代码的简写方式输入缩写 VS Code 会自动生成对应的代码。 HTML标签 CSS大多数简写方式为属性单词的首字母 04-背景属性 背景图
网页中使用背景图实现装饰性的图片效果。 属性名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;
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
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;
}
05-显示模式
显示模式标签元素的显示方式。 作用布局网页的时候根据标签的显示模式选择合适的标签摆放内容。
块级元素
特点 独占一行 宽度默认是父级的100% 添加宽高属性生效 行内元素
特点 一行可以显示多个 设置宽高属性不生效 宽高尺寸由内容撑开 行内块元素
特点 一行可以显示多个 设置宽高属性生效 宽高尺寸也可以由内容撑开 转换显示模式
属性display 06-综合案例一-热词 HTML标签
a href#HTML/a
a href#CSS/a
a href#JavaScript/a
a href#Vue/a
a href#React/a
CSS样式
style
/* 默认效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}
/* 鼠标悬停的效果 */
a:hover {
background-color: #608dd9;
}
/style
07-综合案例二 – banner 效果 HTML标签
div classbannerh2让创造产生价值/h2p我们希望小游戏平台可以提供无限的可能性让每一个创作者都可以将他们的才华和创意传递给用户。/pa href#我要报名/a
/div CSS样式
style.banner {height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;
/* 文字控制属性继承给子级 */text-align: right;color: #333;}
.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}
.banner p {font-size: 20px;}
.banner a {width: 125px;height: 40px;background-color: #f06b1f;
display: inline-block;/* 转块级无法右对齐因为块元素独占一行 *//* display: block; */
text-align: center;line-height: 40px;color: #fff;text-decoration: none;font-size: 20px;}
/style
