CSS教程

菜鸟教程

通过使用CSS我们可以大大提升网页开发的工作效率

什么是CSS?

CSS指层叠样式表(Cascading Style Sheets)
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一

CSS语法

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明

CSS Id和Class

HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义.

#para{

    text-align: center;

    color: red;

}

class选择器以一个点"."号显示:

.center{

    text-align: center;

}

CSS创建

插入样式表的方法有三种

外部样式表
内部样式表
内联样式表

外部样式表

<head>

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

</head>

内部样式表

<head>

    <style>

        hr {

            color: red;

        }

        p {

            margin-left: 20px;

        }

    </style>

</head>

内联样式

<p style="color: red;">这是一个段落</p>

CSS背景

CSS属性定义背景效果

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

背景颜色

body {

    background-color: #33eeee;

}

颜色值定义:

十六进制如: "#eeeeee"
RGB 如: "rgb(244, 0, 0)"
颜色名称如: "red"

背景图像

body {

    background-image: url("paper.gif");

}

水平或垂直平铺

body{

    backgrond-image: url("pag.jpg");

    backgrond-repeat: repeat-x;

}

设置定位与不平铺

body{

    background-image: url("img.jpg");

    background-repeat: no-repeat;

}

可以利用background-position属性改变图像在背景中的位置

body{

    background-image: url("img.jpg");

    background-repeat: no-repeat;

    background-position: right top;

}

简写属性

body{

    background: #ffffff url("img.jpg") no-repeat right top;

}

顺序为:

background-color 背景颜色
background-image 背景图像
background-repeat 背景如何重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 设置图像的起始位置

CSS文本格式

属性	描述
color	设置文本颜色
direction	文本方向
letter-spacing	字符间距
line-height	行高
text-align	对齐元素中的文本
text-desoration	文本添加修饰
text-indent	缩进文本的首行
text-shadow	文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置子间距

CSS字体

属性	描述
font	在一个声明中设置所有的字体属性
font-famail	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font=variant	让小型大写字体或正常字体显示文本
font-weight	指定字体的粗细

CSS链接

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

CSS盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容

不同部分的说明:

margin(外边距) 清除边框外的区域,外边距是透明的.
border(边框) 围绕在内边距和内容外的边框
padding(内边距) 清除内容周围的区域,内边距是透明的.
content(内容) 盒子的内容,显示文本和图像

学习CSS的更多相关文章

学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
css知多少（2）——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1．一个段子开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的．因为知道一些基本的理论性的东西．CSS说它容易是因为它的知识点有限．说它难学就在于各浏览器对CSS的支持程度不同．如何深入学习我给出以下几点见意 ...
【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
学习CSS的思路（转）
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1．一个段子开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

随机推荐

爬虫入门之Requests模块学习(四)
1 Requests模块解析 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用 Requests 继承了urllib2的所有特性.Requests支持HTTP连接保 ...
tampermonkey利用@require调用本地脚本的方法
比如Tampermonkey上的有个用户脚本a,本来的方法是: 1.直接在Tampermonkey上编辑js,适合高手,但是本人不清楚脚本如何同步,况且不熟练js,在Tampermonkey上写太难了 ...
x86 分页机制——虚拟地址到物理地址寻址
x86下的分页机制有一个特点:PAE模式 PAE模式物理地址扩展,是基于x86 的服务器的一种功能,它使运行 Windows Server 2003, Enterprise Edition 和 Wi ...
FFT算法实现——基于GPU的基2快速傅里叶变换
最近做一个东西,要用到快速傅里叶变换,抱着蛋疼的心态,自己尝试写了一下,遇到一些问题. 首先看一下什么叫做快速傅里叶变换(FFT)(来自Wiki): 快速傅里叶变换(英语:Fast Fourier T ...
Fiddler实现IOS手机抓取https报文
如何设置代理访问内网进而抓取手机的Https报文进行分析定位. 准备工作: 1.PC上连接好VPN 2.管理员方式打开Fiddler工具开搞: 一.设置Fiddler 1.打开Tools->O ...
C语言条件编译（if ）
#include <stdio.h> #define NUM -1 int main(int argc, const char * argv[]) { #if NUM > 0 pri ...
Android（java）学习笔记12：线程的状态转换图以及常见执行情况
1. 线程的状态转换图以及常见执行情况: 2. 线程状态类型: (1)新建状态(New):新创建了一个线程对象.(2)就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start() ...
POJ 1379 模拟退火
模拟退火算法,很久之前就写过一篇文章了.双倍经验题(POJ 2420) 题意: 在一个矩形区域内,求一个点的距离到所有点的距离最短的那个,最大. 这个题意,很像二分定义,但是毫无思路,也不能暴力枚举, ...
两个list相加
>>> a = ['] >>> b = ['] >>> a+b ['] >>> a = [1,2] >>> b ...
shell命令查看某文件夹下的文件个数
shell命令查看某文件夹下的文件个数 2010-06-25 17:05:15| 分类: shell |字号订阅 1.查看某文件夹下文件的个数: ls -l |grep "^-&qu ...

学习CSS