边框背景

html5和css 初步学者应用笔记

情到浓时终转凉″ 提交于 2019-12-06 02:48:58
HTML 超文本 标记 语言 标签:是由一对 <> 构成的,有开始、有结束。 html架构: <!doctype html> 网页的名称、网页的样式css、网页相关的js、网页的编码 书写要学习的标签(内容) 例子1: <!doctype html> hello world hello world 例子2:设置中文编码 !doctype html> hello world 哈哈哈 (1) 网页的编码 (2)网页文件的编码 标签: 块标签: 单独占一行 1.标题标签 从1到6 文字大小依次变小 2.水平线 3.段落标签 4.无序列表 5.div 布局标签 6.换行标签 行标签: 不单独占一行 7.span 标签 对文字起强调的作用 8.a标签 (1)链接 外网 内网 (2)锚链接 链接到一个确定的位置 位置 锚点 去锚点 回到顶部 (3)空链接 9.图片标签 10.音频标签 <audio src="音频的地址" autoplay controls > 11.视频标签 <video src="视频的地址" autoplay controls> CSS层叠样式表: 1.行内样式表 在标签的开始元素里面添加 style="" 属性 在style="样式名:样式值;样式名:样式值;样式名:样式值;...." 字体样式: 字体粗细 font-weight:bold; 字体大小 font

CSS box-sizing

China☆狼群 提交于 2019-12-05 18:59:34
内容区域(content area )是包含元素真实内容的区域。 内边距区域(padding area) 延伸到包围padding的边框。如果content area设置了背景、颜色或者图片,这些样式将会延伸到padding上。 边框区域(border area )是包含边框的区域,扩展了内边距区域。 外边距区域( margin area) 用空白区域扩展边框区域,以分开相邻的元素。 1 /* 关键字 值 */ 2 box-sizing: content-box;/*默认值*/ 3 box-sizing: border-box; 4 5 /* 全局 值 */ 6 box-sizing: inherit; 7 box-sizing: initial; 8 box-sizing: unset; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 Chrome浏览器box-sizing默认是content

记录CSS

北慕城南 提交于 2019-12-05 07:41:41
ID选择器:#id { } ID是独一无二的,不可重复 类选择器: .class { } 标签选择器 h p input... 子选择器:.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素 后代选择器:.food li 通用选择器:*{ } 匹配html中所有标签元素 分组选择符:h1,span,li { } 伪类选择符:例: a:hover{color:red;}->鼠标滑过状态设置字体颜色变红; :link /*没有访问过的链接*/ :visited /*已经访问过的链接*/ input:focus{ } 选取获得焦点(光标)的表单 标签的权值为1,类选择符的权值为10,ID选择符的权值为100;行内样式style权值1000; 继承或者 * 权值0 改变样式权重:!important >> p{ color:red!important; } 权重叠加: 复合选择器会权重叠加;权重会叠加,不会有进位 (相同权重值时): 层叠就是在html文件中对于同一个元素可以有多个css样式存在, 当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定, 处于最后面的css样式会被应用。 继承性:子标签会继承父标签的某些样式,text- font- line- color 标题标签不会继承父元素文字大小; a标签不会继承父元素的文字颜色; 优先级:内联样式表

CSS 基础

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

CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头

纵饮孤独 提交于 2019-12-05 01:10:26
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算。在CSS收录中有一题是 用css创建一个三角形,并简述原理 。当然对于我来说画一个三角形是没难度的,简述原理?我突然一愣,虽然我知道通过边框可以做到,那为什么这么设置边框可以实现呢,抱着这个疑问于是有了这篇文章,那么本文开始。 贰 ❀ CSS画一个三角形 1.不同理解的边框 写CSS样式的同学与边框border打交道就像每天早上起来拥抱太阳,吃泡面加根肠一样平常,一直以来在我印象里,边框就像一条细线,如果用形状去形容应该是一个长方形。 <div class="border"></div> .border { width: 50px; height: 50px; border: 2px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60; } 比如这个例子中,在我看来就是四个宽2px高200px且颜色不同的长方形拼凑成了一个正方形。现在我们将border设置大一点,稍微调修改下: .border { width: 50px; height: 50px; border: 50px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60; } 当border足够宽

1114 CSS基础

▼魔方 西西 提交于 2019-12-04 23:00:47
目录 CSS入门 标签设置长宽 1.字体样式 1.1 字体类型 font-family 1.2 字体大小 font-size 1.3 字体颜色 color 1.4 字体粗细 font-weight 1.5 文本斜体 font-style 2.文本样式 2.1 文本对齐 text-align 2.2 文字装饰 text-decoration 2.3 首行缩进 text-indent 4.背景样式 4.1 背景颜色 background-color 4.2 背景图片 background-image 4.3 背景重复 background-repeat 4.4 背景位置 background-position 4.5 背景固定样式 background-attachment 5.边框属性 5.1 边框样式 border 5.2 边框局部样式 border局部 5.3 圆,圆角边框 border-radius 6.display 显示方式 定义 使用 同行显示 display: inline 异行显示 display: block; 兼并 display: inline-block; 标签特性 7.盒子模型 7.1 margin: 外边距 7.2 border: 边框 7.3 padding: 内边距 7.4 content: 内容区域 8. 浮动布局 float 8.1 三种取值 8

css浮动

邮差的信 提交于 2019-12-04 13:11:57
设置标签样式 给标签设置长宽 只有块级标签才可以设置长宽,行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小 字体粗细 normal:默认标准粗细 bold:粗体 bolder:更粗 lighter:更细 100~900:设置具体粗细,400等同于normal,700等同于bold inherit: 继承父元素字体的粗细值 字体颜色 COLOR 后面可以跟多种颜色数据 颜色的英文:red #4e4e4e 十六进制 rgb(1,1,1)模式,三基色数字 rgba(1,1,1,0.2) 和rbg一样,最后一个数字用来调节颜色的透明度 字体属性 文字对齐 text-align属性规定元素中的文本的水平对齐方式 left:左边对齐,默认 right:右对齐 center:居中对齐 justify:两端对齐 文字修饰 text-decoration 属性用来给文字添加特殊效果 none:默认,定义标准的文本 underline:定义文本下的一条线,相当于下划线 overline:定义文本上的一条线 line-through:定义穿过文本下的一条线,相当于删除线 inherit:继承父元素的text-decoration属性的值 注意:a标签默认自带下划线,如果要去掉就如以下代码 a{ text

css(2)

不问归期 提交于 2019-12-04 12:18:00
目录 一、css属性及用法 1.1css样式操作 1.2字体属性 1.2.1文字字体 1.2.2字体大小 1.2.3font-weight 1.2.4文本的颜色 1.3文字属性 1.3.1文字对齐 1.3.2文字装饰 1.3.3首行缩进 1.4背景属性 1.5边框 1.5.1边框的属性 1.5.2border-radius 1.6display属性 1.7css盒子模型 1.8float(浮动) 1.8.1浮动带来的影响 1.8.2清除浮动带来的影响 1.9overflow溢出属性 1.9.1 圆形头像示例 1.10定位(position) 1.10.1static 1.10.2relative(相对定位,了解) 1.10.3absolute(绝对定位,重要) 1.10.4固定定位(fixed) 1.10.5z-index 1.10.6opacity 一、css属性及用法 1.1css样式操作 块级标签的长度和宽度都是可以设置的,但是行级标签不可以直接设置长度和宽度。如: <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width:200px; height:300px; background-color: fuchsia; } span{ width:100px; height:150px;

(day44)css样式、css布局

浪尽此生 提交于 2019-12-04 12:10:31
目录 一、css样式 (一)文字样式 (1)文字字体font-family (2)字体大小font-size (3)字体粗细font-weight (4)字体颜色color (二)文本样式 (1)文字对齐text-align (2)文字装饰text-decoration (3)首行缩进text-indent (三)背景样式 (1)背景颜色color (2)背景图片image (3)背景重复repeat (4)背景位置position (四)显示样式 (1)边框border (2)宽高 (3)display属性 二、css布局 (一)盒子模型 (1)外边距magin (2)边框border (3)内边距padding (4)内容content (二)浮动float (1)三种取值 (2)clear (3)overflow溢出属性 (4)清楚浮动 (三)定位position (四)是否脱离文档流 (五)z-index (六)opacity 一、css样式 (一)文字样式 (1)文字字体font-family font-family可以放置多个字体,如果浏览器不支持第一个字体,则会尝试下一个 body { font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif; } (2)字体大小font-size

前端之css(二)

本小妞迷上赌 提交于 2019-12-04 12:06:31
目录 CSS属性相关 宽和高 字体属性 文本颜色 文本字体 字体大小 字体粗细 文字属性 文字对齐 文字装饰 首行缩进 背景属性 补充 边框 border-radius display属性 CSS盒子模型 margin外边距 padding内边距 float浮动 浮动造成的影响: clear overflow溢出 定位 相对定位 relative 绝对定位 absolute 固定定位 fixed 脱离文档流 x-index 透明度 CSS属性相关 宽和高 width属性可以为元素设置宽度 height属性可以为元素设置高度 只有块级标签才可以设置长度,行内标签设置了也没有任何作用,只取决于文本内容大小 字体属性 文本颜色 直接写 颜色英文 color: red #FF0000 直接利用pycharm提供的取色器 rgb(125,125,125) 获取三基色 rgba(128,128,128,0.3) 最后一个数字只是用来调节颜色的透明度 文本字体 用font-family 控制字体种类 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 用font-size p { font-size: 36px; } 字体粗细 值 描述 normal 默认值,标准粗细 bold 粗体 bolder