Web前端-第二天学习笔记

选择器续

1. 子孙后代选择器: 通过元素和元素之间的关系匹配元素

• 格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包括后代)

1. 子元素选择器:通过元素和元素之间的关系匹配元素

• 格式: body>div>div>p{样式代码}匹配body里面的div里面的div里面的p子元素(不包括后代)

1. 伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态

• 格式: a:link/visited/hover/active{样式代码}

• 颜色赋值

  • 三原色RGB RedGreenBlue , 每种颜色的取值范围0-255

  • 五种赋值方式:

    • 颜色单词赋值: red/green/blue/yellow/pink....

    • 6位16进制: #ff 00 00

    • 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:200px 100px; 设置背景图片位置

  • background-position:50% 100%; 设置背景图片位置

  文本和字体相关样式

  • text-align:left/right/center; 水平对齐方式

  • text-decoration:overline/underline/line-through/none; 文本修饰

  • line-height:20px; 设置行高

  • 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斜体,u下划线,s删除线,a超链接等

  • inline-block:行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img

  • none: 隐藏元素

  • 行内元素不能修宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素

  盒子模型

  • 盒子模型= content内容+margin外边距+padding内边距+border边框

  • 作用: 控制元素的显示效果

    • content内容: 控制元素的显示大小

    • margin外边距: 控制元素的显示位置

    • padding内边距: 控制元素内容的位置

    • border边框: 控制元素的边框效果

  盒子模型之Content内容

  • 通过width和height设置元素的内容大小

  • 两种赋值方式

    • 像素

    • 上级元素的百分比

  • 行内元素不能修改宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素

  盒子模型之Margin外边距

  • 作用: 控制元素的显示位置

  • 赋值方式:

    • margin-left/right/top/bottom:10px; 单独某一个方向赋值

    • margin:20px; 四个方向赋值

    • margin:10px 20px; 上下和左右赋值

    • margin:10px 20px 30px 40px; 上右下左顺时针赋值

  • 行内元素上下外边距无效

  • 上下相邻彼此添加外边距 取最大值, 左右相邻 两者相加

  • 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden 解决

  • 部分标签自带外边距,比如: h1-h6内容标题, p段落标签, 列表标签,body

  盒子模型之border边框

  • 作用: 控制元素边框的效果

  • 赋值方式:

    • border:粗细 样式 颜色; 四个方向添加边框

    • border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框

  • border-radius:10px; 设置圆角 值越大越圆, 超过宽高的一半时为正圆

  盒子模型之padding内边距

  • 作用: 控制元素内容的位置

  • 赋值方式: 和外边距类似

    • padding-left/right/top/bottom:10px; 单独某个方向添加

    • padding:10px; 四个方向添加

    • padding:10px 20px; 上下和左右

    • padding:10px 20p 30px 40px; 上右下左顺时针添加

  • 给元素添加内边距会影响元素的宽高,box-sizing: border-box;给元素添加此样式后边框和内边距则不再影响宽高

  • 列表标签自带内边距

  CSS的三大特性

  • 继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如超链接字体颜色

  • 层叠性: 多个选择器可以选择同一个元素, 如果添加的样式不同,则全部层叠生效, 如果添加的样式相同则由优先级决定哪个生效

  • 优先级: 指选择器的优先级, 作用范围越小优先级越高

  !important>id选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)