0
点赞
收藏
分享

微信扫一扫

web前端day02

才德的女子 2022-04-27 阅读 78
java

选择器续

  1. 子孙后代选择器: 通过元素之间的层级关系选择元素
  • 格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p标签(包括后代)
  1. 子元素选择器: 通过元素之间的层级关系选择元素
  • 格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)
  1. 伪类选择器: 选择的是元素的状态, 元素有哪些状态? 包括:未访问状态,访问过状态,悬停状态,点击状态
  • 格式: a:link/visited/hover/active:{样式代码}

颜色赋值

三原色: 红绿蓝 ,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: 隐藏元素
  • 行内元素不能直接修改宽高, 如必须修改则先将元素的显示方式改成block或inline-block

盒子模型

  • 盒子模型用来控制元素的显示效果包括: 元素内容content+外边距margin+边框border+内边距padding
  • 元素内容content:控制元素的显示尺寸
  • 外边距margin:控制元素的显示位置
  • 边框border:控制边框效果
  • 内边距padding:控制元素内容的位置

盒子模型之内容content

  • 包括:width和height
  • 赋值方式有两种:
  • 像素
  • 上级元素的百分比
  • 行内元素不能直接修改宽高

盒子模型之外边距margin

  • 作用: 控制元素的显示位置
  • 赋值方式:
  • margin-left/right/top/bottom:10px; 单独某个方向赋值
  • margin:10px; 四个方向赋值
  • margin:10px 20px; 上下10 左右20
  • margin:10px 20px 30px 40px; 上右下左 顺时针赋值
  • 行内元素上下外边距无效
  • 上下相邻彼此添加外边距 取最大值
  • 左右相邻彼此添加外边距 两者相加
  • 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

盒子模型之边框border

  • 赋值方式:
  • border:1px solid red; 给四个方向添加边框
  • border-left/right/top/bottom:1px solid red; 单独给某个方向添加边框
  • border-radius:10px; 值越大越圆 当值超过宽高的一半时为正圆(前提是正方形)

盒子模型之内边距padding

  • 作用: 控制元素内容的位置
  • 赋值方式: 和外边距类似
  • padding-left/right/top/bottom:10px; 单独某个方向赋值
  • padding:10px; 四个方向赋值
  • padding:10px 20px; 上下和 左右赋值
  • padding:10px 20px 30px 40px; 上右下左顺时针赋值
  • 给元素添加内边距会影响元素的显示宽高

CSS的三大特性

  • 继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带的效果不受继承影响, 比如超链接字体颜色
  • 层叠:多个选择器可能选择到同一个元素,如果添加的样式不同则全部层叠有效,如果作用的样式相同 则由优先级决定哪个生效
  • 优先级: 指CSS中的选择器具有优先级, 作用范围越小优先级越高, !important>id>class>标签名>继承(属于间接选中)
举报

相关推荐

Day02

day02

day01、day02 Web APIs、DOM

前端Day02 CSS文本属性

vue day02

uniapp—day02

shell day02

0 条评论