背景

  • background-color

    • rgb(255,0,0，1)      最后一个值表示透明度，范围是 0--1
  • background-image
    • 默认平铺重复显示
  • background-repeat
    • 在页面的水平或者垂直方向平铺
  • background-attachment
    • 是否固定或者随着页面的其余部分滚动
  • background-position
    • 位置

文本

颜色

body {color:red;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

对其方式

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

文本修饰

a {text-decoration:none;}  //消除链接的下划线

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

文本转换（大小写）

缩进

字体

系列(family)

样式（粗体，斜体）

大小

  • 像素
  • em
  • 百分比

粗细

链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

注意：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

——鼠标放置——>    

<style>

a:link,a:visited

{

    display:block;

    font-weight:bold;

    color:#FFFFFF;

    background-color:#98bf21;

    width:120px;

    text-align:center;

    padding:4px;

    text-decoration:none;

}

a:hover,a:active

{

    background-color:#7A991A;

}

</style>

</head>

<body>

<a href="/css/" target="_blank">这是一个链接</a>

</body>

列表样式

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

不同的浏览器中，图像的位置可能不一样————>  浏览器兼容性解决方案

表格

边框

折叠边框

宽度高度

对齐方式

颜色

控制空格之间的边框

CSS3——背景 文本 字体 链接 列表样式 表格的更多相关文章

  1. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

  2. css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）

    一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...

  3. CSS02--四种样式、背景、文本、链接状态、表格样式

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

  4. CSS的相关知识——背景，超链接，列表，表格，奇偶选择器

    接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色   rgb函数设置 2.background-image   背景图片  url(“logo.jp ...

  5. css3文字与字体的相关样式

    给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...

  6. css3背景及字体渐变

    1.背景渐变: .linear { width: 100%; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,sta ...

  7. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...

  8. css3-2 CSS3选择器和文本字体样式

    css3-2   CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...

  9. 第六篇 CSS样式 背景、背景图、文本、链接

    元素背景.文本(字体)样式.链接 这里我们只学习常用的一些,更多的扩展就要同学们自己去了解,或者下方评论. 这里我们为了简便,用的是CSS的内嵌形式.   元素背景: 我们写模块的时候,有的时候为了区 ...

随机推荐

  1. (转) Linux权限管理(基本权限、默认权限)

    一.文件基本权限 1-1.基本权限的修改 -rw-r--r--  - 第一个"-"表示文件类型(- 文件,d 目录,l 软链接文件)  - rw-       r--       ...

  2. Awkward Response AtCoder - 2656 ( 二分+交互题)

    Problem Statement This is an interactive task. Snuke has a favorite positive integer, N. You can ask ...

  3. 第02课：启动GDB调试

    使用GDB调试程序一般有三种方式: gdb filename gdb attach pid dgb filename corename 也对应这本节课的核心内容: 直接调试目标程序 附加进程 调试co ...

  4. Ubuntu下Cmake编译C++程序Helloworld

    1.首选新建工程目录 mkdir helloworld 2.新建文件目录 cd helloworld mkdir bin mkdir lib mkdir src mkdir include mkdir ...

  5. angularjs 结构的两种写法（2）

    app.js里面 route.js 本项目中的路由写法,路由的意思是:对应的跳转页面路径,比如此处当路由是member.user-statisttic时,是会跳转到url:http://.../use ...

  6. python中导入from appium import webdriver时报错：ModuleNotFoundError: No module named 'appium'

    1.检查一下有没有安装Appium-Python-Client,执行语句:pip install Appium-Python-Client进行安装 2.安装后,出现ModuleNotFoundErro ...

  7. 界面开发工具集Telerik UI for ASP.NET AJAX发布R2 2019

    Telerik UI for ASP.NET AJAX拥有构建ASP.NET AJAX和SharePoint应用程序的80+控件,将为任何浏览器和设备构建Web Forms应用程序的时间缩短一半.Te ...

  8. 上传base64图片到七牛云前端遇到的坑

    介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒.) 七牛云官方文档如下 https://developer.qiniu.com/kodo/k ...

  9. python 字符词串和字符串的转换

    type(' i am ') str type(''.join('i am')) str ''.join('sda sadaa') 'sda sadaa' q=str('i am the teache ...

  10. Email 发送

    namespace 99999 { /// <summary> /// Common interfaces to connect mail server to process e-mail ...