随笔分类 - CSS3学习记录
摘要：网页布局的本质—利用CSS来摆放盒子。即把盒子摆放到相应的位置 CSS提供了三种传统（PC端）网页布局方式（简单说，就是盒子如何进行排列顺序） 标准流（普通流） 浮动 定位 这三种方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了 注意：实际开发中，一个页面基本包含了这三种布局方式（）
阅读全文
摘要：盒子阴影 box-shadow属性为可以设置 盒子阴影 语法 box-shadow: h-shadow v-shadow blur spread color inset; 说明 | 属性值 | 说明 | | | | | h-shadow | 必须。水平阴影的位置。允许负值 | | v-shadow
阅读全文
摘要：圆角边框 border-radius属性用于设置元素的外边框圆角 语法 border-radius: length; 原理：（椭）圆与边框的相交形成的圆角效果 说明 参数值可以是数值或百分比的形式 如果是正方形，想要把盒子设置为一个圆，把数值改为高度或宽度的一半即可，或直接写为50% 如果是个矩形，
阅读全文
摘要：效果 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css"> </hea
阅读全文
摘要：语法 list-style: none; 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去掉列表标签的</title> <style> ul li, ol li { list-style: none;
阅读全文
摘要：案例 padding-新浪导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航</title> <style> .nav { height: 41px; border-top: 3px solid
阅读全文
摘要：页面布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子。 利用CSS设置好盒子样式，然后放到相应的位置 往盒子里面装内容 网页布局的本质：就是利用CSS摆盒子 盒子模型 组成 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒
阅读全文
摘要：CSS有三个非常重要的三个特性：层叠性、继承性、优先级。 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 示例代码 <!DOCTYPE
阅读全文
摘要：实现下面效果 当鼠标经过链接时 背景图片会发生改变 核心思路 链接属于行内元素，但是此时需要设置宽高，因此需要模式转换 里面的文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码 链接里面需要设置背景图片，因此需要用到背景的相关属性 鼠标经过变化背景图片，因此需要用到链接伪类选择器 代码 <!
阅读全文
摘要：通过CSS背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图像固定等。 background-color（背景颜色） background-color属性定义了元素的背景颜色。 语法 background-color: transparent | color
阅读全文
摘要：实现下面效果 核心思路 把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度 鼠标经过a时 设置背景颜色 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例二-侧边栏</title> <style> /*
阅读全文
摘要：什么是元素显示模式 元素显示就是元素（标签）以什么方式进行显示。比如，<div>自己独占一行，一行可以放多个<span>。 作用：网页中的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面。 元素显示模式的分类 HTML元素一般分为块元素和**行内元素（内联元素）**
阅读全文
摘要：复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素（标签） 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 常用的复合选择器包括： 后代选择器 子选择器 并集选择器 伪类选择器 后代选择器 后代选择器又称为包含选择器，可以选择父元
阅读全文
摘要：Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度。 几种常用的编辑器（PyCharm，VSCode，HBuilderX...）都已集成了Emmet语法 快速生成HTML结构语法 生成标签直接输入标签名按tab健即可。比如：div 然后tab键，就可以生成<di
阅读全文
摘要：css没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现. 解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行文字垂直
阅读全文
摘要：实现下面效果 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>综合案例</title> <style> body { /* 设置文字大小/行高 字体样式 */ font: 16px/28px 'Microsoft YaH
阅读全文
摘要：CSS Text（文本）属性用于定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本颜色，行间距等 color（文本颜色） color属性用于定义文本的颜色 基本语法 div { color: 属性值; } 表示 属性值 预定义颜色 red，green，blue ... 十六进制 #FF0000
阅读全文
摘要：CSS Font（字体）属性用于定义字体系列、大小、粗细、和文字样式等。 font-family（字体系列） CSS使用font-family属性定义文本的字体系列。 基本语法 p { font-family: '微软雅黑'; } div { /* 如果写了多个字体会按照从左到右的顺序在浏览器中查找
阅读全文
摘要：CSS选择器的作用 比如，我们有如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>我是div</div> <div>我是div</
阅读全文
摘要：CSS的引入 按照CSS样式的书写位置（或引入方式），CSS样式表可以分为三大类： 行内样式表（行内式） 内部样式表（嵌入式） 外部样式表（连接式） 行内样式表 行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。 <div style="color: pu
阅读全文
