day40--webday02
选择器续
-
子孙后代选择器: 通过元素之间的层级关系选择元素
-
格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p标签(包括后代)
-
子元素选择器: 通过元素之间的层级关系选择元素
-
格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)
-
伪类选择器: 选择的是元素的状态, 元素有哪些状态? 包括:未访问状态,访问过状态,悬停状态,点击状态
-
格式: a:link/visited/hover/active:{样式代码}
选择器练习:
-
关羽绿色
-
张飞和苹果黄色
-
文本框和所有水果背景红色
-
p2字体粉色
-
p2和p3背景黄色
-
优酷未访问绿色,访问过红色
悬停黄色,点击粉色
颜色赋值
三原色: 红绿蓝 ,red green blue rgb ,每个颜色的取值范围0-255
颜色赋值的几种方式:
-
颜色单词: 常见颜色单词都可以使用
-
6位16进制赋值: #ff0000
-
3位16进制赋值: #f00
-
3位10进制赋值: rgb(255,0,0)
-
4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度
背景图片
-
background-image:url("路径") 设置背景图片
-
background-size:100px 200px 设置背景图片尺寸
-
background-repeat:no-repeat; 禁止重复
-
background-position: 横向 纵向; 设置背景图片的位置,两种方式: 1像素 2百分比
文本和字体相关样式
-
text-align:left/right/center; 文本水平对齐方式
-
line-height:20px; 设置行高, 多行文本时可以控制行间距, 单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)
-
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰
-
text-shadow:颜色 x偏移值 y偏移值 浓度; 阴影
-
font-size:20px; 设置字体大小
-
font-weight:bold加粗/normal去掉加粗
-
font-style:italic; 设置斜体
-
font-family: xxx,xxx,xxx; 设置字体
-
font:20px xxx,xxx,xxx; 这只字体大小+字体
元素的显示方式display
-
block: 块级元素的默认值, 特点: 独占一行 可以修改宽高, 包括: h1-h6 , p, div
-
inline: 行内元素的默认值, 特点: 共占一行 不可以修改宽高, 包括: span, b,i,s,u,超链接a
-
inline-block:行内块元素默认值, 特点: 共占一行 并且可以修改宽高, 包括: img,input
-
none: 隐藏元素
CSS的三大特性
-
继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带的效果不受继承影响, 比如超链接字体颜色
-
层叠:多个选择器可能选择到同一个元素,如果添加的样式不同则全部层叠有效,如果作用的样式相同 则由优先级决定哪个生效
