CSS

文章目录

CSS
- 简介
- - id选择器
  - class选择器
- CSS创建
- - 外部样式表
  - 内部样式表
  - 内联样式
  - 多重样式优先级
- 背景
- 文本
- 字体
- 链接
- 列表
- 表格
- 元素显示模式
- - 块元素
  - 行内元素
  - 行内块元素
  - 显示模式的转换
- 盒子模型
- 边框
- 轮廓
- 外边距
- 填充
- 分组与嵌套
- 显示
- 浮动
- 定位
- Overflow
- 对齐
- 组合选择符
- 伪类
- 伪元素
- 导航栏
- 下拉菜单
- 提示框
- 图片
- 属性选择器
- 表单
- 媒体类型
- 网页布局

简介

p
{color:red;text-align:center;
}

不要在属性值与单位之间留有空格

CSS注释以 /* 开始, 以 / 结束

id选择器

#para1
{text-align:center;color:red;
}

id和class不要以数字开头

class选择器

.center {text-align:center;}

指定特定的HTML元素使用class。

p.center {text-align:center;}

CSS创建

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

单个文档需要特殊的样式时，就应该使用内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

在相关的标签内使用样式（style）属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

背景

背景颜色

body {background-color:#b0c4de;}

背景图像

body {background-image:url('paper.gif');}

不同的图片设置多个不同的属性

#example1 {background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

平铺与定位

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

背景大小

div
{background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;
}div
{background:url(img_flwr.gif);background-size:100% 100%;background-repeat:no-repeat;
}

指定背景图像的定位区域。

div
{background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;
}

背景剪裁属性是从指定位置开始绘制。

#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box;
}

线性渐变

#grad {height: 200px;background-image: linear-gradient(to right, red , yellow);
}#grad {height: 200px;background-image: linear-gradient(to bottom right, red, yellow);
}#grad {/* 多颜色 */background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}/*带有指定的角度的线性渐变*/
#grad {background-image: linear-gradient(-90deg, red, yellow);
}/*使用透明度*/
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}#grad {/* 重复的线性渐变 */background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变

#grad {background-image: radial-gradient(red, yellow, green);
}
/*不均匀渐变*/
#grad {background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
/*特定形状*/
#grad {background-image: radial-gradient(circle, red, yellow, green);
}
/*不同尺寸大小关键字*/
#grad1 {background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

合并属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

文本

文本颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

修饰

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}a {text-decoration:none;}

文本转换

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

p {text-indent:50px;}

字体

字体系列

p{font-family:"Times New Roman", Times, serif;}

如果浏览器不支持第一种字体，他将尝试下一种字体。

字体样式

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}  /*倾斜*/

字体大小

h1 {font-size:40px;}

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

1 {font-size:2.5em;} /* 40px/16=2.5em */

1em的默认大小是16px。

百分比

body {font-size:100%;}

链接

不同链接状态样式

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

列表

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

list-style-type:none 属性可以用于移除小标记。

指定列表项标记的图像

ul
{list-style-image: url('sqpurple.gif');
}

简写属性

ul
{list-style: square url("sqpurple.gif");
}

list-style-type
list-style-position
list-style-image

表格

边框

table
{border-collapse:collapse;
}
table,th, td
{border: 1px solid black;
}

宽度、高度

table
{width:100%;
}
th
{height:50px;
}

文字对齐

td
{text-align:right;
}td
{height:50px;vertical-align:bottom;
}

表格填充

控制边框和表格内容之间的间距

td
{padding:15px;
}

表格颜色

table, td, th
{border:1px solid green;
}
th
{background-color:green;color:white;
}

元素显示模式

元素显示模式，即元素（标签）以什么方式显示，自己占一行或者一行有多个。

块元素

比如 <h1>~<h6>、<p>、<ul>、<ol>、<li>、<div>等。

特点：

独占一行
高度、宽度、内外边距都可控制
宽度默认为容器的100%
是一个容器或盒子，里面可以放行内或块级元素（文字类标签内不能放块级元素）。

行内元素

比如 <a> <strong> <del> <span>等

特点：

一行多个
高、宽度设置无效
默认宽度为内容宽度
只能容纳文本或其他行内元素（链接内可以放块级元素，但最好转换）

行内块元素

比如<img/> <input /> <td>

特点：

一行多个但之间有空隙
默认宽度为内容宽度
高度、宽度、内外边距都可控制

显示模式的转换

display:block;   /*转换为块元素*/
display:inline;  /*转换为行内元素*/
display:inline;  /*转换为行内块元素*/

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

边框

border-style

边框宽度

可以指定长度值，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

单独设置各边

p
{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;
}

简写属性

border:5px solid red;

border-width
border-style (required)
border-color

CSS3

圆角边框：

div
{border:2px solid;
border-radius:25px;
}

盒阴影

div
{box-shadow: 10px 10px 5px #888888;
}

边界图片

div
{border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

轮廓

外边距

填充

分组与嵌套

每个选择器用逗号分隔。

h1,h2,p
{color:green;
}

嵌套

p
{color:blue;text-align:center;
}
.marked
{background-color:red;
}
.marked p
{color:white;
}
p.marked{text-decoration:underline;
}

显示

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

visibility:hidden可以隐藏某个元素，但占用与未隐藏之前一样的空间。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

浮动

让多个块级盒子一行无缝排列，经常用于横向排列。

如果图像是右浮动，下面的文本流将环绕在它左边：

img
{float:right;
}

特点：

脱离标准流（脱标），浮在上方
不在保留原先位置
与其他浮动的盒子一行内显示并且顶端对齐排列，父级宽度不够则另起一行
有行内块元素特征

一般策略：用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置。

理论上一个盒子浮动，则兄弟盒子也应浮动。

浮动影响后方的标准流，前面的不影响。

清除浮动：

清除浮动后，父级就有了高度，不会影响下方标准流。

1、额外标签法：

新增一个块级元素，并使用：

div
{clear:both;
}

2、父级添加overflow属性，设置为hidden、auto或scroll

定位

让盒子自由移动位置或者固定到屏幕中的某个位置，且能压住其他盒子。

定位=定位模式+边偏移

static 定位（静态定位）

即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响（即没有边偏移）。

relative 定位（相对定位）

相对其正常位置。

还保留原来位置，不脱标。

h2.pos_left
{position:relative;left:-20px;
}
h2.pos_right
{position:relative;left:20px;
}

absolute 定位（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素

如果元素没有已定位的父元素，那么它的位置相对于:

absolute 定位使元素的位置与文档流无关，因此不占据空间。

绝对定位的盒子不能通过margin:0 auto 水平居中

居中方式

left: 50%
margin-left: -100       左移自身宽度的一半

子绝父相：子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不占位置，可放到父盒子的任意位置。
父盒子需要加定位来限制子盒子，且需要占有位置，因此为相对定位。

fixed 定位（固定定位）

元素的位置相对于浏览器窗口是固定位置，与父元素无关。

即使窗口是滚动的它也不会移动

Fixed定位使元素的位置与文档流无关，因此不占据空间。

可以看作特殊的绝对定位。

sticky 定位

在 position:relative 与 position:fixed 定位之间切换。

以浏览器可视窗口为参照（固定定位），占有原来位置（相对定位）。

在跨越特定阈值前为相对定位，之后为固定定位。

指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {position: -webkit-sticky; /* Safari */position: sticky;top: 0;background-color: green;border: 2px solid #4CAF50;
}

元素的堆叠

img
{position:absolute;left:0px;top:0px;z-index:-1;        /*z轴控制盒子的前后次序*/
}

具有更高堆叠顺序的元素总是在前面。

行内元素添加绝对定位后，可以设置高度、宽度

块级元素添加绝对定位后，默认为内容大小

绝对定位会压住下面标准流的所有内容，但浮动不会压住盒子中的文字、图片。

Overflow

控制内容溢出元素框时显示的方式。

对齐

元素居中对齐

.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;
}

将两边的空外边距平均分配。

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

.center {text-align: center;border: 3px solid green;
}

图片居中对齐

使用 margin: auto; 并将它放到块元素中

左右对齐：position

body {margin: 0;padding: 0;
}.container {position: relative;width: 100%;
}.right {position: absolute;right: 0px;width: 300px;background-color: #b0e0e6;
}

当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，请始终设置 !DOCTYPE 声明

左右对齐：float

.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px;
}

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {overflow: auto;
}

当使用 float 属性时，请始终设置 !DOCTYPE 声明

垂直居中：padding

.center {padding: 70px 0;border: 3px solid green;
}

垂直居中：line-height

.center {line-height: 200px;height: 200px;border: 3px solid green;text-align: center;
}/* 如果文本有多行，添加以下代码: */
.center p {line-height: 1.5;display: inline-block;vertical-align: middle;
}

垂直居中：position和transform

.center { height: 200px;position: relative;border: 3px solid green;
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

组合选择符

后代选择器：选取某元素的后代元素。

div p
{background-color:yellow;
}

子元素选择器：只能选择作为某元素直接/一级子元素的元素。

div>p
{background-color:yellow;
}

相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素。

div+p
{background-color:yellow;
}

后续兄弟选择器：选取所有指定元素之后的相邻兄弟元素。

div~p
{background-color:yellow;
}

伪类

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

a.red:visited {color:#FF0000;}<a class="red" href="css-syntax.html">CSS 语法</a>

伪元素

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

“first-line” 伪元素用于向文本的首行设置特殊样式。

p:first-line
{color:#ff0000;font-variant:small-caps;
}

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter
{color:#ff0000;font-size:xx-large;
}

“:before” 伪元素可以在元素的内容前面插入新内容。

h1:before
{content:url(smiley.gif);
}

“:after” 伪元素可以在元素的内容之后插入新内容。

h1:after
{content:url(smiley.gif);
}

导航栏

<ul><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li>
</ul>

ul {list-style-type: none;margin: 0;padding: 0;
}/*移除浏览器的默认设置将边距和填充设置为0*/

垂直导航栏

a
{display:block;width:60px;
}

ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;
}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;
}/* 鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #555;color: white;
}

全屏高度的固定导航条

ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;height: 100%; /* 全屏高度 */position: fixed; overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

水平导航栏

内联列表项

li
{display:inline;
}

浮动列表项

li
{float:left;
}
a
{display:block;width:60px;
}

实例

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}/*鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #111;
}

固定导航条

ul {position: fixed;top: 0;width: 100%;
}

下拉菜单

<div class="dropdown"><span>鼠标移动到我这！</span><div class="dropdown-content"><p>菜鸟教程</p><p>www.runoob.com</p></div>
</div>

<style>
.dropdown {position: relative;display: inline-block;
}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px;
}
.dropdown:hover .dropdown-content {display: block;
}
</style>

提示框

<div class="tooltip">鼠标移动到这<span class="tooltiptext">提示文本</span>
</div>

/* Tooltip 容器 */
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}/* Tooltip 文本 */
.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;padding: 5px 0;border-radius: 6px;/* 定位 */position: absolute;z-index: 1;
}/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {visibility: visible;
}

图片

透明度

img
{opacity:0.4;filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

属性选择器

[title]
{color:blue;
}

属性和值选择器

[title=runoob]
{border:5px solid green;
}

属性和值的选择器 - 多值

[title~=hello] { color:blue; }[lang|=en] { color:blue; }

表单

input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;
}input[type=submit] {width: 100%;background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;
}input[type=submit]:hover {background-color: #45a049;
}div {border-radius: 5px;background-color: #f2f2f2;padding: 20px;
}

媒体类型

@media规则：允许在相同样式表为不同媒体设置不同的样式。

浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。

@media screen
{p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{p.test {font-weight:bold;}
}

网页布局

响应式网页布局

* {box-sizing: border-box;
}body {font-family: Arial;padding: 10px;background: #f1f1f1;
}/* 头部标题 */
.header {padding: 30px;text-align: center;background: white;
}.header h1 {font-size: 50px;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航条链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接颜色修改 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建两列 */
/* Left column */
.leftcolumn {   float: left;width: 75%;
}/* 右侧栏 */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;
}/* 图像部分 */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;
}/* 文章卡片效果 */
.card {background-color: white;padding: 20px;margin-top: 20px;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 底部 */
.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;
}/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn {   width: 100%;padding: 0;}
}/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}
}

CSS知识全面汇总——速查手册相关推荐

html在线查询手册,HTML速查手册汇总
Home啦啦啦我是卖报的小行家 Basic 标题一级标题二级标题三级标题四级标题五级标题六级标题创建水平线,分割内容段落段落折行链接This is my blog target ...
机器学习常用「微积分」知识速查手册
AI 涉及到的数学特别多. 很多数学问题,之所以让人头大,其实并不是真的有多难,而是符号系统比较复杂,运算繁复,或者运算所表达的物理意义多样. 很多时候造成困扰是因为想不起来这里用到什么定理.哪个公式 ...
[WebDev]Web 开发与设计师速查手册大全
Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 ...
Excel公式与函数案例速查手册/电脑技巧从入门到精通丛书
出版社: 机械工业出版社; 第1版 (2013年12月1日) 丛书名: 电脑技巧从入门到精通丛书平装: 770页语种: 简体中文开本: 32 条形码: 9787111448761 商品尺寸: 1 ...
《Linux命令速查手册》笔记
写在前面:我看过很多技术相关的书籍,但是很少有全部看完的.大部分都是看了一小半,甚至是一大半.但是印象中,没有哪一本是全部读完的,哪怕的通读. 不过这本<Linux命令速查手册>,我倒是很 ...
最全pandas函数用法速查手册（高清版）
Pandas 是 Python 的核心数据分析支持库,拥有快速.灵活.明确的数据结构,旨在简单.直观.快速地处理关系型.标记型数据,是一款强大.灵活的开源数据分析工具. 但是pandas的知识点很多, ...
pandas速查手册(中文版)
本文翻译自文章:Pandas Cheat Sheet - Python for Data Science 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非常重要的Python包.它 ...
叮，您有一份ML.NET 速查手册请查收！
点击上方蓝字关注我们 (本文阅读时间:7分钟) 本篇文章简要介绍 ML.NET 背景和面向 .NET 开发的特色功能,以及典型的机器学习编码示例,并分享自己整理的 ML.NET API 速查手册. ...
Linux命令速查手册
一. 启动,关机,登入,登出相关命令 <login> 登录 <logout> 登出 <exit> 登出 <shutdown> 停止系统 <halt ...
Pandas之十二速查手册
Pandas的功能比较丰富,很多方法也不需要一直记住,只需要在用到的时候能找到就可以. 比较通俗的做法是,在速查手册查找合适的方法,再看该方法的参数并测试和使用.(看方法参数推荐使用Pycharm) ...

CSS知识全面汇总——速查手册

CSS