CSS
文章平均质量分 54
CodeDoraemon
这个作者很懒,什么都没留下…
展开
-
css盒子模型
文章目录1. css盒子模型2. 盒子模型 (Box Model)组成3. 盒子模型之边框 border3.1 示例代码3.2 运行结果4. 表格的细线边框5. 边框会影响盒子的实际大小 实际中需要考虑1. css盒子模型什么是盒子模型?核心是利用 CSS 进行盒子的位置的摆放2. 盒子模型 (Box Model)组成padding (内边距):默认的文字是再左上角的,通过 padding 可以设置文字距离边框的距离margin (外边距):控制盒子之间的距离3. 盒子模型之边原创 2021-02-02 11:17:19 · 230 阅读 · 0 评论 -
CSS权重的叠加 练习
文章目录1. CSS权重的叠加2. 示例代码3. 运行结果1. CSS权重的叠加2. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti原创 2021-02-02 09:18:04 · 294 阅读 · 0 评论 -
CSS 三大特性
文章目录1. CSS 三大特性2. 层叠性3. 继承性3.1 行高的继承性4. 优先级4.1 优先级注意问题4.2 示例代码4.3 运行结果1. CSS 三大特性层叠性继承性优先级2. 层叠性解决样式冲突的关系相同的选择器 相同的样式才会覆盖掉3. 继承性3.1 行高的继承性4. 优先级4.1 优先级注意问题父元素的权重多高 子元素的权重都是 04.2 示例代码<!DOCTYPE html><html lang="en"><head原创 2021-01-30 22:05:31 · 82 阅读 · 0 评论 -
CSS 案例制作导航栏
1.制作目标2. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 案例制作导航栏</title> <style>原创 2021-01-30 21:24:50 · 309 阅读 · 0 评论 -
CSS的背景
1. CSS背景2. 背景颜色 div { width: 200px; height: 200px; background-color: skyblue; } background-color3. 背景图片这些背景都是一些图片3.1 示例代码<!DOCTYPE html><html lang="en"><head> <met原创 2021-01-30 11:48:39 · 636 阅读 · 0 评论 -
CSS 的元素显示模式 案例
1. 简洁版小米侧边栏的案例单行文字居中代码:上下空隙将文字挤到中间了1.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2021-01-29 16:48:07 · 128 阅读 · 0 评论 -
CSS snipaste使用
snipaste 的使用原创 2021-01-29 16:19:11 · 214 阅读 · 0 评论 -
CSS 元素显示模式
文章目录1. CSS 元素显示模式2. 什么是元素显示模式1. CSS 元素显示模式2. 什么是元素显示模式作用:在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局网页原创 2021-01-29 12:20:32 · 382 阅读 · 1 评论 -
CSS 复合选择器 (后代 子 并集 伪类)
1. 复合选择器基础概念2. 后代选择器2.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合选择器之后代选择器</title> <原创 2021-01-28 18:10:57 · 712 阅读 · 0 评论 -
CSS 第二天学习导读 emmet 快速生成HTML CSS部分代码 快速格式化代码
CSS 第二天学习导读1. emmet可以提高HTML CSS 的编写速度1.1 快速生成html结构语法1.2 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-01-28 09:32:30 · 138 阅读 · 1 评论 -
CSS chrome 调试工具
chrome 调试工具使用 F12 进行打开做边是 html 右边是 CSS使用调试工具相关使用方式原创 2021-01-27 20:51:05 · 115 阅读 · 0 评论 -
CSS 一个案例制作一个网页的段落的布局
CSS 段落布局结构样式2. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页段落布局</title> <style>转载 2021-01-27 20:40:55 · 440 阅读 · 0 评论 -
CSS 引入方式
CSS 引入方式CSS 的引入可以分为三个样式行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)1. 内部样式表放到 style 之中style 理论上可以放在任何的位置,但是习惯上放在 的上面1.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt原创 2021-01-27 18:28:19 · 232 阅读 · 0 评论 -
CSS 文本属性 颜色 对齐 装饰 缩进 行间距
1. CSS 文本属性css 文本属性可以定义为外观、文本的颜色、对齐文本、文本缩进、行间距等2. 文本颜色3. 对齐文本texa-alian 属性设置元素内部文本内容进行水平对齐三种对齐方式:左对齐右对齐据中对齐3.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="原创 2021-01-27 16:05:12 · 305 阅读 · 0 评论 -
CSS font 复合属性写法
title: CSS font 复合属性写法1. font 复合属性写法1.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title.原创 2021-01-27 15:48:31 · 3399 阅读 · 0 评论 -
CSS 字体属性 font-family size weight style
title: CSS 字体属性1. Font-family1.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .原创 2021-01-27 13:24:30 · 616 阅读 · 0 评论 -
CSS 通配符选择器
title: CSS 通配符选择器1. CSS 通配符选择器选取页面中的所有元素2. CSS 基础选择器的总结3. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.原创 2021-01-26 20:28:56 · 1077 阅读 · 0 评论 -
CSS #id选择器
1. CSS id选择器2. id 选择器和类选择器的区别3. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id 选择器</title>原创 2021-01-26 20:18:37 · 440 阅读 · 0 评论 -
CSS 类选择器的特殊使用-多类名
title: CSS 类选择器的特殊使用-多类名CSS 类选择器的特殊使用-多类名概念一个标签有多个名字多类名的使用方式示例代码多类名在开发中的使用场景原创 2021-01-26 19:54:39 · 971 阅读 · 1 评论 -
CSS 基础选择器的使用
title: CSS 基础选择器的使用1. CSS 选择器的作用选择器更具不同需求把不同的标签选择出来,此为选择器的作用,简答来说就是选择标签使用选择标签设置标签的样式2. 选择器的分类基础选择类和符合选择类2.1 标签选择器2.2 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo.原创 2021-01-26 17:58:35 · 184 阅读 · 0 评论 -
CSS 语法规范 代码风格
CSS 语法规范选择器 及 一条或者多条申明CSS 代码风格1. 样式格式书写使用展开式的风格,更加的直观2. 样式大小写风格所有的关键字都推荐使用小写字母进行书写,特殊的情况除外3. 样式空格风格在每个冒号的后面写上一个空格选择器和大括号之间写一个空格...原创 2021-01-26 12:22:30 · 195 阅读 · 0 评论 -
CSS 层叠样式表导读 CSS 简介
tltle:CSS 层叠样式表导读 CSS 简介学习目标CSS 简介CSS 主要使用在布局网页1. html 的局限性2. CSS 网页的美容师有时候,将 CSS 叫做 CSS 样式表 或 级联样式表CSS 标记语言小结原创 2021-01-26 11:45:00 · 99 阅读 · 0 评论