HTMLCSS 超简单的前端设计入门-2!
文章目录
- 图片元素
- img元素
- 和a元素连用
- 和map元素
- 和figure元素
- 多媒体元素
- video
- audio
- 列表元素
- 有序列表
- 无序列表
- 定义列表
- 容器元素
- `div`元素
- 语义化容器元素
- 元素包含关系
- 为网页添加样式CSS
- 术语解释
- 选择器
- 声明块
- CSS代码书写位置
- 常见样式声明
- 选择器
- 简单选择器
- 选择器的组合
- 选择器的并列
- 层叠
- 1. 比较重要性
- 2. 比较特殊性
- 3. 比较源次序
- 应用
- 继承
- 属性值的计算过程
- 盒模型
- 盒子的组成部分
- 盒模型应用
- 改变宽高范围
- 改变背景覆盖范围
- 溢出处理
- 断词规则
- 空白处理
- 行盒的盒模型
- 行盒显著特点
- 行块盒
- 空白折叠
- 可替换元素 和 非可替换元素
- 常规流
- 常规流布局
- 块盒
图片元素
img元素
- image缩写, 空元素
- src属性: 资源source
- alt属性: 当图片资源失效时, 将使用该属性的文字信息
和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规则 = 选择器 + 声明块
选择器
: 选中元素声明块
: 放属性<style>h1{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 灰色 #ccc
background-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
: 该元素默认声明了样式<style>p{color: red;}a{ /* 强制继承 */color: inherit;}</style> </head> <body><p><a href="">21120</a><p>vsndikj</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-bottom
- padding: 简写属性
- 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,则设置的是内容盒
精确计算
CSS3:box-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
行盒显著特点
盒子沿着内容沿伸, 内容多少盒子多大
行盒不能设置宽高
- 调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
- 内边距(填充区)
- 水平方向有效,垂直方向不会实际占据空间。
- 边框
- 水平方向有效,垂直方向不会实际占据空间。
- 外边距
- 水平方向有效,垂直方向不会实际占据空间。
行块盒
display
:inline-block
的盒子
不独占一行
盒模型中所有尺寸都有效
空白折叠
- 空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
可替换元素 和 非可替换元素
- 大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素
- 少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
- 可替换元素:
img、video、audio
- 绝大部分可替换元素均为行盒。
- 可替换元素类似于行块盒,盒模型中所有尺寸都有效。
object-fit
:contain, fill, cover
依次表示保持图片尺寸, 填充(默认), 填充并且保持图片尺寸
常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
常规流
浮动
定位
常规流布局
又名: 常规流、文档流、普通文档流、常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块,为其父元素的内容盒
块盒
- 每个块盒的总宽度,必须刚好等于包含块的宽度
width
:宽度的默认值是auto
margin
的取值也可以是auto
,默认值0auto
:将剩余空间吸收掉width
吸收能力强于margin
若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被
margin-right
全部吸收在常规流中,块盒在其包含快中居中,可以定宽、然后左右
margin
设置为auto
。
- 每个块盒垂直方向上的auto值
height
:auto
, 适应内容的高度margin
:auto
, 表示0
- 百分比取值
padding
、宽、margin
可以取值为百分比以上的所有百分比相对于包含块的宽度。
高度的百分比:
1). 包含块的高度是否取决于子元素的高度,设置百分比无效
2). 包含块的高度不取决于子元素的高度,百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并。
两个外边距取最大值。
HTMLCSS 超简单的前端设计入门-2!相关推荐
- HTMLCSS 超简单的前端设计入门-1!
第一个网页 文章目录 第一个网页 注释 元素(标签,标记) 元素的嵌套 标准的文档结构 语义化 什么是语义化 为什么需要语义化? 文本元素 h p span pre HTML 实体 a元素 href ...
- 数字IC前端设计入门----之环境搭建
数字IC前端设计入门----环境搭建 今天开始学习IC设计,需要的都学可以一起来哦.作者小白一个,欢迎多多交流. 在某宝上花了79元买套学习资料,但是基本都是视频,应该是翻版的资料.我这里拿出来无偿给 ...
- 从0到接单变现!超简单商业插画设计
播妞知道,许多设计师都想在工作之余可以接一些"私单"增加收入,但大项目常常耗时太久,难以胜任...... 悄悄告诉大家,其实可以利用零散时间来接点插画小私单哦,并且谁都可以上手~ ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...
- 超简单的混合开发入门 JS实现安卓Listview
最近在开发一款报表引擎,里面就需要我会写js做一些简单的混合开发,刚开始学习混合开发的前两天是最郁闷的,毕竟这是一门新的语言,但是还是硬着头皮往上搞了,到第二天的时候就把支持懒加载的Listview倒 ...
- 数字IC设计入门(8)初识数字芯片设计前端
前端做什么工作 数字前端设计也称逻辑设计,前端以设计架构为起点,以功能正确且满足目标时序的网表为终点,用逻辑电路实现预期的功能.主要包括:规则书制定.系统架构设计.部件详细设计.HDL编码.仿真验证. ...
- IC设计职位介绍|如何成为一名合格的数字前端设计工程师?
近年来IC行业火热,但因为一些原因,今年以来行业唱衰的人越来越多.尽管全球芯片市场过剩,但我国的半导体行业发展很可观,目前政策倾向国产芯片的发展,所以半导体人才非常稀缺.我国半导体产业终究要崛起,因为 ...
- 简单网页设计前端(入门)
简单网页设计前端(入门) 按照下面的成品设计网页: 其中包括: 文本框 密码框 提示文字 单选按钮 复选按钮 上传文件 上传图片 等... <!DOCTYPE html PUBLIC &quo ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
最新文章
- 安装和使用Oracle VM VirtualBox中的要点,注意事项和遇到的问题
- 百度的卡尔曼滤波的解释
- 苹果手机(ios)拍照上传图片旋转90度问题---java后台处理
- Windows消息机制学习笔记(三)—— 消息的接收与分发
- 加载dict_Python的dict实现原理和Java的HashMap之间的区别
- 27 款经典的CSS 框架
- java for循环break_Java中break、continue、return在for循环中的使用
- indesign照片放入太大_猪肚鸡做法复杂,量太大,那来个简易版,用上大厨教的妙招更香了...
- 前谷歌技术主管亲述:程序员请避开这几大雷区
- 到底该不该上马Vista 中小企业升级全攻略(上)
- Android程序中读取使用已有的SQLite数据库
- ofo悄然搬离中关村,联合创始人出走,千万用户的押金还能退回来吗?
- java 对象地址_如何获取Java对象的地址?
- Windows下kafka的下载安装
- 最新行政区划代码下载
- Office办公软件测试题
- 搭建Hadoop VM集群
- ACCESS模糊查询like的解决方法SQL查询语句通配符问题
- 后台系统的权限控制与管理
- 阿里云天池大赛赛题(机器学习)——阿里云安全恶意程序检测(完整代码)
热门文章
- linux c之出现warning: implicit declaration of function ‘exit’ [-Wimplicit-function-declaration]这个问题
- Android之严苛模式(StrictMode)
- linux之more命令
- Android之如何解决Android studio运行出现的HAX kernel modules is not installed
- html的canvas标签用法,html5中关于canvas标签用法(绘图)
- java exception 行号_java日志记录错误的文件_方法_行号_报错信息
- 世界上最热的地方在哪里?原来火焰山不是第一...
- 忍“乳”负重,身材好的女孩子究竟有多不容易?我从科学的角度算出来了……...
- 当时我就震惊了:无穷带来的各种悖论
- 剧透人生!你什么时候结婚换工作甚至狗带,Facebook都知道