1.CSS 背景：

css 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

属性 描述
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否及如何重复 
body{

   background-image: url("python.png");

   background-repeat: no-repeat;

}
body{

   background-image: url("python.png");

   background-repeat: no-repeat;

   background-position:center top;

}

2.css3 背景　　

background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域 
body{

   background-image: url("python.png");

   background-repeat: no-repeat;

   background-size：100px 100px;

}

css 样式-文本

CSS 文本属性可定义文本的外观。 通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

属性 描述
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing

字间距

举例

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="style.css" type="text/css">

    </head>

    <body>

        <p>查看颜色</p>

        <h1>标题查看颜色</h1>

    </body>

</html>

style.css文件

body{

   color: aqua;

}

CSS 链接

　　

CSS 链接的四种状态：

a:link --普通的、未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻

举例看一下当鼠标移到；链接附近时的反应

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>css test</title>

    <script src="app.js"></script>

    <link rel="stylesheet" type="text/css" href="test.css">

</head>

<body >

<a href="http://www.shiyanlou.com">shiyanlou</a>

</body>

</html>

test.css

a:link {color:#FF0000;}    /* 未被访问的链接 */

a:visited {color:#00FF00;} /* 已被访问的链接 */

a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}  /* 正在被点击的链接 */

2CSS 设置链接背景颜色

修改对应的属性 background-color

根据上面的链接 ，可以是这样的

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

3 修改链接下划线

link 属性中加入 text-decoration 属性

CSS 列表

CSS 列表允许防止、改变列表标志，或者将图片作为列表项标志。

1 列表类型

而 list-style-type 这个属性我们就可以用来控制标记类型

2 列表项图片

用 list-style-image 属性

ul.img1{list-style-image:url("4.ico")}

ul.img2{list-style-image: url("11.ico")}
<ul class="img1">

    <li>shiyanlou</li>

    <li>shiyanlou</li>

    <li>shiyanlou</li>

    <li>shiyanlou</li>

</ul>

<ul class="img2">

    <li>shiyanlou</li>

    <li>shiyanlou</li>

    <li>shiyanlou</li>

    <li>shiyanlou</li>

</ul>

3  简写列表样式

li {list-style : url(example.gif) square}

CSS 表格

在表格的学习中我们主要了解以下属性：

border-collapse ---设置是否把表格边框合并为单一的边框。

border-spacing ---设置分隔单元格边框的距离。

caption-side --- 设置表格标题的位置。

empty-cells ---设置是否显示表格中的空单元格。

table-layout ---设置显示单元、行和列的算法。

CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：

outline 在一个声明中设置所有的轮廓属性。

outline-color 设置轮廓的颜色。

outline-style 设置轮廓的样式。

outline-width 设置轮廓的宽度。

<p id="p1">shiyanlou is my home</p>

<p id="p2">shiyanlou is my home</p>
#p1{

    outline-color: #FF704D;

    outline-style: groove;

    outline-width: 10px;

}

#p2{

    outline-style: dotted;

    outline-color: green;

    outline-width: 5px;

}

CSS 基本样式的更多相关文章

  1. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  2. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  3. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  6. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  7. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  8. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  9. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  10. CSS Reset样式重置

    为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...

随机推荐

  1. 浏览器支持播放的视频播放格式要求（H5的video标签）

    今天给一个客户上传视频后发现,即使是MP4格式的视频浏览器也打不开,找了好久的问题,最红发现客户视频的编码方式不是h5支持的,折腾了好久,最终确认了浏览器对于MP4编码方式的如下: 浏览器对mp4的编 ...

  2. Unity 5.3.5f1 (32-bit) 的简单塔防游戏

    我以前使用过unity但是第一次写这么全面的塔防小游戏.我以后会陆续的将我跟过的一些项目的心得经验与体会发表出来希望各位能人能够给出评价,我在此感激各位的批评与赞扬.另外我只是一个学生学艺不精,粗制滥 ...

  3. 【SQL*PLUS】常规使用

    登陆SQL*PLUS sqlplus sys/Manager123 as sysdba 创建数据库实例并挂载数据库,此时加载数据库文件,但数据表不能访问. SQL>startup mount; ...

  4. 【Oracle】环境变量与监听文件

    一.环境变量的及其含义: 数据库主目录 ORACLE_HOME=D:\app\Administrator\product\11.2.0\dbhome_1 监听文件所在目录 TNS_ADMIN=D:\a ...

  5. javascript创建数组的所有方式【Array老师】

    1.采用直接量创建 var arr = [];//创建一个空数组 var arr2 = [1,2,3];//创建一个有三个元素的数组 2.采用构造函数创建 a.var arr1 = new Array ...

  6. 我的Markdown的利器——Markdown Here、有道云笔记、iPic

    Markdown逐渐成为大家文章编辑的首选,这里推荐两个比较冷门的Markdown工具. 用什么当做Markdown的主力工具? 网上有很多人推荐的Markdown的工具包括专业的Markdown工具 ...

  7. Mysql分页处理（PageHelper）

    第一次做分页处理(完全不知道分页处理到底要做成什么样?) 理解:其实就是前台页面通过传递不同的参数{1.查询的条件.2.查询页数(pageNum),3每页展现的条数(pageSize)},之后我们(只 ...

  8. Java泛型：泛型类，泛型接口和泛型方法

    转自: https://segmentfault.com/a/1190000002646193 泛型的产生很多缘由是因为 容器类  的创建 泛型类 容器类应该算得上最具重用性的类库之一.先来看一个没有 ...

  9. Hash表分析

    http://baike.baidu.com/link?url=Ua74895uGf1NuPxB4pawmuAXedi427jJvM6aSLh_V1-23ptlMc7XIrr_cylIBn5d

  10. C#后台调用浏览器打开下载连接地址的三种方法

    一.从注册表中读取到本地计算机默认浏览器,然后调用下载. private void button1_Click(object sender, EventArgs e)   {       //从注册表 ...