CSS基础大全

CSS为网页添加样式术语解释h1{color:red;background-color:lightblue;text-align:center}css规则选择器声明块选择器确定样式的范围即选择元素元素选择器直接书写要选中的元素{}所有同名元素ID选择器选择对应ID的元素给同名元素加id属性#类选择器如class属性类.class里面的类名{}如.red{color:red}通配符选择器*表示所有元素都被选中属性选择器[href]{}表示选中具有这个属性的元素[hrefhujehi]表示选中属性值为hujehi的元素[href~value]表示该属性里里面的元素以空格分离且至少有一个满足[href|value]表示以value为前缀[href^value]表示属性值以value开头[href$vallue]表示属性值以value结尾[href*value]表示属性值包含value元素伪类选择器选择某些元素的某种状态a:hover{colorred}表示选中鼠标悬停时的元素hover:鼠标悬停状态 3active激活状态鼠标按下的状态 4link:超链接未访问的状态 1visited:超链接访问过的状态 2love hate伪元素选择器如span::before{}beforeaftercontent:“《”更多的伪类选择器first-child选中第一个子元素如a:first-child:表示选中a元素且a元素必须是第一个子元素a:first-of-type:表示选中子元素中第一个a元素last-child选中最后一个子元素同上nth-child选中指定的那个子元素odd等同于2n-1even等同于2nnth-of-type选中指定的子元素里面第几个子元素更多的伪元素选择器first-letter选中第一个文字或者字母first-line选中元素中第一行上的文字selection选中被用户框选中的样式选择器的组合并且 p.red表示必须带有p元素且有red后代元素——空格 .red li{}表示class为red的li元素被选中子元素——相邻兄弟元素—— 兄弟元素—— ~后面出现的所有兄弟元素选择器的并列多个选择器用逗号分隔语法糖声明块出现在{}中其中包含很多声明属性每一个声明属性表达了某一方面的样式。css代码书写位置内部样式表书写在style元素中一般该元素在head元素中便于浏览器阅读。内联样式表写在元素里面的style属性中外部样式表[推荐]将样式书写到独立的css文件中。在head里面使用一个新的元素link只用来链接外部文件加href属性“路径相对路径和绝对路径”推荐原因可以解决页面样式重复的问题有利于浏览器缓存提高反应速度有利于代码分离更容易阅读和维护层叠声明冲突同一个样式多次应到到同一个元素层叠解决声明冲突的过程浏览器自动处理权重计算比较重要性重要性从高到低作者样式开发者书写的样式1作者样式中的important样式important2作者样式中的普通样式3浏览器的默认样式比较特殊性看选择器选择器选择的元素越窄越特殊具体规则通过选择器计算出一个四位数千位内联样式记作1否则记0百位将选择器中所有id选择器的数量十位类选择器伪类选择器属性选择器的数量个位元素选择器伪元素选择器的数量比较源次序代码书写靠后的胜出目的覆盖浏览器本来的样式常见的重置样式表normalize.css,reset.css,meyer.css爱恨法则继承子元素会继承父元素的某些属性通常会继承文字有关的属性值的计算过程一个元素一个元素依次渲染顺序按照页面文档的树型结构渲染每个元素的前提条件是该元素的所有属性都有值一个元素从所有属性都没有值到所有属性都有值这个计算过程叫做属性值的计算过程确定声明值参考样式表中没有冲突的声明作为css的属性值层叠冲突对样式表有冲突的声明使用层叠规则确定css的属性使用继承对依然没有值的属性若可以继承则继承父元素的属性值强制继承用inherit使用默认值对依然没有值的属性使用默认值initial默认特殊的俩个css属性值inherit强制继承inital强制默认值盒模型box盒子每个元素都会在页面中生成一个矩形区域盒子盒子类型行盒display等于inline的元素块盒display等于block的元素行盒在页面中不换行块盒独占一行display默认值为inline即行盒浏览器默认样式表设置的块盒容器元素h1~h6p常见的行盒spanaimgvideoaudio盒子的组成部分无论行盒还是块盒内容contentwidthheight盒子内容的宽高填充padding盒子边框到盒子内容的距离padding-leftpadding-rightpadding-top,padding-bottompadding:简写属性上右下左边框border边框边框样式边框宽度边框颜色border-styleborder-widthborder-color默认为字体颜色均为简写属性也叫速写属性borderwsc边框区填充区内容区边框盒“border-box”外边距margin边框到其他盒子的距离盒模型的应用改变宽高范围默认情况下width和height设置的内容的宽高衡量设计稿尺寸的时候往往使用的是边框盒但是widthheight设置的是内容盒box-sizingcontent-box默认值border-box宽高则成为边框的宽高改变背景覆盖范围默认情况背景覆盖边框盒blackground-clip溢出处理overflow控制内容溢出边框盒的处理方式默认可见hiden隐藏scroll滚动xyauto自动断词规则work-break默认normalCJK字符文字间截断非CJK字符单词位置截断break-all表示所有文字都在文字处截断keep-all表示在单词之间截断空白处理white-space:nowrap不换行overflowhiddentext-overflowellipsis······white-spacepre块级元素行盒的盒模型显著特点盒子沿着内容延伸行盒不能设置宽高若改变要用字体大小间接调整内边距水平方向有效垂直方向只影响背景行块盒displayinline-block的盒子不独占一行但盒模型中所有都有效喜欢做分页. pager a{border:1px solid #ele2e3;text-decoration:none;color:#38f;width:34px;height:34px;display:inline-block;text-align:center;line-height:34px;}.paper a:hover{border-color:1px solid #38f;background-color:red;background:initial;}空白折叠发生在行盒内部或者行盒之间可替换元素和非可替换元素大部分元素页面上显示的结果取决于元素内容称为非可替换元素少部分元素页面上现实的结果取决于元素属性称为可替换元素可替换元素imgvideoaudio绝大部分可替换元素均为行盒可替换元素类似于行块盒所有属性均有效图片中object-fitcontain不打破原有比例fill默认取值不保持比例cover保持原有比例且充满宽度高度若设置一个另一个按比例增加