2018.3.10 CSS样式应用指南
这几天补了一下css的知识,然后想起自己前端时间的学习,真的是囫囵吞枣,也许有和我一样的人,所以手码了一点书上个人觉得有用的知识,从CSS选择器开始 到伪类 版式 颜色 背景属性 文本属性 盒子属性 列表样式 CSS定位 其他css属性 今天到背景属性 余下的明天会更 知识来源于《HTML5和样式应用指南》这本很棒的书 学校图书馆借到的 网上可能也有电子版吧=-= 建议看一看
然后 希望有初学者/自学者啥的看见的话 与君共勉 希望你们也能坚持下去
css选择器:
*{ } 全局设置;#{ }id选择器(唯一性)
.{ }class选择器(可重用)
任意多个选择器表达式可以组合到一个单个表达式里 用逗号隔开:
h1,h2,h3,h4,h5,h6{ font-family: verdana;}
可以根据一个元素是另一个元素的子孙的状态来选择它,只需空格分隔开2个元素名即可:
blockqute a{ color: red;}/*将一个块引用中的所有链接的颜色都设置为红色*/
要选择一个父元素的第一代孩子,使用如下语法:
body > div { margin-top: 0px;margin-bottom:36px;}/*这只会对页面的主体中的顶级div应用边距设置,而不会对嵌套在其他元素中的div应用*/
可以根据文档元素是否拥有一个特定的属性来选择它,或者根据该元素是否带有一个特定值的属性来选择它:
a[name] {color:cyan;}
要通过一个属性值来选择一个HTML元素 在属性名称后面跟着一个等号和值:
input[type="text"] {background-color:black;}
伪类和伪元素:
伪类最常见的应用是检测和样式化锚点元素所创建的链接的各种状态.
a:link { color:blue;}根据链接是否处于常规状态来设置超链接文本的颜色;
a:hover { color:blue;}根据鼠标是否悬停在链接上来设置超链接文本的颜色;
a:active {color:blue;}根据链接是否是激活的来设置超链接文本的颜色;
a:visited {color:blue;}根据链接是否处于已访问状态来设置超链接文本的颜色;
所有元素都可以拥有hover状态,理论上别的元素也可以拥有其他三个状态,但是css中未定义.
当元素获得焦点时,focus伪类以类似的方式来选择元素.这句话通常适用于input和其他表单元素:
input[type="text"]:focus {background-color: #ffff99;}
如果一个元素是其父元素的第一个孩子,first-child伪类用来选择该元素:
li:first-child { background-color:blue;}
/*这行变色*/
伪元素类似于伪类,但是它是选择元素的一部分而不是整个元素.
div p:first-child:first-letter {font-size: 300%; color:red}/*div中的第一段的第一个字符放大3倍*/
before和after伪元素仅仅分别选择元素的前面和后面,允许编写者在这些位置插入内容:
p.joke:after { content:url(../images/luoma.jpg);}
缩写表示法:
font:
或者font:
background-color属性负责控制背景色,它使用与前景color属性相同的颜色表示法.
背景颜色填充了元素所占用的所有区域,包括补白和扩展到边框的外围边缘.可以使用关键字transparent(取消该元素所拥有的任何背景颜色并允许父元素的背景颜色透过它显示过来)和inherit(使用与元素的父元素相同的背景颜色)作为值.
css中的URL没有使用引号表示,它是相对于样式表的位置,而不是HTML文件的位置.background-image属性可以使用关键字值none,从之前的设置中删除背景图像.
background-position属性控制背景图像最初相对于元素定位在哪里.用关键字left center right top bottom,来相对于元素的左右上下边界来定位背景图像.相对于容器的中心来定位背景图像,以便让背景图像的中心固定在容器的中心,即便当包含元素动态调整大小的时候也是如此.
background-attachment:控制背景图像如何移动来响应前景内容的滚动,默认值为scroll,背景图会随着前景内容而滚动.fixed值意味着图像处于相对文档的窗口的固定位置,针对所有滚动的元素保持对齐,而不只是针对文档主体.
缩写表示法:background:color image repeat attachment position