css基础知识

css: 1:浏览器缺省设置 2:外部样式表 3:内部样式表(位于head标签内部) 4:内联样式(位于html元素内部)(最高级)

css 对大小写不敏感,如果涉及到和HTML文档一起工作,class和id对大小写敏感

分组:可以享受相同的声明: p1,p2,p3,p4{color:green}

继承:子类元素继承父类元素一些属性

派生选择器:

后代选择器:         h1   em  选择的是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基础知识)