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
{
width: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 {
width: 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-width:5px;
}
p.two
{
border-style:solid;
border-width: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是行内元素，在它的前后不会换行。
