首页 > 技术文章 > css 学习记录

Griffith 原文

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

      style标签

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

      import url(../);、

css语法   选择器 {属性:值;}

CSS属性

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

设置字体的样式 

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

background-color:设置背景色 

设置宽度

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;

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

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

  border-left-color:#E6668A;

  border-top-0px;

}

tac+ tab键  = text-align:cent

vat + tab = vartical -align :top

推荐阅读