详解CSS3.0（CascadingStyleSheet）层叠级联样式表CSS3.0(Cascading Style Sheet) 层叠级联样式表
快速⼊门：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS01</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>标题⼀</h1>
</body>
</html>
CSS的三种导⼊⽅式：
⾏内样式（优先级最⾼，但不建议这样写）：
<h1 >标题⼀</h1>
内部样式表（不建议这样写）：
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>标题⼀</h1>
</body>
外部样式表（优先级最低，但实现了HTML与CSS的分离，推荐使⽤）：
h1 {
color: red;
}
<head>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<h1>标题⼀</h1>
</body>
选择器：
3种基本选择器：
标签选择器（权重最低）
类选择器
id选择器（权重最⾼）
/* 标签选择器，会选择所有h1标签 */
h1 {
color: red;
background: #3cbda6;
border-radius: 20px;
font-size: 80px;
}
/* 类选择器，会选择所有类名为text-red的元素 */
.text-red{
color: red;
}
/* id选择器，会选择id为description的元素，id必须保证唯⼀ */
#description{
color: black;
}
<h1>标题⼀</h1>
<p class="text-red">content</p>
<span class="text-red">content</span>
<p id="description">some content</p>
层次选择器：
后代选择器：在某个元素内的元素（包括⼦代、孙代…）
⼦选择器：在某个元素内⼀层的元素（只包括⼦代）
相邻选择器（⼀个弟弟选择器）：某个元素之后的⼀个同级选择器通⽤选择器（所有弟弟选择器）：某个元素之后的所有同级选择器
/* 后代选择器 */
body p{
}
/* ⼦选择器 */
body>p{
}
/* 相邻选择器（弟弟选择器） */
.active + p{
}
/* 通⽤选择器（所有弟弟选择器） */
.active~p{
}
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<div>
<p>p4</p>
<p>p5</p>
</div>
</body>
结构伪类选择器：
/* div中的第⼀个p元素 */
div p:first-child{
}
/* div中的最后⼀个p元素 */
div p:last-child{
}
/* div中的最后⼀个p元素 */
div p:last-child{
}
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
属性选择器：
/* class为demo中的所有a标签 */
.demo a{
}
/* 存在id的a标签 */
a[id]{
}
/
* id为first的a标签 */
a[id=first]{
}
/* href以http开头的a标签 */
a[href^=http]{
}
/* href以pdf结尾的a标签 */
a[href$=pdf]{
}
字体样式(字体，字体风格，字体⼤⼩，字体粗细，字体颜⾊)：font-family: 楷体;
font-style:oblique;
font-size: 40px;
font-weight: bold
color: #a13d30;
css固定定位
font: italic bolder 12px "楷体";
⽂本样式（⽂本居中对齐，⾸⾏缩进两个字母，⾏⾼，⽂本装饰）text-align: center;
text-indent: 2em;
line-height:30px;
text-decoration: underline;
⽂本阴影（阴影颜⾊，⽔平偏移，垂直偏移，阴影半径）
text-shadow: #3cc7f5 -5px 5px 2px
a标签去除下划线：
text-decoration: none;
超链接伪类：
//默认属性
a{
text-decoration: none;
color: #000000;
}
//⿏标进⼊
a:hover{
color: orange
}
/
/⿏标按住未松开
a:active{
color: green
}
//⿏标点击之后
a:visited{
color: red
}
li 标签的样式：
//去除圆点
list-style: none;
/
/空⼼圆
list-style: circle;
//数字编号
list-style: decimal;
//正⽅形
list-style: square;
背景样式：
//背景颜⾊
background-color: blue
//背景图⽚(默认是 repeat 平铺效果)
background-image: url("");
/
/⽔平平铺，垂直平铺，不平铺
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
盒⼦模型：
上下外边距为0，左右居中:  margin: 0 auto;
上下左右外边距为0:    margin: 0;
上下外边距为0，左右外边距为1px: margin: 0 1px;
设置上左下右外边距:    margin: 0 10px 1px 10px;
上下左右内边距为10px:  padding: 10px;
上下内边距为0，左右内边距为10px: padding: 0 10px
设置上左下右内边距:    padding: 10px 10px 10px 10px
浮动：
标准⽂档流：元素默认⾃左往右，从上往下的流式排列⽅式。分为块级元素和⾏内元素
块级元素：        display: block;
block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。默认情况下，block元素宽度⾃动填满其⽗元素宽度。
⾏内元素：        display: inline;
inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。
是块元素，但可以内联（在⼀⾏）：  display: inline-block;
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同⼀⾏内。
⽐如我们可以给⼀个link（a元素）inline-block属性值，使其既具有block的宽度⾼度特性⼜具有inline的同⾏特性。
元素不显⽰也不占⽤空间：    display: none;
定位：
相对定位（相对⾃⼰原本的位置偏移，它原来的位置仍然被保留在标准⽂档流中）
相对⾃⼰原本位置上移20px，右移20px：
position: relative;
top: -20px;
left: 20px;
绝对定位（它原来的位置脱离了标准⽂档流）
绝对定位 absolute ⼀般和 relative 搭配使⽤，绝对定位的元素会⼀层⼀层地寻⽗元素，然后相对于 relative ⽗元素定位，否则相对于浏览器定位
<body>
<div class="b g">
ll
<div class="a r">
最外⾯
<div class="s b">
中间
<div class="ss y">
最⾥⾯
</div>
</div>
</div>
</div>
<style>
.b {
height: 900px;
width: 600px;
position: relative;
}
.a {
height: 500px;
width: 600px;
/* position: relative; */
}
.s {
height: 200px;
width: 200px;
position: absolute;
right: 0px;
bottom: 0px;
}
.ss {
height: 50px;
width: 50px;
}
.r {
background-color: red;
}
.b {
background-color: blue;
}
.y {
background-color: yellow;
}
.g {
background-color: green;
}
</style>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。