1，css简介

CSS 用于控制网页的样式和布局。样式定义如何显示html元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

css模块主要是包括：

选择器，框模型，背景边框，文本效果，2d/3d转换，动画，多列布局，用户界面

css主要部分是选择器和声明以及声明对应的值：

2,id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。注意： ID属性不要以数字开头

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#para1    /*为所有id等于para1的元素设置css样式*/

{

    text-align:center;    /*排列居中*/

    color:red;    /*字体是红色*/

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>    /*这个元素会受影响，下一个不会*/

<p>这个段落不受该样式的影响。</p>

</body>

</html>

3，class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

.center    /*为所有class等于center的元素设置格式*/

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>    /*h1和p都会受到影响*/

<p class="center">段落居中。</p>

</body>

</html>

4，插入样式表

方法有三：外部样式表，内部样式表，内联样式。

外部样式表：

可以通过使用一个样式表来改变整个站点的外观，每个页面使用头部的<link>标签链接到样式表，大约相当于import。

<head>

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

</head>

mystyle.css样式表的设置：

hr {color:sienna;}    /*横线的意思，这个标签单个出现*/

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

自己尝试了一下，并没有成功，不知道问题在哪里，学学再回来看。

内部样式表：

把各种样式设置直接放在style里，放在<head>中就可以了，和放在css文件中是一样的

内联样式：

就是不采用内部样式或者外部样式表的环境设置，自己的元素中定义自己的样式，只能在自己的标签上起作用，有点像linux里的虚拟机，也很像class中继承父类但是可以修改某些默认的属性和方法。

多重样式表的优先级如下：

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

但是在具体操作中，内部样式和外部样式哪一个比较后被加载，浏览器就会应用哪个

5，background背景

  • background-color    背景颜色、

    • 十六进制 - 如："#ff0000"
    • rgb(255,0,0)   ,分别对应红绿蓝
    • 颜色名称
  • background-image
<style>

body

{

    background-image:url('paper.gif');    /*优先显示背景图*/

    background-color:#cccccc;    /*没有背景图的时候显示背景颜色*/

}

</style>
  • background-repeat：

    • background-repeat:repeat-x;表示在水平方向平铺，竖直方向改成y，平铺的意思就是图不够大就复制几个彼此连接起来。
    • background-repeat:no-repeat;不平铺，不平铺的时候一般会跟着background-position 属性
  • background-attachment：background-attachment:fixed；图像固定，不会随着页面滚动。scoll会随着滚动。
  • background-position：background-position:right top表示背景图居于右上。

背景可以简写：

像这样：body {background:#ffffff url('img_tree.png') no-repeat right top;}

简写的顺序：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

学到了这里http://www.runoob.com/css/css-background.html

css3基础一的更多相关文章

  1. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  2. css3基础教程十六变形与动画animation

    前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...

  3. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  4. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  5. CSS3基础知识

    CSS3基础 1 样式表的使用 1.内联样式表. 只影响单个元素,常用于标签. <p style="color: aqua;font-size: 20px">This ...

  6. CSS3基础入门03

    CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...

  7. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  8. h5、css3基础

    一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 ...

  9. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  10. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

随机推荐

  1. springboot 新模板 呵呵了

    <html> <head> <title>批处理任务管理</title> <meta name="decorator" con ...

  2. FineUILearning

    一:表单控件的学习: 1(1) <f:PageManager > 将对象引用设置到对象的实例,否则页面无法显示: (2)<Menu></Menu>就是下拉菜单控件 ...

  3. POE 供电

    受电设备(PD)和供电设备(PSE) 标准的五类网线有四对双绞线但是在10M BASE-T和100M BASE-T中只用到其中的两对.IEEE80 2.3af允许两种用法: 1.应用空闲脚供电时4.5 ...

  4. 【强大的Java集成开发工具】MyEclipse 2015 Stable 2.0 for Mac

    [简介] MyEclipse是一款 Mac 上的Java 强大的集成开发工具,今天和大家分享最新的 MyEclipse 2015 Stable 2.0 版本,MyEclipse 2015 基于 Ecl ...

  5. 用Keras搞一个阅读理解机器人

    catalogue . 训练集 . 数据预处理 . 神经网络模型设计(对话集 <-> 问题集) . 神经网络模型设计(问题集 <-> 回答集) . RNN神经网络 . 训练 . ...

  6. Python基础01

    Python基础 1.Python介绍 2.安装 3.Hello World程序 4.变量 5.用户输入 6.表达式if ...else语句 7.表达式for 循环 8.表达式while 循环 9.数 ...

  7. Unity 如何检测鼠标双击事件

    代码如下: void OnGUI(){ Event e=Event.current; )) Debug.Log("用户双击了鼠标"); }

  8. JAVA核心技术I---JAVA基础知识（package和import）

    一:package 所有的Java类都是放置在同一个目录下面的,因此类之间的相互调用无需显式声明调用. –同一个目录下,两个类的名字不能相同 –文件过多,查找和修改都不易,且容易出 Java支持多个目 ...

  9. java项目反编译获得源码

    经常能找到一些 过时的 项目源码,但是还是有研究价值的.但是肯定是不会给你源码的. 下面介绍怎么反编译: 1.在项目中找到classes这个文件夹,这个就是编译过的文件. 2.下载反编译工具JD-GU ...

  10. HDU 6362(求椭圆中矩形周长的期望 数学)

    题意是给定一个椭圆标准方程的a,b(椭圆的长半轴长和短半轴长),在[0,b]内取一个数,则过点(0,b)且平行于x轴的直线与椭圆交于两点,再将此两点关于x轴做对称点,顺次连接此四点构成矩形,求出这些矩 ...