网站关键词排名怎么做上去,腾讯企点账户中心,学校网站建设开,自建网站如何在百度上查到文章目录图片元素img元素和a元素连用和map元素和figure元素多媒体元素videoaudio列表元素有序列表无序列表定义列表容器元素div元素语义化容器元素元素包含关系为网页添加样式CSS术语解释选择器声明块CSS代码书写位置常见样式声明选择器简单选择器选择器的组合选择器的并列层叠…
文章目录图片元素img元素和a元素连用和map元素和figure元素多媒体元素videoaudio列表元素有序列表无序列表定义列表容器元素div元素语义化容器元素元素包含关系为网页添加样式CSS术语解释选择器声明块CSS代码书写位置常见样式声明选择器简单选择器选择器的组合选择器的并列层叠1. 比较重要性2. 比较特殊性3. 比较源次序应用继承属性值的计算过程盒模型盒子的组成部分盒模型应用改变宽高范围改变背景覆盖范围溢出处理断词规则空白处理行盒的盒模型行盒显著特点行块盒空白折叠可替换元素 和 非可替换元素常规流常规流布局块盒图片元素
img元素
image缩写, 空元素src属性: 资源sourcealt属性: 当图片资源失效时, 将使用该属性的文字信息 和a元素连用
和map元素
map: 地图map的子元素area衡量坐标使用专业量图工具ps, pxcook
和figure元素
通常用于把图片, 图片标题,描述包裹起来子元素figcaption: 用于图片标题 多媒体元素
video: 视频audio: 音频
video
controls: 控制空间的显示, 取值为controls布尔属性: 某些属性只有两种状态 不写值为属性值 autoplay: 布尔属性muted: 静音播放, 布尔属性loop: 循环播放, 布尔属性
audio
相同于video 列表元素
有序列表 ol: ordered list 表示整个列表 li: list item 表示列表里面的元素 reversed: 布尔属性, 逻辑颠倒(仅是标号颠倒) type: 标号方式
无序列表
ul: unordered list无序列表常用于制作菜单或者新闻列表 定义列表
用于一些术语的定义dl: definition listdd: definition descriptiondt: definition title 容器元素
容器元素: 该元素代表一个区域, 区域内部用于放置其他元素
div元素
没有语义, 划分区域而已
语义化容器元素
header: 通常用于表示页头,也用于表示文章的头部footer: 通常用于表示页脚,也用于文章的尾部article:通常用于表示整章文章section: 通常用于表示文章的章节aside: 通常用于表示侧边栏,附加信息 元素包含关系 元素的包含关系由元素的内容类别决定 查看: 某元素 mdn 百度上查看 容器元素中可以包含任何元素 a元素中几乎可以包含任何元素 某些元素有固定的子元素(ul-li, ol-li, dl-dd,dt) 标题元素和段落元素不能相互嵌套, 并且不能包含容器元素 为网页添加样式CSS
术语解释 CSS规则 选择器 声明块 选择器: 选中元素 声明块: 放属性 styleh1{color: red;background-color: lightblue;text-align: center;}/style选择器
ID选择器: 选中对应ID值的元素元素选择器: 选中所有元素类选择器
声明块
出现在选择器后面的大括号中 . 包含众多声明(属性) CSS代码书写位置
内部样式表 书写在style元素中 内联样式表 直接书写在元素的style属性中 外部样式表 将样式书写到独立的css文件中外部样式表可以解决多页面重复问题有利于浏览器缓存,提高页面响应速度有利于代码(css, html)分离, 提高可读性和维护 常见样式声明 color:文字颜色 预设值: 定义好的单词 三原色: 色值, 每个颜色区间0~255 rgb(111, 120, 255)
hex() #008c8c (16进制表示)淘宝红 #ff4400 或者#f40
黑色 #000
白色 #fff
红 #f00
绿 #0f0
蓝 #00f
紫 #f0f
青 #0ff
黄 #ff0
灰色 #cccbackground-color: 元素背景颜色 font-size: 元素内部文字尺寸大小 单位px: 像素,理解为文字大小 em: 相对单位, 相对于父元素文字大小 每个元素必须有字体大小, 如果没有继承父元素字体大小,没有父元素,用基准字号 user agent: UA, 用户代理(浏览器) font-weight: 文字粗细程度 取值: 数字,预设值(设置好的单词) font-family: 文字类型, 用户计算机中存在的字体 可以设置多个字体san-serif: 非衬线字体, 通用字体, 放在最后 font-style: 字体样式, 比如斜体 i: 该元素默认字体样式为倾斜字体, 通常表示图标篇, em也是斜体strong, em: strong默认字体加粗, 前者表示重要的,不能忽略的内容, 后者表示强调的内容del: 表示错误的内容s: 表示过期的内容 text-decoration:给文本加线 text-indent: 首行文本缩进 line-height: 行高 设置行高为容器高度, 可以让单行文本垂直居中行高设置为纯数字,表示相对于当前元素字体大小 width: 宽度 height: 高度 letter-space: 文字之间间隙 text-align: 元素内部文字水平排列方式 选择器
简单选择器
网上搜索属性选择器 mdn
ID选择器元素选择器类选择器通配符选择器 *: 选中所有的元素 属性选择器 根据属性名和属性值选择元素 伪类选择器 选中某些元素的某种状态link: 超链接未被访问时的状态visited: 超链接访问过后的状态hover: 鼠标悬停状态active: 鼠标按下状态爱恨法则 love hate 伪元素选择器 before:第一个元素after: 最后一个元素 选择器的组合
后代元素 – 空格并且.子元素 – 相邻兄弟元素 – 兄弟元素 – ~ 选择器的并列
多个选择器用,分隔 层叠
声明冲突: 同一个样式, 多次应用到了同一个元素层叠: 解决声明冲突的过程,浏览器自动处理(又叫权重计算) 1. 比较重要性 重要性从高到低 作者样式表: 开发者书写的样式 作者样式表中的!important作者样式表中的普通样式浏览器默认样式表中的样式 2. 比较特殊性
总体规则: 看选择器选中的范围越小越特殊具体规则: 通过选择器计算出一个四位数 千位: 如果是内联样式记作1, 否则记0百位: 等于选择器中所有id选择器的数量十位: 等于选择器中所有类选择器,属性选择器,伪类选择器的数量之和个位: 等于所有元素选择器,伪元素选择器的数量之和
3. 比较源次序
代码书写靠后的胜出 应用 重置样式表 书写一些作者样式, 覆盖浏览器的默认样式重置样式表覆盖浏览器的默认样式 常见的重置样式表: normalize.css , reset.css, meyer.css 爱恨法则 link visited hover active 继承
子元素可以继承父元素的某些属性 某些属性: 一般指字体相关的属性 属性值的计算过程 一个一个元素依次渲染, 按照页面文档的树形目录进行 渲染每个元素的前提条件: 该元素所有CSS属性必须有值 属性的计算过程: 一个元素, 从所有属性没有值到所有属性都有值 过程: 确定声明值: 参考样式表中没有冲突的声明作为css属性值 a: 该元素默认声明了样式 stylep{color: red;}a{ /* 强制继承 */color: inherit;}/style
/head
bodypa href21120/apvsndikj/p/p
/body层叠冲突: 有冲突的使用层叠规则确定CSS属性 依次比较重要性,特殊性,次序 使用继承: 任然没有值的属性继承父元素的值 使用默认值: 对仍然没有值的属性使用默认值 inherit: 手动强制继承, 将父元素的值去除应用到该元素 initial: 初始值, 将该属性设置为默认值 盒模型 box盒子每个元素在页面中都会生成一个矩形区域盒子 盒子类型 行盒display等于inline的元素 块盒display等于block的元素 行盒在页面中不换行、块盒独占一行 display默认值为inline 浏览器默认样式表设置的块盒容器元素、h1~h6、p 常见的行盒span、a、img、video、audio 盒子的组成部分
无论是行盒、还是块盒都由下面几个部分组成从内到外分别是 内容 content width、height设置的是盒子内容的宽高内容部分通常叫做整个盒子的内容盒 content-box 填充(内边距) padding 盒子边框到盒子内容的距离padding-left、padding-right、padding-top、padding-bottompadding: 简写属性padding: 上 右 下 左(顺时针)填充区内容区 填充盒 padding-box 边框 border 边框 边框样式 边框宽度 边框颜色(这三种都是速写属性, 顺时针)边框样式border-style边框宽度border-width边框颜色border-color边框填充区内容区 边框盒 border-box 外边距 margin 边框到其他盒子的距离margin-top、margin-left、margin-right、margin-bottom速写属性margin 盒模型应用
改变宽高范围
默认情况下width 和 height 设置的是内容盒宽高。 页面重构师将psd文件设计稿制作为静态页面 衡量设计稿尺寸的时候往往使用的是边框盒但设置width和height则设置的是内容盒 精确计算 CSS3box-sizing
改变背景覆盖范围 默认情况下背景覆盖边框盒 可以通过background-clip进行修改(内容盒,填充盒,边框盒)
溢出处理
overflow控制内容溢出边框盒后的处理方式(hidden, visible, scroll,auto)
断词规则
word-break会影响文字在什么位置被截断换行, 下面三种取值:jw: 键入中文乱数假文(扩展Chinese Lorem)normal普通。CJK(中日韩)字符文字位置截断非CJK字符单词位置截断break-all截断所有。所有字符都在文字处截断keep-all保持所有。所有文字都在单词之间截断
空白处理
white-space: nowrap, 不换行margin: 外边距text-overflow: ellipsis, 文字溢出显示省略号, 仅能控制单行文本,多行用js处理white-space: pre, 不会进行空白折叠 行盒的盒模型 常见的行盒包含具体内容的元素 span、strong、em、i、img、video、audio
行盒显著特点 盒子沿着内容沿伸, 内容多少盒子多大 行盒不能设置宽高
调整行盒的宽高应该使用字体大小、行高、字体类型间接调整。
内边距填充区
水平方向有效垂直方向不会实际占据空间。
边框
水平方向有效垂直方向不会实际占据空间。
外边距
水平方向有效垂直方向不会实际占据空间。
行块盒
displayinline-block的盒子 不独占一行 盒模型中所有尺寸都有效
空白折叠
空白折叠发生在行盒行块盒内部 或 行盒行块盒之间
可替换元素 和 非可替换元素
大部分元素页面上显示的结果取决于元素内容称为非可替换元素少部分元素页面上显示的结果取决于元素属性称为可替换元素可替换元素img、video、audio绝大部分可替换元素均为行盒。可替换元素类似于行块盒盒模型中所有尺寸都有效。object-fit:contain, fill, cover 依次表示保持图片尺寸, 填充(默认), 填充并且保持图片尺寸 常规流 盒模型规定单个盒子的规则 视觉格式化模型布局规则页面中的多个盒子排列规则 视觉格式化模型大体上将页面中盒子的排列分为三种方式 常规流 浮动 定位 常规流布局 又名: 常规流、文档流、普通文档流、常规文档流 所有元素默认情况下都属于常规流布局 总体规则块盒独占一行行盒水平依次排列 包含块containing block每个盒子都有它的包含块包含块决定了盒子的排列区域。 绝大部分情况下盒子的包含块为其父元素的内容盒
块盒
每个块盒的总宽度必须刚好等于包含块的宽度 width:宽度的默认值是auto margin的取值也可以是auto默认值0 auto将剩余空间吸收掉 width吸收能力强于margin 若宽度、边框、内边距、外边距计算后仍然有剩余空间该剩余空间被margin-right全部吸收 在常规流中块盒在其包含快中居中可以定宽、然后左右margin设置为auto。
每个块盒垂直方向上的auto值 height:auto 适应内容的高度 margin:auto 表示0
百分比取值 padding、宽、margin可以取值为百分比 以上的所有百分比相对于包含块的宽度。 高度的百分比
1. 包含块的高度是否取决于子元素的高度设置百分比无效
2. 包含块的高度不取决于子元素的高度百分比相对于父元素高度
上下外边距的合并 两个常规流块盒上下外边距相邻会进行合并。 两个外边距取最大值。
