CSS学习笔记

CSS 属性定义背景效果:

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

CSS 文本格式

文本颜色

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;}

文本修饰

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

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

文本缩进

p {
   text-indent:50px;}

CSS 字体

字体系列

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

字体样式

p.normal {
   font-style:normal;}
p.italic {
   font-style:italic;}

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小

h1 {
   font-size:40px;}
h2 {
   font-size:30px;}
p {
   font-size:14px;}

用em来设置字体大小

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

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

h1 {
   font-size:2.5em;} /* 40px/16=2.5em */
h2 {
   font-size:1.875em;} /* 30px/16=1.875em */
p {
   font-size:0.875em;} /* 14px/16=0.875em */

CSS 链接

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

盒子模型

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

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

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

CSS Display(显示) 与 Visibility（可见性）

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方***产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

position 属性的五个值：

static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
relative 相对定位元素的定位是相对其正常位置。
fixed 元素的位置相对于浏览器窗口是固定位置。
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
sticky sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

CSS 布局 - Overflow

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS 布局 - 水平 & 垂直对齐

元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。

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

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

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

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

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

img {
   
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

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

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

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

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 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;
}

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔) div p
子元素选择器(以大于号分隔） div>p
相邻兄弟选择器（以加号分隔）div+p
普通兄弟选择器（以破折号分隔）div~p

提示工具

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style> .tooltip {
     position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext {
     visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; right: 110%; } .tooltip .tooltiptext::after {
     content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip .tooltiptext::after {
     content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip:hover .tooltiptext {
     visibility: visible; } </style>
<body style="text-align:center;">

<h2>左侧提示框/右侧箭头</h2>

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

</body>
</html>

css实例

https://www.runoob.com/css/css-examples.html