CSS
关注
分享
扫一扫
文章平均质量分 71
齐天大荒
欣赏一个人，始于颜值，敬于才华，合于性格，久于善良，终于人品。人生就是这样，和漂亮的人在一起，会越来越美；和阳光的人在一起，心里就不会晦暗；和快乐的人在一起，嘴角就常带微笑；和聪明的人在一起，做事就变机敏；和大方的人在一起，处事就不小气；和睿智的人在一起，遇事就不迷茫
展开
-
CSS浮动float
CSS浮动float什么是 CSS Float（浮动）？CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素怎样浮动元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：<!DOCTYPE ht转载 2021-12-26 14:15:45 · 71 阅读 · 0 评论 -
CSS布局overflow
CSS 布局 - OverflowCSS overflow 属性用于控制内容溢出元素框时显示的方式。<!DOCTYPE html><html><head><meta charset="utf-8"><title>demo</title><style>#overflowTest { background: #4CAF50; color: white; padding: 15px;转载 2021-12-25 13:10:05 · 111 阅读 · 0 评论 -
CSS定位position
CSS定位（position）所有的CSS定位属性“CSS” 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。属性说明值bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。auto length % inheritclip剪辑一个绝对定位的元素shape auto inheritcursor显示光标移动到指定的类型url auto crosshair default pointer move e-resize ne-res原创 2021-12-24 18:16:29 · 69 阅读 · 0 评论 -
CSS显示display
CSS显示displaydisplay属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏元素 - display:none或visibility:hidden隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。<!DOCTY转载 2021-12-24 13:05:48 · 136 阅读 · 1 评论 -
CSS填充padding
CSS填充（padding）CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。padding（填充）当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。填充- 单边内边距属性在CSS中，它可以指定不同的侧面不同的填充：<!DOCTYPE html><html><head><meta charset="ut原创 2021-12-23 09:45:00 · 340 阅读 · 0 评论 -
CSS轮廓属性outline
CSS轮廓属性轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。属性说明值outline]在一个声明中设置所有的轮廓属性outline-color outline-style outline-width inheritoutline-color设置轮廓的颜色color-name hex-number rgb-number invert inheritoutlin转载 2021-12-22 23:00:00 · 396 阅读 · 0 评论 -
CSS外边距margin
CSS外边距marginCSS margin(外边距)属性定义元素周围的空间。marginmargin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。所有的CSS边距属性属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设转载 2021-12-22 09:00:00 · 207 阅读 · 0 评论 -
CSS边框
CSS边框CSS 边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。属性描述border简写属性，用于把针对四个边的属性设置在一个声明。border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。border-bottom简写属性原创 2021-12-21 14:59:56 · 112 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Paddin原创 2021-12-21 14:12:46 · 64 阅读 · 0 评论 -
CSS渐变样式
CSS渐变样式CSS3 渐变（Gradients）CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Ra原创 2021-12-21 08:30:00 · 247 阅读 · 0 评论 -
CSS背景样式
CSS背景样式CSS 背景属性Property描述background简写属性，作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。背景颜色ba转载 2021-12-20 23:00:00 · 165 阅读 · 0 评论 -
CSS列表样式
CSS列表样式所有的CSS列表属性属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中list-style-image将图像设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。CSS 列表CSS 列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在 HTML中，有两种类型的列原创 2021-12-20 13:45:00 · 625 阅读 · 0 评论 -
CSS链接样式
CSS链接样式链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻<!DOCTYPE html><html><head><meta charset="utf-8"> <title&转载 2021-12-20 08:45:00 · 638 阅读 · 0 评论 -
CSS文本样式
CSS文本样式所有CSS文本属性。属性描述color设置文本颜色direction设置文本方向。letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-transform控制元素中的字母unicode-bidi设置或返回文本是否被重写原创 2021-12-19 19:53:56 · 74 阅读 · 0 评论 -
CSS字体样式
CSS字体样式所有CSS字体属性Property描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variantvariant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。font-stretch定义如何拉伸字体。默认是 “normal”。...原创 2021-12-19 19:52:18 · 55 阅读 · 0 评论 -
CSS属性选择器
CSS属性选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是class和id。1.属性选择器下面的例子是把包含标题（title）的所有元素变为蓝色：<!DOCTYPE html><html><head><style>[title]{color:blue;}</style></head><body><h2>Will apply to:</h2>原创 2021-12-18 22:00:00 · 186 阅读 · 0 评论 -
CSS结构伪类选择器
CSS结构伪类选择器结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类class的依赖，有助于保持代码干净整洁。表 — 结构伪类选择器选择器功能描述版本E:last-child选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1)E:nth-child(n)选择父元素的第n个子元素，n从1开始计算E:nth-last-child(n)选择父元素的倒数第n个子元素，n从1开始计算E:fi原创 2021-12-18 07:00:00 · 924 阅读 · 0 评论 -
CSS层次选择器
CSS层次选择器测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层次选择器</title> <style><!--1.后代选择器-->body p{background: red;}<!--2.子代选择器-->body>p{background:pink;原创 2021-12-17 17:16:19 · 557 阅读 · 0 评论 -
CSS的三种基本选择器
Css的三种基本选择器1.标签选择器格式 ：标签{}特点作用域为全局同类标签无法针对同类标签中个别标签区别处理实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三种基本选择器</title> <!--标签选择器--> <style> h1{原创 2021-12-17 16:15:11 · 2276 阅读 · 0 评论 -
CSS的导入方式
CSS的导入方式四种CSS样式的引入方式准备1.首先准备一个html文件：test.html，不建议使用记事本创建文件，建议使用Notepad++来创建并编辑文件，注意编码格式为：以UTF-8无BOM格式编码，否则会出现中文乱码，内容如下：<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=原创 2021-12-16 17:33:21 · 1706 阅读 · 0 评论 -
CSS简单介绍
CSS简单介绍什么是 CSS?CSS（Cascading Style Sheets）：层叠样式表层叠：一层一层的样式表：有很多的属性和属性值css将网页内容和显示样式进行分离，提高了显示功能CSS通常被称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不原创 2021-12-16 14:16:11 · 763 阅读 · 0 评论