标签：总结 定位 color 元素 基础知识 设置 font 选择器 CSS
CSS定义与引用
定义
定义：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
css页面引入 - 外联式：
定义：通过link标签，链接到外部样式表到页面中。
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
<link rel="stylesheet" type="text/css" href="css/main.css">
css页面引入 - 嵌入式：
定义：通过style标签，在网页上创建嵌入的样式表。 优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
css页面引入 - 内联式：
定义：通过标签的style属性，在标签上直接写样式。 优点：方便、直观。 缺点：缺乏可重用性。
<div style="width:100px; height:100px; background:red ">hello</div>
常用的CSS样式
颜色：color
color 设置文字的颜色
color:red;
字体：font
font 同时设置文字的几个属性，写的顺序有兼容问题
建议按照如下顺序写：
font：是否加粗 字号/行高 字体；
font: normal 12px/36px '微软雅黑';
font-family: 指定字体系列
font-family 设置文字的字体
font-family:'微软雅黑';
font-style 字体风格
font-style:'normal'; 设置不倾斜，
font-style:'italic'; 设置文字倾斜
font-weight 设置文字是否加粗
font-weight:bold 设置加粗
font-weight:normal 设置不加粗
font-size: 字体大小
font-size:12px;
文本：text
text 文本设置
text-decoration 设置文字的下划线
text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进
text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，
text-align:center 设置文字水平居中
line-height 设置文字的行高
line-height:24px;
背景：background
background 背景设置
background-color(图片背景颜色)
background-image(背景图片路径)
background-repeat(背景图片是否及如何重复)
background-attachment(背景图片是否固定)
background-position(背景图像的起始位置)
链接：a
a:link 普通的、未被访问的链接
a:link {color:#FF0000;}
a:visited 用户已访问的链接
a:visited {color:#00FF00;}
a:hover 鼠标指针位于链接的上方
a:hover {color:#FF00FF;}
a:active 链接被点击的时刻
a:active {color:#0000FF;}
注意，样式设置时：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
CSS框模型（盒子模式）
margin 外边距 （margin-top margin-right margin-bottom margin-left）
4值，顺时针方向：分别设置上 右 下 左 的margin的值
margin: top right bottom left （顺时针设置）
3个值，顺时针方向：分别设置上 左右 下 的margin的值
2个值，分别设置：上下 和 左右 的margin的值
margin:30 auto; 盒子水平居中
1个值，同时设置四个边的margin
margin: 10%; 百分比设置
margin 合并问题：两个盒子margin重叠去相对比较大的值作为之间的margin值;
margin-top:-1px; 进行边线的合并
border 边框
border: border-width border-style border-color
border:5px solid red;
border-style 常用样式：（https://www.w3school.com.cn/cssref/pr_border-style.asp）
none：定义无边框
solid：定义实线
dashed：定义虚线
border-width 边框宽度
border-color 边框颜色
padding 内边距（padding-top padding-right padding-bottom padding-left）
4值，顺时针方向：分别设置上 右 下 左 的padding的值
padding: top right bottom left （顺时针设置）
padding: 10px 0.25em 2ex 20%;
3个值，顺时针方向：分别设置上 左右 下 的padding的值
padding:10px 5px 15px;
2个值，分别设置：上下 和 左右 的padding的值
padding:10px 5px;
1个值，同时设置四个边的padding
padding: 10% 百分比
常用的CSS定位
行内元素（行内框） 与 块元素（块框） （一切皆为框）
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
元素框正常生成：position : static
position 的默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
元素框偏移某个距离：position : relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
position:relative;：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
元素框从文档流完全删除，并相对于其包含块定位：position : absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position:absolute;：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
position : fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
定义：相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
相对定位是“相对于”元素在文档中的初始位置
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
定义：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
注意：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
固定定位
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:right; 向右进行浮动操作
clear 属性规定框的哪些边不应该挨着浮动框(如果这个元素没有浮动，相当于我的边不能在已经浮动的标签下面)。letf right both none
clear: both; 在左右两侧均不允许浮动元素
CSS定位属性 overflow
定义：overflow 属性规定当内容溢出元素框时发生的事情。
属性：
overflow:visible;：默认值。内容不会被修剪，会呈现在元素框之外。
overflow:scroll;：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto;：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:hidden;：内容会被修剪，并且其余内容是不可见的。
overflow-x:hidden;横向内容被修剪
overflow-y:hidden;纵向内容被修剪
常用的CSS选择器
元素 选择器：
定义：最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
类 选择器
定义：类选择器允许以一种独立于文档元素的方式来指定样式。
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
<style>
.important {color:red;} // 或 *.important {color:red;} 全部使用class = "important" 的元素
//指定 使用class = "important" 的元素
p.important {color:red;}
h1.important {color:blue;}
</style>
多类选择器，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
ID 选择器
定义：ID 选择器允许以一种独立于文档元素的方式来指定样式。
语法：
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
<p id="intro">This is a paragraph of introduction.</p>
<style>
#intro {font-weight:bold;}
</style>
定义：属性选择器可以根据元素的属性及属性值来选择元素。
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
伪类及伪元素选择器：一般称为黑魔法解决一些html中的bug
伪类：CSS 伪类用于向某些选择器添加特殊的效果。
.box2:before：
.box2:before{
content："前面的文字"；
color：red ；
}
锚伪类：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
p:first-child {color: red; } /*匹配第一个p元素*/
q:lang(no){ quotes: "~" "~" }/*为属性值为 no 的 q 元素定义引号的类型：*/
伪元素：CSS 伪元素用于向某些选择器设置特殊效果。
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before{
content:url(logo.gif);
}
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after{
content:url(logo.gif);
}
CSS 样式生效的权重计算
权重的计算：
!important 放在对应样式的后面，权重值为10000；
style内联样式，权重值为1000；
ID选择器，权重值为100；
类、伪类和属性选择器，权重值为10；
标签和伪元素选择器，权重值为1；
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0；
标签：总结,
定位,
color,
元素,
基础知识,
设置,
font,
选择器,
CSS
From： https://www.cnblogs.com/qingtianyu2015/p/16619138.html