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