边框背景 | 易学教程

前端学习（十三）：CSS盒子模型

阅读更多关于前端学习（十三）：CSS盒子模型

进击のpython 前端学习——CSS盒子模型在前面的时候也说过，包括分析网页结构的时候，提到了，网页就其实就是一个一个盒子叠起来的那现在就是有装饰的盒子，难度就变得深刻所以说为了能够让你更好地理解，在说盒子模型之前，我要先向你介绍一下标签对！就是html里面的那些标签标签分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素 html标签甚至有好几百个，我们之前学习大约有30个标签，你所看到的很多大型网站我们都能通过这些标签来搭建我们网站结构那么这么多标签，显然是比较没有规律的，那么我们就来对这些常用的标签进行分类，了解了每类标签的特点之后，我们才能更好的对网站进行布局块状元素 <div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form> 内联元素 <a>、<span>、<i>、<em>、<strong>、<label> 内联块元素 <input>、<img> 那么把网页中常用的标签进行分类之后，那么这三类标签分别有什么特点呢？标签类别特点块状元素 1.独自占据整一行 2.可以设置宽高内联元素 1.所有的内联元素在一行内显示 2.不可以设置宽高行内块元素 1.在一行内显示 2.可以设置宽高注意：标签分类的特点是对现有的HTML常用标签进行分类

day45-前端CSS

阅读更多关于 day45-前端CSS

1 . 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.0 CSS语法 2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 . 2 CSS注释 /*这是注释*/ 注释是代码之母。 3.0 CSS的几种引入方式 3 . 1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3. 2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3. 3 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4 . 0 CSS选择器

Web开发（三）CSS

阅读更多关于 Web开发（三）CSS

概述基本概念层叠样式表（ Cascading Style Sheets ） , 负责网页三要素的表现 , 为网页创建样式表，通过样式表对网页进行装饰层叠：将网页想象成多层的结构，高层次的覆盖低层次， CSS 为各个层次设置样式样式表：各种样式的集合，如字体，颜色，背景，定位等样式语法样式表有一个一个样式构成，一个样式包括选择器和声明块选择器{ 样式名：样式值；样式名：样式值；样式名：样式值； } 选择器　　通过选择器可以选中指定的元素，并将声明块中的样式应用到选择器对应的元素声明块　　紧跟在选择器后面，用一对 { } 括起来　　在一个声明块中可以写多个声明，声明之间用分号 ; 隔开　　样式名和样式值用冒号：连接　　实际上就是一组一组的名值对结构注释　　/* 注释内容 */ 　　css 的注释只能写在 style 标签或 css文件中　　在 style 标签（style标签是head的子标签）中只能存放css代码内联元素、块元素使用原则一般使用块元素包含内联元素，而不使用内联元素去包含块元素 a标签可以包含任何元素（除了本身） p标签不可以包含任何块元素引入方式内联样式表将样式直接编写到元素的style属性中，不用填写选择器，直接编写声明即可内联样式只对当前元素的内容起作用内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

CSS

阅读更多关于 CSS

CSS的四种引入方式：一、行内样式 <div style="background-color: blue;color: brown">cairui</div> 二、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: blue; color: darkgoldenrod; } </style> </head> <body> <p>cai</p> <div>rui</div> </body> </html> 三、写一个css文件，把内容放在里面引用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "1.css"; </style> </head> <body> <p>cai</p> <div>rui</div> </body> </html> 四： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="1.css"

HTML学习笔记

阅读更多关于 HTML学习笔记

============================ day1 ============================= 一、相关概念 internet: 国际互联网，全球最大的网络。 WWW(web)：internet中的一类服务，如图片、新闻、视频。 URL地址：网址 http://www.taobao.com http://localhost:8080/apex 协议：网络中通信必须遵守的规范。 http协议：web服务中必须遵守的规范。域名（机器名/IP地址）：标识网络中的一台主机。网页：web服务中提供的一个数据文件。静态网页：内容固定不变。动态网页：内容自动更新、因人因时而异。 HTML：Hype Text Markup Language 超文本标记语言用于制作静态网页内容。二、基本语法 1、后缀 .html .htm 2、由三部分构成： html head body 3、由标签组成 <html> </html> 标签成对出现，允许嵌套。 <html> <head> </head> <body> </body> </html> 标签中可以有属性(定义在开始标签中)： <body 属性名="值" bgcolor="red"> 标签可以有标签体内容：<body>标签体内容</body> 其中标签体内容，可以是文字内容/图片，也可以是

HTML/CSS 学习笔记（整理）

阅读更多关于 HTML/CSS 学习笔记（整理）

<html> <head> <title>网页标题</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />元数据标签（编码格式，关键字和内容描述） </head> <body> <h1></h1>文章标题 <p></p>段落 <hr/>水平线 <br/>换行 <strong>内容加粗</strong> <em>内容倾斜</em> <img src="图片地址" title="鼠标悬停显示内容" alt="地址错误显示内容" width="宽" height="高"/> </body> </html> 标签分类： <标签名>内容</标签名> <标签名属性名="属性值" 属性名="属性值"/> 规范要求：标签名小写，属性名小写，属性值加引号，（属性和属性，标签名之间有空格）必须有闭合标签，正确嵌套，子标签注意缩进注意：所有符号必须是英文环境下的符号特殊符号： &文字；空格： > ： > < ： < 版权符号：© 引号：" ----------------------------------------------------- 相对路径：相对于当前html页面所在地址例如： c:/demo/first.html中<img src="pic.jpg"/>

css常用标签

阅读更多关于 css常用标签

字体属性：(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height: normal;(正常) 单位：PX、PD、EM 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体 font-variant: small-caps;(小型大写字母) normal;(正常) 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体： (font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性： (background) 色彩background-color:

html之样式

阅读更多关于 html之样式

HTML 样式 1. font字体 font-family 字体样式比如:微软雅黑、Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体 color 字体颜色 font-size:50px 字体大小注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。 text-align:center 对齐方式 font-style 字体风格斜体 normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示 font-variant 小型大写字母 font-weight 字体粗细normal:400 bold:700 最粗:900 总结属性描述 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列。 font-size 设置字体的尺寸。 font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 2. background背景

HTML基础3

阅读更多关于 HTML基础3

页面的制作过程 1 页面的制作过程 1 设计师制作设计图划分区域最重要最复杂 2 前端工程师制作页面填充内容 2 如何划分区域用合适的元素来表示不同的区域已学习 HTML 设置区域的位置、尺寸、背景等样式 CSS 3 划分区域中的 CSS 知识每个元素都会在页面中生成一个矩形区域 CSS 称该矩形区域为盒子 (box) 2. 盒模型概述 1 盒子的分类不同的元素产生的盒子类型可能不同一个元素，产生什么样的盒子，取决于它 CSS 的 display 属性 2 盒子的组成一个盒子由： margin 、 border 、 padding 、 content 组成 3. CSS 的尺寸单位在 CSS 中，有很多属性的取值，需要表示为一个尺寸，一个尺寸，由数值和单位组成。 4. 盒模型 content 内容含义用于存放文本或其他元素的区域，类似于一个箱子中存放东西的空间相关 CSS属性 Overflow 含义：内容溢出时的处理方式不可继承默认值： visible 溢出部分仍然显示其他取值 hidden溢出部分隐藏 scroll在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用 auto当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现 min-width 含义：最小宽度保证 width属性的值不小于该属性值不可继承默认值

CSS选择器一些属性

阅读更多关于 CSS选择器一些属性

属性 1. 字体、文本 * font-size：字体大小 * color：文本颜色 * text-align：对其方式 * line-height：行高 2. 背景 * background： 3. 边框 * border：设置边框，符合属性 4. 尺寸 * width：宽度 * height：高度 5. 盒子模型：控制布局 * margin：外边距 * padding：内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 * float：浮动 * left * right 来源： https://blog.csdn.net/qq_37388518/article/details/99309039

订阅边框背景