锐客网

  1. 首页 > it技术 > >

css基础知识

css: 1:浏览器缺省设置 2:外部样式表 3:内部样式表(位于head标签内部) 4:内联样式(位于html元素内部)(最高级)
css 对大小写不敏感,如果涉及到和HTML文档一起工作,class和id对大小写敏感
分组:可以享受相同的声明: p1,p2,p3,p4{color:green}
继承:子类元素继承父类元素一些属性
派生选择器:

后代选择器:h1em选择的是h1后面的所有em元素

子元素选择器: h1>em 选择的是h1下的子元素为em的所有元素
相邻兄弟选择器: h1+em 选择的是和h1有相同的父元素,并且紧跟在h1后面的em元素
id选择器 #red{ }
类选择器 .red{ }
属性选择器 [title]{color:red} [title=wchool]{} [title ~= hello] [图片上传失败...(image-3a178f-1511870088185)]
背景:不能被继承
[图片上传失败...(image-8d1421-1511870088185)]
文本: text-indent: 文本缩进(可以被继承)。 text-align:文本对齐 (left,right,center,justify(两端对齐,文本行的左右两端放在父元素的边界上,调整单词和字母的间隔,使各行的长度相等))
word-spacing:字间隔 改变字(单词)之间的标准间隔 letter-spcing:
与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
text-transform(none,uppercase,lowercase,capitalize(首字母大写)): 处理文本的大小写 h1{text-transform:lowercase}
text_decoration 文本装饰(none,underline(下划线),overline(上划线),line-through(中间加一根线),blink(让文本闪烁))
处理空白 white-space:normal(空白不处理,会合并多余的空白显示成一个空白),pre(不会合并多余的空白,该怎么显示就怎么显示),nowrap(避免换行)
字体系列：font-famility:定义字体系列 font-style:(normal(
常规
),
italic(
斜体
),
oblique(
倾斜体
)
) font-weight设置文本字体的粗细 font-size设置字体大小
a: 链接
a:link{} 普通的,未被访问的链接 a:visited{}已访问的链接 a:hover{}移到链接上 a:active链接被点击上[图片上传失败...(image-8a8244-1511870088184)]
table：表格
轮廓:(outline)
css框模型:详情见盒子模型
定位 position:absolute(生成绝对定位,相对于static以外的第一个父元素进行定位),
fixed(绝对定位,相对于窗口),relative(相对定位,相对于其正常原有的位置定位)static(默认值,没有定位,正常位置)inherit(从父元素继承)

浮动: float:left,right，none,inherit
清除浮动: clear:left(不允许左侧出现浮动),right,both(两侧都不允许),none(两侧可以出现),inherit
段落标签
~
  1. 独立引用
    行内标签
    (简写) 引证 文本内引用
    让父元素包含浮动子元素:
    [图片上传失败...(image-9cc9d3-1511870088184)]
    [图片上传失败...(image-c27cd1-1511870088184)]
    [图片上传失败...(image-a52d20-1511870088184)]
    方法三实现有两种1:2:不添加多余div标签在父元素添加一个类名 clearfix.clearfix:after{ content:"."; display:block; height:0; visiblity:hidden; clear:both

    【css基础知识】}

      推荐阅读


    上一篇：共享单车的置物篮这样设计是不是不太科学?

    下一篇：CentOS7|CentOS7 Linux安装postgreSQL