CSS学习

CSS：层叠样式表 Cascading style sheets

一、作用：用来修饰html标签

二、css声明方式

1.行内样式：通过style属性来修饰

2.内联样式：通过style标签实现(写到head标签里面)

3.外联样式：通过css文件实现link标签引入文件

优先级：就近原则  建议使用外联样式

三、css语法

大括号包裹 p{}

键值对的形式   color:red;

中间使用冒号

结尾加分号

注释 /* */

四、选择器

*选择器    作用于所有标签

标签选择器  标签名{}

类选择器   .类名{}

ID选择器   #id名{}

组合选择器  .sp, #div, p{}

层级选择器  .one p .two{}

伪类选择器  a:link{} 

属性选择器  input[type=text]{}

五、字体

font-style: italic;

font-weight:bold;

font-size:20px;

font-family: "黑体";

font:italic bold 50px 黑体;   以上简写 顺序不要改变

六、文本修饰

text-indent:2em;  首行缩进2个字

text-align: left; 对其方式

text-shadow: 5px 5px 1px blue;  文本的阴影

text-decoration: none;  去下划线 

将溢出部分显示...

/* 强制不换行 */

white-space: nowrap;

/* 将溢出部分隐藏 */

overflow: hidden;

/* 显示... */

text-overflow: ellipsis;

七、背景修饰

background-color:pink;    背景颜色

background-image: url(./img/manor-2.jpg);  背景图片

background-repeat: no-repeat;   指定是否平铺

background-position: left top;  指定背景位置

background-attachment: scoll;   相对内容位置

八、定位

position

fixed:相对于窗体固定

relative:相对位置，相对于自身的原始位置

absoslute:绝对位置

九、布局

float:left right

1.会脱离文档流

2.层级比原来的高 

结果会造成布局不能够像我们理解那样布局

clear:both left right

清除浮动避免浮动对后面元素影响

提示：只要有浮动，你就要清浮动

display：block inline inline-block

可以将块标签和行标签转换

十、盒子模型

边框 border

border-width: 1px;     边框的宽度

border-style: solid;    边框的样式

/*border-color: deeppink;*/

/*

border-top-color: yellow;

border-bottom-color: blue;

border-left-color: darkred;

border-right-color: palegreen;

*/

border-color: yellow palegoldenrod;   边框的颜色

border-radius: 0px 0px 50px 50px;   设置盒子的边角

box-shadow: 10px 10px 10px darkred;   盒子的阴影

box-sizing: border-box;   盒子宽度和高度的调整

总结：总宽度=边框的宽度+内容的宽度+margin(盒子外边距)+padding(内容和盒子边框的距离)