接上面的“CSS01”,我们接着来说一下样式。很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式、外部样式、内部样式、内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式。多个样式可以层叠为一。

1.外部样式表:
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    
2.内部样式表:
    <style type="text/css">...</style>
    
3.内联样式表:
    <p style="...">...</p>
    
4.背景background:
    background-color;  background-image;  background-position;  background-repeat
    background-attachment:scroll/fixed    /* 设置背景是否随着文档而滚动 */

5.文本:
    text-align;    color
    background-color指元素的背景色;color指元素的文本颜色
    
6.字体font:
    font-family字体系列
    font-size字体大小 16px, 1em
    font-weight字体粗细 normal,bold
    
7.链接的四种状态:
    a:link        未被访问的链接
    a:visited    已被访问的链接
    a:hover        鼠标在链接上
    a:active    正在被点击的链接
    hover位于link与visited之后,active位于hover之后

8.列表项<li>的属性list-style:
    list-style-type        list-style-image    list-style-position
    
9.table:
    table {border-collapse:collapse;}
    table,th,td {border:1px solid black;}
    
    width    height    text-align    vertical-align    padding(td与th的内边距)
    border    border-collapse(表格边框合并)    border-spacing(单元格边框距离)

10.轮廓outline:元素周围的一条线,位于元素边框外围,为了突出元素
    outline-color    outline-style    outline-width

CSS02--四种样式、背景、文本、链接状态、表格样式的更多相关文章

  1. Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. 给PDF批量添加文本链接

    为了进一步补充说明文件中的一些重要内容,PDF文件的创建者会为一些文本创建链接,方便阅读者访问相关的网站,获取更多的信息. 我们可以通过使用pdfFactory文本链接功能来实现以上需求,另外,我们还 ...

  3. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  4. ccs中a链接的四种状态

    什么是超链接? 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序.而在一个网页中 ...

  5. CSS控制a标签链接的四种状态

    /*CSS链接的四种状态 *a:link 普通的.未被访问的链接样式 *a:visited 用户已访问的链接样式 *a:hover 鼠标指针位于链接上方样式 *a:active 链接被点击的时刻样式 ...

  6. a链接四种伪类状态切换实现人机交互

    常见的color, font-family, background 等css属性都能够设置链接的样式,a链接的特殊性在于能够根据它们所处的状态来设置它们的样式.a标签与人交互的4个状态属于伪类状态切换 ...

  7. a链接的四种状态

    四种状态:hover.link.active.visible a:link{color:#fff;} a链接初始化 a:hover{color:yellow;} 把鼠标放上去的状况 a:active{ ...

  8. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. CSS链接四种状态注意顺序、UI伪类选择器的顺序

    css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式不起作用的bug.例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了. 正确的顺序: a:link ...

随机推荐

  1. linux 关闭电子邮件传输服务

    1.检查sendmail的哪些runlevel开启: chkconfig --list sendmail

  2. SSM框架整合的详细过程(含每一步的分析及代码)。实质上是SpringMVC与mybatis的整合,应为spring与SpringMVC不需要整合。

    为了更好的学习 springmvc和mybatis整合开发的方法,需要将springmvc和mybatis进行整合. 整合目标:控制层采用springmvc.持久层使用mybatis实现. 1.1 需 ...

  3. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

  4. zip多个分割文件合并

    copy /b 1.z01+1.z02+1.zip 注意:1.zip在最后

  5. Sketch插件新利器——使用Mockplus DS制作设计规范

    Sketch,作为一款专为图标和界面设计而打造的优质矢量绘图工具,也是设计师们制作和完善公司企业内部设计规范系统不可或缺的设计工具. 然而,逐个导出和上传Sketch编辑优化的设计系统资源费时而费力. ...

  6. TOGAF架构培训材料学习总结

        作于一个架构师尤其是企业架构师来说,丰富的理论知识可以帮助他在架构规划及管理过程中站在更高的角度去看待问题,历史发展原因有很多已成体系的架构理论,TOGAF是近年来比较接地气的,受到了政府和银 ...

  7. 马婕 2014MBA专硕考试 报刊选读 3 禽流感考验政府的透明度(转)

    http://blog.sina.com.cn/s/blog_3e66af4601015z0n.html Bird flu cases test government transparency 禽流感 ...

  8. Gym 101201F Illumination (Two-Sat)

    题意:一个n*n的房子,有很多灯,每个格子只能被上下方向照一次.左右方向照一次,每个灯可以选择上下或是左右照,照明长度以自身位置为中心,占用2*r+1个格子.问能否安排一种方案,使所有格子满足条件. ...

  9. 让UITableView的Cell都变成静态的

    UITableView给我们提供了一个非常不错的展示列表的工具.内置了复用机制,其中的Cell按照一般的写法就可以实现服用,不用在Cell滚动的时候每次都创建一个新的.实现了非常好的用户体验.但是,有 ...

  10. 2、Docker和虚拟机的对比

    2.1 虚拟化技术   虚拟机Virtual Machine与容器化技术(代表Docker)都是虚拟化技术,两者的区别在于虚拟化的程度不同.   Docker为代表的容器化技术并不是虚拟机.   虚拟 ...