CSS
一只爱好编程的程序猿
莫问收获,但问耕耘
展开
-
CSS组合选择符
CSS组合选择符css组合选择符包括各种简单选择符的组合关系。在css中包含了四种组合方式:后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟元素选择器(以加号分隔) 普通兄弟选择器(以破折号分隔)后代选择器后代选择器用于选取某元素的后代元素。以下实例选取所有<p>元素插入到<div>元素中:<!DOCTYPE html><html><head><meta charset="utf-8"&原创 2020-09-16 16:31:13 · 151 阅读 · 0 评论 -
CSS布局-水平和垂直对齐
CSS布局-水平和垂直对齐元素居中对齐要水平居中对齐一个元素(如<div>),可以使用margin:auto;。设置元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度,并将两边的空外边距平均分配:<!DOCTYPE html><html><head><meta charset="utf-8"> <style> .center { margin: auto; width: 60%; borde原创 2020-09-15 10:43:29 · 166 阅读 · 0 评论 -
CSS Float(浮动)
CSSFloat(浮动)什么是CSSFloat(浮动)?CSS的Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样也非常有用。元素怎么样浮动呢?元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动,直到它的外边边缘碰到包含框或另一个浮动框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受影响。如果图像是右浮动,下面的文本流将环绕在它左边:<..原创 2020-09-10 21:57:21 · 148 阅读 · 0 评论 -
CSS布局-Overflow
CSSOverflowCSSoverflow属性用于控制内容溢出元素框时显示的方式。<!DOCTYPE html><html><head><meta charset="utf-8"><style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: ..原创 2020-09-04 13:58:33 · 150 阅读 · 0 评论 -
CSS Position(定位)
CSSPosition(定位)position属性指定了元素的定位类型。position属性的五个值:static relative fixed absolute sticky元素可以使用的顶部,底部,左侧和右侧属性定位。static定位HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,right影响。<!DOCTYPE html><html><head><m.原创 2020-09-02 14:52:45 · 195 阅读 · 0 评论 -
CSS Display(显示)与 Visibility(可见性)
CSS Display(显示)与 Visibility(可见性)display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。隐藏元素隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与 未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。<!DOCTYPE html><html>.原创 2020-09-02 09:21:06 · 120 阅读 · 0 评论 -
CSS尺寸( Dimension)
所有CSS尺寸(Dimension)属性属性 描述 height 设置元素的高度 line-height 设置行高 max-height 设置元素的最大高度 max-width 设置元素的最大宽度 min-height 设置元素的最小高度 min-width 设置元素的最小宽度 width 设置元素的宽度 ...原创 2020-09-02 09:09:23 · 234 阅读 · 0 评论 -
CSS padding(填充)
CSSpadding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。padding(填充)当元素的padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。单独使用padding属性可以改变上下左右的填充。可能的值值 说明 length 定义一个固定的填充(像素,pt,em,等) % 使用百分比比值定义一个填充 填充-单边内边距属性在CSS中,它可以指定不同的侧面不同的填充:...原创 2020-09-01 14:27:43 · 10475 阅读 · 0 评论 -
CSS margin(外边距)
marginmargin清除周围(外边框)元素区域。margin没有背景颜色,是完全透明的。margin可以单独改变元素的上,下,左,右边距,也可以一次改版所有属性。可能的值值 说明 auto 设置浏览器边距。 length 定义一个固定的margin % 定义一个使用百分比的边距 Margin-单边外边距属性在CSS中,他可以指定不同的侧面不同的边距:<!DOCTYPE html><ht...原创 2020-09-01 10:41:12 · 447 阅读 · 0 评论 -
CSS边框
边框样式border-style属性来定义边框的样式<!DOCTYPE html><html><head><meta charset="utf-8"> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.doub原创 2020-09-01 09:55:48 · 112 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型(BoxModel)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用的。CSS盒模型本质是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容。下面的图形展示一个盒子模型(BoxModel)说明:Margin(外边距)-清除边框外的区域,外边距是透明的。 Border( 边框)-围绕在内边距和内容外的边框 Padding(内边距)-清除内容周围的区域,内边距时透明的。 Content(内容)-盒子的..原创 2020-08-31 14:41:49 · 109 阅读 · 0 评论 -
CSS表格
表格边框指定CSS表格边框,使用border属性。下面的例子指定了一个表格的TH和TD元素的黑色边框:<!DOCTYPE html><html><head><meta charset="utf-8"> <style> table,th,td { border:1px solid black; }</style></head><body> <table> &原创 2020-08-31 09:50:48 · 250 阅读 · 0 评论 -
CSS列表
CSS列表CSS列表属性作用如下:设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像列表在HTML中,有两种类型的列表:无序列表-列表项标记用特殊图形 有序列表-列表项的标记有数字和字母不同的列表项标记list-style-type属性指定列表项标记的类型是:<!DOCTYPE html><html><head><meta charset="utf-8"> <style>.原创 2020-08-31 09:16:22 · 543 阅读 · 0 评论 -
CSS字体
CSS字体CSS字体属性定义字体,加粗,大小,文字样式。CSS字型在CSS中,有两种类型的字体系列名称:通用字体系列-拥有相似外观的字体系统组合(如“Serif”或“ Monospace”) 特定字体系列-一个特定的字体系列(如“Times”或“ Courier”) Genericfamily 字体系列 说明 Serif TimeNewRoman Georgia Serif字体中字符在行的末端拥有额外的装饰 Sans-serif ...原创 2020-08-28 10:40:56 · 232 阅读 · 0 评论 -
CSS Text(文本)
CSS文本格式文本颜色颜色属性被用来设置文字颜色。颜色基本三种格式来设置的:十六进制-如:#FF0000 一个RGB值-如:RGB(255,0,0) 颜色的名称-如:red可以参考一下下面的实例:<!DOCTYPE html><html><head><meta charset="utf-8"> <style> body {color:red;} h1 {color:#00ff00;} p原创 2020-08-27 10:48:47 · 587 阅读 · 0 评论 -
CSS背景
CSS背景css背景属性用于定义HTML元素的背景。css属性定义背景效果:background-color background-image background-repeat background-attachment background-position背景颜色background-color属性用于定义背景颜色。页面的背景颜色使用在body的选择器中<!DOCTYPE html><html><head><meta原创 2020-08-26 16:42:28 · 138 阅读 · 0 评论 -
CSS样式
CSS样式创建当读取到样式表时,浏览器会根据它来格式化HTML文档。如何插入样式表插入样式表方式有三种:外部样式表( Externalstylesheet) 内部样式表( Internalstylesheet) 内联样式(Inlinestyle)外部样式表当多个页面需要用到相同的样式的时候,我们可以这个样式给抽取出来,这样就形成外部样式表。当每个使用外部样式表的时候需要使用<link>标签链接到外部样式表。<link>标签在文档的头部。<...原创 2020-08-26 15:01:18 · 142 阅读 · 0 评论 -
CSS Id选择器和Class选择器
CSSId选择器和Class选择器Id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。Html元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。以下样式规则应用于元素属性id="para1"<!DOCTYPE html><html><head><meta charset="utf-8"> <style>#para1{ text-align:center; color:red;.原创 2020-08-26 14:23:45 · 410 阅读 · 0 评论 -
CSS语法
CSS语法css规则由两个主要部分组成:选择器,以及一条或多条声明:选择器通常是您需要改变样式的HTML元素。属性(property)是您希望设置的样式属性(styleattribute)。每个属性有一个值。属性和值被冒号分开。CSS实例CSS声明总是以分号(;)结束,声明总以大括号({})括起来:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>学.原创 2020-08-26 14:03:15 · 103 阅读 · 0 评论 -
CSS
一.CSS的基本使用1.认识CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。2.使用CSS的好处css样式:就是用来美化网页。3.CSS的基本使用CSS如何使用?C...原创 2019-10-11 10:00:04 · 198 阅读 · 0 评论