css 学习记录

如何引入css  内联样式 在标签内 添加style

　　　　　　style标签

　　　　　　外联式写法 新建CSS文件 通过用link标签引入css样式文件

　　　　　　import url(../);、

css语法   选择器 {属性：值；}

 

CSS属性

float的属性可以使元素左右浮动 

设置字体的样式 

color属性 用于 设置字体颜色  color 可以被子元素继承

background-color:设置背景色 

width:设置宽度

height：设置高度

display:block 为块级元素 

display:inline 为行内元素

line-height:设置行高 行高等于height 时 文字居中 不写height直接写line-height 高度等于line-height高度 并且居中 

font-size  设置字体大小必须写在font-family之前设置  font属性都能被子元素继承

font-weight:bold 文字加粗

font-family 设置文字字体 

text-align center 内容居中显示

list-style:none; 去除li 标签前面默认的样式

padding：上下   左右 ；设置内边距

margin：上下   左右 ；设置外边距

border: 1px solid black  边框设置

border-collapse:bollapse; 边框合并 该属性用在表格标签中

border-radius:50%;  边框圆角

 

float会出现bug 解决bug 要写一个clearfix::after{

　　　　　　　　　　　　　　　　content:'';

　　　　　　　　　　　　　　　　display:block;

　　　　　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　　　　　　　　　}

然后将clearfix添加到 浮动元素的 父元素上

inherit 继承父级元素

块级元素的高度由其内部文档流高度总和决定 文档流就是文档内部的元素流动方向 内联元素从左往右流动 块级元素从上往下流动

内联元素高度 字体建议高度 ......在font size 比较小的时候 可以用line height控制高度

尽量不用宽度百分百 如果设置宽度百分百 又有设置padding 会出现bug

元素脱离文档流 父元素高度不再包括该元素

span元素的高度设置 不直接写宽高 获得当前宽高   相减得到的数字 写成padding

CSS三角形的写法

div{

　　border:100px solid transparent;

　　width:0px;(宽度必须写 不写就是自适应的)

　　height:0px;(高度可以不写 不写就为0）

　　border-left-color:#E6668A;

　　border-top-width:0px;

}

 

tac+ tab键  = text-align:cent

vat + tab = vartical -align :top