语法:
选择器,声明(由一个属性和一个值)
注释:/* */
选择器:
1. id选择器,class选择器
2. 组和选择
3. 属性选择
创建:
- 外部样式表
html <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- 内部样式表
html <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
- 内联样式
html <p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
(内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
背景:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
文本:
字体:
链接:
a:link- 正常，未访问过的链接a:visited- 用户已访问过的链接a:hover- 当用户鼠标放在链接上时a:active- 链接被点击的那一刻
列表:
盒子模型:
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。扩展内边距
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
边框属性:
边框轮廓:
margin(外边距):
padding（填充）:
分组 和 嵌套 选择器:
/*分组*/
h1,h2,p
{color:green;
}
/*嵌套*/
p
{color:blue;text-align:center;
}
.marked
{background-color:red;
}
.marked p
{color:white;
}
p.marked{text-decoration:underline;
}尺寸:
块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block-- 显示为块级元素display:inline-- 显示为内联元素display:inline-block-- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
定位:
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了 relative 的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为 relative 定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即 html 元素定位。设置了 absolute 的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。
![用python画大白_[Python][可视化]matplotlib基础入门](http://corina.cc/usr/uploads/2020/05/210604794.png)
