CSS
关注
分享
扫一扫
文章平均质量分 72
star walkin
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS Position(定位)
position 属性指定了元素的定位类型。position 属性的五个值：staticrelativefixedabsolutesticky元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。<title>菜鸟教程(runo转载 2021-04-21 23:39:21 · 280 阅读 · 0 评论 -
CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。下拉菜单实例基本下拉菜单当鼠标移动到指定元素上时，会出现下拉菜单。<title>下拉菜单实例|菜鸟教程(runoob.com)</title><meta charset="utf-8"><style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none转载 2021-04-21 23:38:48 · 289 阅读 · 0 评论 -
CSS 导航栏
导航栏熟练使用导航栏，对于任何网站都非常重要。使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。导航栏=链接列表作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：<title>菜鸟教程(runoob.com)</title> </head><body><ul><li.转载 2021-04-21 23:38:25 · 404 阅读 · 0 评论 -
CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。语法伪元素的语法：selector:pseudo-element {property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}:first-line 伪元素“first-line” 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：<title>菜转载 2021-04-21 23:37:27 · 154 阅读 · 0 评论 -
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。语法伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}anchor伪类在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示<title>菜鸟教程(runoob.com)</title> <style>a:link {color:#000000;转载 2021-04-19 20:05:16 · 269 阅读 · 0 评论 -
CSS 组合选择符
CSS 组合选择符组合选择符说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:后代选择器(以空格 分隔)子元素选择器(以大于 > 号分隔）相邻兄弟选择器（以加号 + 分隔）普通兄弟选择器（以波浪号 ～ 分隔）后代选择器后代选择器用于选取某元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:<title>菜鸟教程(runoob.com)</title&g转载 2021-04-19 19:34:19 · 96 阅读 · 0 评论 -
CSS Float(浮动)
什么是 CSS Float（浮动）？CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素怎样浮动元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：<title>菜鸟教程(runoob.转载 2021-04-19 17:40:07 · 163 阅读 · 0 评论 -
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。CSS OverflowCSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值：注意:overflow 属性只工作于指定高度的块元素上。注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。overflow: visible默认情况下，overflow 的值为 vis转载 2021-04-19 16:54:48 · 467 阅读 · 0 评论 -
CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏元素 - display:none或visibility:hidden隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。<title>菜鸟教程(r转载 2021-04-19 16:16:42 · 238 阅读 · 0 评论 -
CSS 分组 和 嵌套 选择器
分组选择器在样式表中有很多具有相同样式的元素。h1{ color:green;}h2{ color:green;}p{ color:green;}为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。在下面的例子中，我们对以上代码使用分组选择器：<title>菜鸟教程(runoob.com)</title> <style>h1,h2,p{ color:green;}</style>转载 2021-04-19 15:40:35 · 260 阅读 · 0 评论 -
CSS padding（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。padding（填充）当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。可能的值填充- 单边内边距属性在CSS中，它可以指定不同的侧面不同的填充：<title>菜鸟教程(runoob.com)</title><style>p{ background-colo转载 2021-04-19 15:32:09 · 310 阅读 · 0 评论 -
CSS margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。marginmargin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。可能的值Margin可以使用负值，重叠的内容。Margin - 单边外边距属性在CSS中，它可以指定不同的侧面不同的边距：<title>菜鸟教程(runoob.com)</title> <style>p{ backgr转载 2021-04-19 15:23:45 · 628 阅读 · 0 评论 -
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。CSS 轮廓（outline）轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。所有CSS 轮廓（outline）属性“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。轮廓（outline）实例在元素周围画线本例转载 2021-04-19 15:12:25 · 525 阅读 · 0 评论 -
CSS 边框
CSS 边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式border-style 值:<title>菜鸟教程(runoob.com)</title> <style>p.none {border-style:none;}p.dotted {border-style:dotted;}p.dashed {border-style:dashed;}p.so转载 2021-04-19 14:58:16 · 119 阅读 · 0 评论 -
CSS 盒子模型
CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) -转载 2021-04-18 23:46:56 · 414 阅读 · 0 评论 -
CSS 表格
使用 CSS 可以使 HTML 表格更美观。表格边框指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：<title>菜鸟教程(runoob.com)</title><style>table,th,td{ border:1px solid black;}</style></head><body><table><tr><th>F转载 2021-04-18 23:38:35 · 102 阅读 · 0 评论 -
CSS 列表
CSS 列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在 HTML中，有两种类型的列表：无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 ol - 列表项的标记有数字或字母使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。无序列表如下所示:CoffeeTeaCoca Cola有序列表如下所示:CoffeeTeaCoca Cola不同的列表项标记list-style-ty转载 2021-04-18 23:22:09 · 221 阅读 · 0 评论 -
CSS 链接
不同的链接可以有不同的样式。链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻<title>菜鸟教程(runoob.com)</title> <style>a:link {color:#000000;转载 2021-04-18 23:02:31 · 128 阅读 · 0 评论 -
CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。serif和sans-serif字体之间的区别在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读CSS字型在CSS中，有两种类型的字体系列名称：通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）字体系列font-family 属性设置文本的字体系列。font-family 属性应该设置几个字转载 2021-04-18 23:02:12 · 132 阅读 · 0 评论 -
CSS 文本格式
文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃FF0000一个RGB值 - 如: RGB(255,0,0)颜色的名称 - 如: red一个网页的背景颜色是指在主体内的选择：<title>菜鸟教程(runoob.com)</title> <style>body {color:red;}h1 {color:#00ff00;}p.ex {color:rgb(0,0,255);}</style>转载 2021-04-18 23:01:44 · 126 阅读 · 0 评论 -
CSS 背景
CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position背景颜色background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中:<title>菜鸟教程(runoob.com)</title> <style>body{转载 2021-04-18 23:01:20 · 127 阅读 · 0 评论 -
CSS 创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表插入样式表的方法有三种:外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：<head><link rel="s转载 2021-04-18 23:00:59 · 123 阅读 · 0 评论 -
CSS简介
通过使用 CSS 我们可以大大提升网页开发的工作效率！CSS的作用HTML 标签原本被设计为用于定义文档内容，如下实例：<h1>这是一个标题</h1><p>这是一个段落。</p>样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声转载 2021-04-18 23:00:24 · 1039 阅读 · 0 评论