CSS
hahahafree
这个作者很懒,什么都没留下…
展开
-
CSS:链接外部css样式时候link标签使用方法
1、link实例<link rel="stylesheet" href="img/divcss5.css" type="text/css" /> 链接外部css样式时候link标签的内容结构解释——css引用href值为外部资源地址,这里是css的地址rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheettype规定被链接文档的 MIME 类...原创 2019-06-12 15:04:48 · 20696 阅读 · 0 评论 -
CSS :Position(定位)
1、参数position 属性指定了元素的定位类型。position 属性的五个值:staticrelativefixedabsolutesticky元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。2、static 定位HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静...原创 2019-06-10 15:35:43 · 227 阅读 · 0 评论 -
CSS : Overflow
1、简介CSS overflow 属性用于控制内容溢出元素框时显示的方式。2、属性值 ……………………………………描述visible ………………………………默认值。内容不会被修剪,会呈现在元素框之外。hidden ………………………………内容会被修剪,并且其余内容是不可见的。scroll ………………………………内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto………...原创 2019-06-10 15:38:51 · 156 阅读 · 0 评论 -
CSS :Float(浮动)
1、简介CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。不能上下移动Float(浮动),往往是用于图像,但它在布局时一样非常有用。...原创 2019-06-10 15:41:02 · 130 阅读 · 0 评论 -
CSS : 水平 & 垂直对齐
1、元素居中对齐要水平居中对齐一个元素,可以使用 margin: auto;没有设置 width 属性(或者设置 100%),居中对齐将不起作用2、文本居中对齐为了文本在元素内居中对齐,使用 text-align: center;3、图片居中对齐要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中4、左右对齐 - 使用定位方式使用 position: a...原创 2019-06-10 15:51:03 · 472 阅读 · 0 评论 -
CSS: 组合选择符
1、CSS3 四种组合方式:后代选择器(以空格分隔)子元素选择器(以大于号分隔)相邻兄弟选择器(以加号分隔)普通兄弟选择器(以破折号分隔)2、后代选择器后代选择器用于选取某元素的后代元素。3、子元素选择器与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。4、相邻兄弟选择器相邻兄弟选择器(Adjacent sibling select...原创 2019-06-10 17:41:55 · 108 阅读 · 0 评论 -
CSS :伪元素
1、简介CSS伪元素是用来添加一些选择器的特殊效果。2、first-line 伪元素“first-line” 伪元素用于向文本的首行设置特殊样式。3、first-letter 伪元素“first-letter” 伪元素用于向文本的首字母设置特殊样式4、CSS - :before 伪元素“before” 伪元素可以在元素的内容前面插入新内容。5、CSS - :after 伪元素“:...原创 2019-06-10 17:42:16 · 236 阅读 · 0 评论 -
CSS: 提示工具(Tooltip)
1、定位提示工具以下实例中,提示工具显示在指定元素的右侧(left:105%) 。注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距(padding)是 5px。如果你修改 padding 的值,top 值也要对应修改,这样才可以确保它是居中对齐的。.tooltip .tooltiptext { top: -5px; left:...原创 2019-06-10 17:42:47 · 441 阅读 · 0 评论 -
CSS :伪类(Pseudo-classes)
1、简介CSS伪类是用来添加一些选择器的特殊效果。2、实例a:link {color:#FF0000;}/* 未访问的链接 /a:visited {color:#00FF00;}/ 已访问的链接 /a:hover {color:#FF00FF;}/ 鼠标划过链接 /a:active {color:#0000FF;}/ 已选中的链接 */注意: 在CSS定义中,a:hover 必须被置...原创 2019-06-10 17:42:09 · 282 阅读 · 0 评论 -
CSS :导航栏
1、导航栏=链接列表作为标准的HTML基础一个导航栏是必须的导航条基本上是一个链接列表,所以使用 和 元素非常有意义<ul><li><a href="https://www.runoob.com/css/css-navbar.html">主页</a></li><li><a href="https://www....原创 2019-06-10 17:42:30 · 196 阅读 · 0 评论 -
CSS: 下拉菜单
1、简介使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。2、我们可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 a <button> 元素。使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。CS...原创 2019-06-10 17:42:42 · 397 阅读 · 0 评论 -
CSS :计数器
1、简介CSS 计数器通过一个变量来设置,根据规则递增变量。使用计数器自动编号CSS 计数器根据规则来递增变量。CSS 计数器使用到以下几个属性:counter-reset - 创建或者重置计数器counter-increment - 递增变量content - 插入生成的内容counter() 或 counters() 函数 - 将计数器的值添加到元素要使用 CSS 计数器,得...原创 2019-06-10 17:45:32 · 150 阅读 · 0 评论 -
CSS: Display(显示) 与 Visibility(可见性)
1、简介display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。原创 2019-06-10 15:20:17 · 225 阅读 · 0 评论 -
CSS :尺寸 (Dimension)属性
1、参数属性 …………………………………………描述height …………………………………………设置元素的高度。line-height………………………………………… 设置行高。max-height………………………………………… 设置元素的最大高度。max-width………………………………………… 设置元素的最大宽度。min-height …………………………………………设置元素的...原创 2019-06-10 11:46:52 · 649 阅读 · 0 评论 -
css:text-align、注释、background-color、margin-left
1、text-align: 水平对齐h1 {text-align: center}h2 {text-align: left}h3 {text-align: right}2、注释/*这是个注释*/3、background-color:背景颜色body { background-color:yellow; }h1 { background-color:#00ff...原创 2019-06-12 17:48:34 · 408 阅读 · 0 评论 -
CSS: 链接
1、链接样式链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。这四个链接状态是:a:link - 正常,未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻2、文本修饰text-decoration 属性主要用于删除链接中的下划线3、背景颜色背景颜色属性指定链接背景色...原创 2019-06-06 17:25:17 · 279 阅读 · 0 评论 -
CSS : 列表
1、CSS列表属性作用如下:设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像2、列表类型在HTML中,有两种无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)有序列表 - 列表项的标记有数字或字母3、不同的列表项标记list-style-type:指定列表项标记的类型4、作为列表项标记的图像list-style-image:指定列表项标记...原创 2019-06-06 17:33:21 · 133 阅读 · 0 评论 -
CSS: 表格
1、表格边框指定CSS表格边框,使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框:表格有双边框table, th, td{ border: 1px solid black;}2、折叠边框border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:table{ border-collapse:collapse;}...原创 2019-06-06 17:43:47 · 216 阅读 · 0 评论 -
CSS:盒子模型_Box Model
1、模型包括边距,边框,填充,实际内容。Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。2、元素的宽度和高度Remark重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域...原创 2019-06-06 17:57:24 · 198 阅读 · 1 评论 -
CSS:边框
1、CSS 边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。2、边框样式边框样式属性指定要显示什么样的边界。Remark border-style属性用来定义边框的样式border-style 值:none: 默认无边框3、边框宽度通过border-width属性为边框指定宽度。为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, ...原创 2019-06-06 18:06:48 · 170 阅读 · 0 评论 -
CSS 轮廓(outline)
1、属性轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。2、位置3、outline在一个声明中设置所有的轮廓属性 outline-coloroutline-styleoutline-widthinherit4、outline-color设置轮廓的颜色 color-na...原创 2019-06-06 19:59:21 · 260 阅读 · 0 评论 -
CSS :margin(外边距)
1、CSS margin(外边距)属性定义元素周围的空间。margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。2、值auto设置浏览器边距。这样做的结果会依赖于浏览器length定义一个固定的margin(使用像素,pt,em等)%定义一个使用百分比的边距Mar...原创 2019-06-06 20:10:39 · 1230 阅读 · 2 评论 -
CSS: padding填充
1 、CSS padding是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。2、属性padding ………………………………简写属性设置在一个声明中的所有填充属性padding-top…………………………上padding-bottom……………………下padding-right…………………………右padding-left…………………………左3、实例1...原创 2019-06-10 10:15:46 · 398 阅读 · 0 评论 -
CSS :分组 选择器
1、分组选择器在样式表中有很多具有相同样式的元素。h1{ color:green;}h2{ color:green;}p{ color:green;}在下面的例子中,我们对以上代码使用分组选择器:h1,h2,p{ color:green;}...原创 2019-06-10 10:32:35 · 205 阅读 · 0 评论 -
CSS:嵌套选择器
1、属性p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class=“marked” 的元素指定一个样式。.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。2、实例p{color:blue;text-align:cen...原创 2019-06-10 10:50:04 · 1188 阅读 · 0 评论 -
CSS:Bootstrap4 安装使用
1、下载文件安装到服务器Bootstrap v4下载(压缩包包括bootstrap.min.css和bootstrap.min.js)https://getbootstrap.com/docs/4.3/getting-started/download/jquery.min.js下载https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js...原创 2019-06-16 20:01:21 · 940 阅读 · 0 评论