CSS 学习笔记

概述

CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,每条声明由一个属性和一个值组成。:

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

注释

p
{
    text-align:center;
    /*这是一个注释*/
    color:black;
    font-family:arial;
}

Id 和 Class

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

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

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

p.center {text-align:center;}

CSS 创建

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

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

外部样式表

使用 <link> 标签链接外部样式表：

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

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。
使用 <style> 标签定义内部样式表：

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

多重样式

当对同一元素定义了多个样式表，得到的将是所有样式的并集，优先级顺序如下：
(浏览器默认样式) < （外部样式）External style sheet < （内部样式）Internal style sheet < （内联样式）Inline style

背景

CSS 属性定义背景效果:

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

/* 颜色 */
body {background-color:#b0c4de;}

/* 图片 */ 
body {background-image:url('paper.gif');} 
/* 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些*/
/* 图片平铺方式 */ 
background-repeat:repeat-x; 

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

文本

/* 文本颜色 */
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

/* 文本对齐 */
h1 {text-align:center;}
p.date {text-align:right;}

/* 文本修饰 */
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

/* 文本转换 */
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

/* 文本缩进 */
p {text-indent:50px;}

所有文本属性：

color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

字体

字型

Serif Serif字体中字符在行的末端拥有额外的装饰
Sans-serif "Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace 所有的等宽字符具有相同的宽度

字体

font-family 属性设置文本的字体系列。

/*字体设置*/
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;}
body {font-size:100%;}
h1 {font-size:2.5em;} /* 40px/16=2.5em */

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

em的尺寸单位由W3C建议。

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

因此，1em的默认大小是16px。

链接

四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

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

/*text-decoration 属性主要用于设置链接中的下划线*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

/*指定链接背景色*/
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

项目列表

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


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


ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

参考链接：https://www.runoob.com/css/css-list.html

表格

/*表格边框，会显示双边框*/
table, th, td
{
    border: 1px solid black;
}

/*折叠边框，显示单边框*/
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

/*表格宽度和高度*/
table 
{
    100%;
}
th
{
    height:50px;
}

/*表格文字对齐*/
td
{
    text-align:right;  /*水平对齐*/
    vertical-align:bottom;  /*垂直对齐*/
}

/*填充*/
td
{
    padding:15px;
}

/*表格颜色*/
table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

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

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

div {
     300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算：
300px (宽)

50px (左 + 右填充)
50px (左 + 右边框)
50px (左 + 右边距)
= 450px

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

border-style属性用来定义边框的样式。

边框样式

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

边框宽度

p.one
{
    border-style:solid;
    border-5px;
}
p.two
{
    border-style:solid;
    border-medium;
}

边框颜色

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}

单独设置

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

其他边框属性

border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

margin

CSS margin(外边距)属性定义元素周围的空间。
批注：magin应该是对所在容器的相对位置。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin:25px 50px 75px 100px; /*上边距为25px,右边距为50px,下边距为75px,左边距为100px*/

margin:25px 50px 75px; /*上边距为25px,左右边距为50px,下边距为75px*/

margin:25px 50px; /*上下边距为25px,左右边距为50px*/

padding

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

分组和嵌套

分组选择器：

h1,h2,p
{
    color:green;
}

嵌套选择器

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

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

尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

Display 与 Visibility

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

Position

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

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

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

relative 定位

相对定位会按照元素的原始位置对该元素进行移动。

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

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，用绝对定位,一个元素可以放在页面上的任何位置。:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
批注：浮动。

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

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

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

默认情况下，overflow 的值为 visible，意思是内容溢出元素框：

Float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列,而不能上下移动。。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

清除浮动：
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

.text_line
{
    clear:both;
}

伪类

CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

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

first-child

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

/*匹配第一个 p标签 元素*/
p:first-child
{
    color:blue;
}

/*匹配所有p标签 元素中的第一个i标签元素*/
p > i:first-child
{
    color:blue;
}

/*匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素*/
p:first-child i
{
    color:blue;
}

lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。
为 no 的q元素定义引号的类型：

q:lang(no) {quotes: "~" "~";}

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
q:lang(no)
{
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>
</html>

其他伪类

:checked    input:checked   选择所有选中的表单元素
:disabled   input:disabled  选择所有禁用的表单元素
:empty  p:empty     选择所有没有子元素的p元素
:enabled    input:enabled   选择所有启用的表单元素
:first-of-type  p:first-of-type     选择的每个 p 元素是其父元素的第一个 p 元素
:in-range   input:in-range  选择元素指定范围内的值
:invalid    input:invalid   选择所有无效的元素
:last-child     p:last-child    选择所有p元素的最后一个子元素
:last-of-type   p:last-of-type  选择每个p元素是其母元素的最后一个p元素
:not(selector)  :not(p)     选择所有p以外的元素
:nth-child(n)   p:nth-child(2)  选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)  p:nth-last-child(2)     选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)    p:nth-last-of-type(2)   选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)     p:nth-of-type(2)    选择所有p元素第二个为p的子元素
:only-of-type   p:only-of-type  选择所有仅有一个子元素为p的元素
:only-child     p:only-child    选择所有仅有一个子元素的p元素
:optional   input:optional  选择没有"required"的元素属性
:out-of-range   input:out-of-range  选择指定范围以外的值的元素属性
:read-only  input:read-only     选择只读属性的元素属性
:read-write     input:read-write    选择没有只读属性的元素属性
:required   input:required  选择有"required"属性指定的元素属性
:root   root    选择文档的根元素
:target     #news:target    选择当前活动#news元素(点击URL包含锚的名字)
:valid  input:valid     选择所有有效值的属性
:link   a:link  选择所有未访问链接
:visited    a:visited   选择所有访问过的链接
:active     a:active    选择正在活动链接
:hover  a:hover     把鼠标放在链接上的状态
:focus  input:focus     选择元素输入后具有焦点
:first-letter   p:first-letter  选择每个<p> 元素的第一个字母
:first-line     p:first-line    选择每个<p> 元素的第一行
:first-child    p:first-child   选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before     p:before    在每个<p>元素之前插入内容
:after  p:after     在每个<p>元素之后插入内容
:lang(language)     p:lang(it)  为<p>元素的lang属性选择一个开始值

伪元素

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

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

:link   a:link  选择所有未访问链接
:visited    a:visited   选择所有访问过的链接
:active     a:active    选择正在活动链接
:hover  a:hover     把鼠标放在链接上的状态
:focus  input:focus     选择元素输入后具有焦点
:first-letter   p:first-letter  选择每个<p> 元素的第一个字母
:first-line     p:first-line    选择每个<p> 元素的第一行
:first-child    p:first-child   选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before     p:before    在每个<p>元素之前插入内容
:after  p:after     在每个<p>元素之后插入内容
:lang(language)     p:lang(it)  为<p>元素的lang属性选择一个开始值

span和div

span和div区别在于，baidiv是一个块级元素，它包含的du元素会自动换行。而span是行内元素，在它的前后不会换行。