css边框

css进阶

由 匿名 (未验证) 提交于 2019-12-02 20:32:16
本文转载自https://blog.csdn.net/xiaogeldx/article/details/85169861 练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> #div1{ width: 350px; height: 450px; border: 1px solid red; margin: into; background: dimgray; } input{ width: 330px; height: 30px; border-radius: 10px; margin-left: 10px; margin-top: 15px; } .a{ width: 195px; height:30px; } .b{ width: 120px; height: 30px; } </style> </head> <body> <div id="div1"> <span style="margin-left: 5px;border-bottom: 5px solid red">请注册</span><a href="#" style="float: right">立即登陆></a> <input type="text" placeholder=

浏览器端-W3School-HTML：HTML DOM Style 对象

由 别来无恙 提交于 2019-12-02 18:58:39
ylbtech-浏览器端-W3School-HTML：HTML DOM Style 对象 1. 返回顶部 1、 HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。 使用 Style 对象属性的语法： document.getElementById("id").style.property="值" Style 对象的属性： 背景 边框和边距 布局 列表 杂项 定位 打印 滚动条 表格 文本 规范 Background 属性 属性 描述 background 在一行中设置所有的背景属性 backgroundAttachment 设置背景图像 是否固定或随页面滚动 backgroundColor 设置元素的背景颜色 backgroundImage 设置元素的背景图像 backgroundPosition 设置背景图像的起始位置 backgroundPositionX 设置backgroundPosition属性的X坐标 backgroundPositionY 设置backgroundPosition属性的Y坐标 backgroundRepeat 设置 是否及如何重复背景图像 Border 和 Margin 属性 属性 描述 border 在一行设置四个边框的所有属性 borderBottom

常用css列表

由 匿名 (未验证) 提交于 2019-12-02 16:56:17
color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font-family:'微软雅黑'; font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜 font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑'; text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 text-overflow

CSS3盒模型

由 匿名 (未验证) 提交于 2019-12-02 16:28:20
CSS3盒模型 CSS有一种基础设计模式叫盒模型， 定义了Web页面中的元素是如何看做盒子来解析的。 每一个盒子有不同的展示界面， 在 CSS 中 主要有以下几种盒模型： inline、inline- block、block、table、absolute，position、float。 浏览器把每个元素看 一个盒模型， 每一个盒模型是由以下几个属性组合所决定的： display、position、float、width、height、margin、padding和border等， 不同类型的盒模型会产生不同的布局。 什么是盒模型？ CSS中每一个元素都是一个盒模型，包括HTML和body标签元素。在平时设计中，大家对content、padding、margin、background和border来说一定不会陌生了， 因为盒模型都具备这些属性。 其中width、height、border、background、padding和margin之间的层次关系和相互影响，可以 看出 padding、content、 background-image、background-color，它们四者构成了Z轴（ 垂直屏幕的坐标） 多重层叠关系。 但是border与margin、padding三者之间应该是平面上 的并级关系，并不能构成Z轴的层叠关系。 在CSS中盒模型被分为两种：第 一种 是 W3C

用纯css画三角形

由 烈酒焚心 提交于 2019-12-02 10:51:22
用CSS画三角形 ​ 我们都知道在html中，想要画出圆形，椭圆，矩形，都很简单，但是常见的三角形，梯形如何用纯css画出却较麻烦，许多时候都是直接用三角形的图片。本文将介绍如何用纯css画出三角形和梯形 一、原理 ​ 授人以鱼不如授人以渔。各种方法只有掌握了原理才能真正理解，自己才能够灵活的运用。 其实画三角形和梯形很简单。主要涉及到的属性就是 border边框属性 先给大家看一下在html中边框的表现形式 <style> div{ height: 200px; width: 200px; border-top: 30px solid red; border-right: 30px solid blue; border-bottom: 30px solid green; border-left: 30px solid purple; } </style> <body> <div></div> </body> 由上图知边框原来是四个梯形组成的。理解这一点下面画三角形和梯形就简单了 二、画梯形 知道原理那么画梯形就简单了 直接将其余三个边框 颜色设置为透明 就可以了（为了方便使用，可直接将div的宽或者高设置为0） <style> div{ height: 200px; width: 200px; border-bottom: 30px solid green; border

前端之css

由 老子叫甜甜 提交于 2019-12-02 04:54:13
前端之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> 　　<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

由 假如想象 提交于 2019-12-01 16:04:27
目录 前端css 1 css介绍 2 css语法 2.1css实例 2.2css注释 3 css的几种引入方式 3.1行内样式(内联样式表) 3.2内部样式 3.3外部样式 4 css选择器 4.1基本选择器 4.1.1元素选择器 4.1.2 ID选择器 4.1.3类选择器 4.1.4通用选择器 4.2组合选择器 4.2.1后代选择器 4.2.2儿子选择器 4.2.3 毗邻选择器 4.2.4弟弟选择器 4.3 属性选择器 4.4分组和嵌套 4.4.1分组 4.4.2嵌套 4.5伪类选择器 4.6伪元素选择器 4.7选择器的优先级 5 css属性相关 5.1宽和高 5.2字体属性 文字字体 字体大小 字体的粗细（字重） 文本颜色 5.3文字属性 文字对齐 文字装饰 首行缩进 文字之间的距离 5.4 背景属性 5.5边框 5.6border-radius 5.7display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10padding内填充 5.11 float 三种取值 5.12clear 清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定） 是否脱离文档流 5.15 z-index 5.16 opacity 综合 前端css 1 css介绍

前端之CSS基础

由 不问归期 提交于 2019-12-01 15:03:53
前端之CSS 1、 CSS CSS定义如何显示HTML元素。 当浏览器读到一个样式表，他就会按照这个样式表来对文档进行格式化（渲染）。 3、CSS语法 1）CSS实例 每个CSS由两部分组成： 选择器和声明。声明包括属性和属性值，每个声明用分号结束。 ）CSS注释 /*注释*/ 3、CSS的几种引入方式 1）行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用 <p style="color:red">Hello word.</q> 2)内部样式 嵌入式试讲CSS样式集中卸载网页的 <head></head> 表签对的 <style></style> 表钱对中。 格式： <head>　　<meta charset="UTF-8">　　<title>Title</title>　　 <style>　　　　 p{ background-color: 2b99ff; }　　 </style></head> 3) 外部样式 外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可。推荐使用方法。 <link href="mystyle.css" rel="stylesheet" type="text/css/">​ 4、CSS选择器 1）基本选择器 元素选择器 p {color: "red";} ID选择器 #i1 { background-color: red

前端之CSS

由 北慕城南 提交于 2019-12-01 15:03:14
前端基础之CSS 1 | 0 css介绍 css(Cascading Stylr Sheet，层叠样式表) 定义如何显示HTML元素 当浏览器督导一个样式表，他就会按照这个样式表来对文档进行格式化(渲染) 2 | 0 css语法 2 | 1 css实例 每个CSS样式由组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2 .2 CSS注释 /*这是注释*/ 注释是代码之母 3 CSS的几种引入方式 3.1 行内样式 行内式在标注的style属性中设定CSS样式。不推荐大规模使用。 <p style="color:red"> Hello World!</p> 3.2 内部样式 嵌入式是将CSS样式集中写在网页的 > 标签对的 >标签对中。如下 <head> <meta charset = "UTF-8"> <title> Title </title> <style> p{backgroud-color:red;} </style> </head> 3.3 外部样式 外部样式就是将CSS写在一个但单独的文件中，然后在页面进行引入即可。推荐使用此方式 <link href="mystyle.css" rel="stylesheet" type="text/css/"/> 4 CSS选择器 4.1 基本选择器 元素选择器 p{color:"red";} ID选择器

8 盒子模型

由 点点圈 提交于 2019-12-01 13:34:21
盒子模型 首先，我们来看一张图，来体会下什么是盒子模型。 所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此， 每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 盒子边框（border） 语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 盒子边框写法总结 上边框 border-top-style:样式; border-top-width:宽度; border-top-color:颜色; border-top:宽度 样式 颜色; 下边框 border-bottom-style:样式; border- bottom-width:宽度; border- bottom-color:颜色; border-bottom:宽度 样式 颜色; 左边框 border-left-style:样式; border-left-width:宽度; border-left-color:颜色; border-left:宽度 样式
订阅 css边框