白发败犬のCSS学习笔记
CSS学习笔记及要点记录
1.CSS概述
(1)CSS指层叠样式表(Cascading Style Sheets)
(2)样式表定义如何显示HTML元素，就像HTML中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css文件中。我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观
2.CSS语法
(1)主要构成部分：选择器＆一条或多条声明，选择器通常是需要改变样式的HTML元素；每条声明由一个属性和一个值组成
(2)CSS声明总是以分号(;)结束，声明总以大括号({})括起来,属性和值通过冒号(:)分开
(3)为了使CSS有更强的可读性，建议一行描述一个属性
(4)注释：/* */
3.ID和Class选择器
(1)ID选择器可以为标有特定ID的HTML元素指定特定的样式
(2)HTML元素以ID属性来设置ID选择器,CSS中ID选择器以”#”来定义，eg：
#para1
{
text-align:center;
color:red;
}
//建议ID属性不以数字开头
(3)Class选择器用于描述一组元素的样式，可以在多个元素中使用
(4)Class选择器在HTML中以Class属性表示, 在 CSS 中，类选择器以一个点”.”号显示，eg：
.center
{
text-align:center;
}
//所有拥有center类的HTML元素均为居中
(5)也可以指定特定的HTML元素使用Class，eg：
p.center
{
text-align:center;
}
//所有的p元素使用class="center"让该元素的文本居中
//同样类名的第一个字符不可以使用数字
4.CSS创建
(1)插入样式表的方法有三种：外部样式表(External style sheet);内部样式表(Internal style sheet);内联样式(Inline style)
(2)外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观，eg：
★每个页面使用 <link> 标签链接到样式表。<link>标签在（文档的）头部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
(3)浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存，eg：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back.png");}
//属性值与单位之间不能留有空格
(4)内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表，eg：
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back.png");}
</style>
</head>
(5)内联样式：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性，eg：
p style="color:sienna;margin-left:20px">这是一个段落。</p>
(6)多重样式：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
(7)多重样式优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 (注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式)
★前辈总结的一些经验放在这里：
下列是一份优先级逐级增加的选择器列表：
·通用选择器（*）
·元素(类型)选择器
·类选择器
·属性选择器
·伪类
·ID 选择器
·内联样式
·!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
★一些经验法则：
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在全站范围的 css 上使用 !important
Never 永远不要在你的插件中使用 !important
5.Background(背景)
(1)CSS属性定义背景效果:
·background-color
body {background-color:#b0c4de;}
//CSS中，颜色值通常以以下方式定义:十六进制如："#ff0000" RGB如："rgb(255,0,0)" 颜色名称如："red"
·background-image
body {background-image:url('paper.gif');}
//默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
·background-repeat
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
//如果不想让图像平铺，可以使用 background-repeat 属性
//repeat-x水平方向 repeat-y数值方向 no-repeat不平铺
·background-attachment
//设置背景图片是随滚动轴如何滚动的css属性
//四个可选值：fixed，scroll，local，inherit
·background-position
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
//改变图像位置
6.Text(文本)
·color
body {color:red;}
·text-align
h1 {text-align:center;}
//对齐方式
·text-decoration
a {text-decoration:none;}
//设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线
·text-transform
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
//文本转换，大小写或首字母大写
·text-indent
p {text-indent:50px;}
//文本缩进
7.Fonts(字体)
(1)字体系列：font-family属性(font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体)，eg：
p{font-family:"Times New Roman", Times, serif;}
//如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"
//多个字体系列是用一个逗号分隔指明
(2)字体样式：font-style属性，eg：
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
//分别对应正常，斜体，倾斜(类似斜体，但不太支持)
(3)字体大小：font-size属性，eg：
★能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。请务必使用正确的HTML标签，使用<h1> - <h6>表示标题和<p>表示段落
★字体大小的值可以是绝对或相对的大小。
绝对大小：
·设置一个指定大小的文本
·不允许用户在所有浏览器中改变文本大小
·确定了输出的物理尺寸时绝对大小很有用
相对大小：
·相对于周围的元素来设置大小
·允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
(4)三种字体大小设置方法：
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
//直接设置像素，虽然可以通过浏览器的缩放工具调整文本大小，但是这种调整是整个页面，而不仅仅是文本
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 */
//用em来设置字体大小，为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素
//1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
//使用百分比和em组合:在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比
8.Link(链接)
(1)链接样式：
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
//当然还可以通过text-decoration删除下划线，background-color调整背景颜色
9.列表样式
(1)不同的列表项标记:
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;}
//分别对应空心圆点，实心正方形，罗马数字，小写字母
(2)作为列表项标记的图像：
ul
{
list-style-image: url('sqpurple.gif');
}
(3)设置列表中列表项标志的位置：list-style-position
10.Table(表格)
(1)表格边框：使用border属性，eg：
table, th, td
{
border: 1px solid black;
}
(2)折叠边框border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开，eg：
table{border-collapse:collapse;}
table,th, td{border: 1px solid black;}
(3)表格宽度和高度：width和height属性定义表格的宽度和高度，eg：
table{width:100%;}
th{height:50px;}
(4)表格文字对齐：text-align属性设置水平对齐方式，向左右或中心，eg：
td{text-align:right;}
td
{
height:50px;
vertical-align:bottom;
}
//垂直对齐属性设置垂直对齐，比如顶部，底部或中间
(5)表格填充：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性，eg：
td{padding:15px;}
(6)表格颜色，eg：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
11.BoxModel(盒子模型)
★最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
12.Boeder,Outline,Margin,Padding
(见11，需要详细内容可咨询度娘)
13.分组和嵌套选择器
(1)分组选择器：在样式表中有很多具有相同样式的元素，为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔，eg：
h1,h2,p
{
color:green;
}
(2)嵌套选择器：适用于选择器内部的选择器的样式
p{ }: 为所有 p 元素指定一个样式
.marked{ }: 为所有 class="marked" 的元素指定一个样式
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式
14.Dimension(尺寸)
15.Display(显示)&Visibility(可见性)
(1)隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。eg：
h1.hidden {visibility:hidden;}
//可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间,也就是说，该元素虽然被隐藏了，但仍然会影响布局
h1.hidden {display:none;}
//隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
16.Position(定位)
(1)static定位：静态定位的元素不会受到 top, bottom, left, right影响，eg：
div.static
{
position: static;
border: 3px solid #73AD21;
}
(2)fixed定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，eg：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
(3)relative定位：相对定位元素的定位是相对其正常位置(移动相对定位元素，但它原本所占的空间不会改变)，eg：
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
//相对定位元素经常被用来作为绝对定位元素的容器块
(4)absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>,eg：
h2
{
position:absolute;
left:100px;
top:150px;
}
(5)sticky定位：基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同，eg：
div.sticky
{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
(6)重叠的元素：z-index属性指定了一个元素的堆叠顺序(具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面)，eg：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
//有图层内味儿了=、=
17.Overflow(溢出)
(1)overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，有以下值：
visible 默认值，内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
18.Float(浮动)
(1)使元素向左或向右移动，其周围的元素也会重新排列,往往是用于图像，但它在布局时一样非常有用(大概是在改变页面大小时实现自动布局的意思)，eg：
img
{
float:right;
}
(2)清除浮动：元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素，eg：
.text_line
{
clear:both;
}
19.组合选择符
(1)后代选择器：用于选取某元素的后代元素，eg：
div p
{
background-color:yellow;
}
(2)子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，eg：
div>p
{
background-color:yellow;
}
(3)相邻兄弟选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector），eg：
div+p
{
background-color:yellow;
}
(4)后续兄弟选择器：选取所有指定元素之后的相邻兄弟元素，eg：
div~p
{
background-color:yellow;
}
20.Pseudo-classes(伪类)
(1)伪类语法：
selector:pseudo-class {property:value;}
(2)CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
(3)anchor伪类：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
//在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后才是有效的
//在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的
(4)伪类可以与CSS类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
(5)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;
}
(6)lang伪类：为不同的语言定义特殊的规则，eg：
q:lang(no) {quotes: "~" "~";}
(7)更多伪类自行翻手册哈
21.伪元素
(1)CSS伪元素是用来添加一些选择器的特殊效果
(2)伪元素语法：
selector:pseudo-element {property:value;}
(3)CSS类也可以用伪元素：
selector.class:pseudo-element {property:value;}
(4)first-line伪元素：用于向文本的首行设置特殊样式，eg：
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
//first-line伪元素只能用于块级元素
(5)first-letter伪元素：用于向文本的首字母设置特殊样式，eg：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
//同样只能用于块级元素
(6)同样，更多伪元素请查手册
22.属性选择器
(1)具有特定属性的HTML元素样式不仅仅是class和id
[title]
{
color:blue;
}
//把包含标题(title)的所有元素变为蓝色
(2)属性和值选择器：
[title=runoob]
{
border:5px solid green;
}
//改变了标题title='runoob'元素的边框样式
(3)属性和值选择器(多值)：
[title~=hello] { color:blue; }
//包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值
[lang|=en] { color:blue; }
//包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值
基础知识大概就是这些了，列出了大概框架，需要深入学习某个模块可以查阅手册，之后就是应用了，配合JS以及CSS3进行实际应用，比如什么导航栏啦，计数器啦，动画等等
23.完结撒花~
白发败犬のCSS学习笔记
https://baifabaiquan.cn/2020/06/30/白发败犬のCSS学习笔记/