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的更多相关文章

  1. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  2. css知多少（2）——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  3. 开始学习css

    今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...

  4. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  5. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的．因为知道一些基本的理论性的东西．CSS说它容易是因为它的知识点有限．说它难学就在于各浏览器对CSS的支持程度不同．如何深入学习我给出以下几点见意 ...

  6. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  7. 学习CSS的思路（转）

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  8. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  9. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  10. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

随机推荐

  1. JS实现“双色球”

    需求: 双色球玩法简单介绍: “双色球”彩票投注区分为红色球号码区和蓝色球号码区.每注投注号码由6个红色球号码和1个蓝色球号码组成.红色球号码从1--33中选择:蓝色球号码从1--16中选择.程序要求 ...

  2. 网络防火墙之iptables的前世今生和归宿

    任何事物都有一个从无到有,再归于无的过程.是的,我这里用了一个绝对词:任何. 防火墙 在计算机领域中,防火墙(英文:Firewall)是一项协助确保信息安全的设备,会依照特定的规则,允许或是限制传输的 ...

  3. Python：函数的命名空间、作用域与闭合函数

    1,参数陷阱 如果默认参数的只是一个可变数据类型,那么每一次调用的时候,如果不传值就共用这个数据类型的资源. 2,三元运算 c=a if a>b else b#如果a>b返回a,否则,返回 ...

  4. 【洛谷P2831】[NOIP2016]愤怒的小鸟

    愤怒的小鸟 题目链接 本来是刷状压DP的,然而不会.. 搜索是比较好想的,直接dfs就行了 我们可以知道两只猪确定一条抛物线 依次处理每一只猪,有以下几种方法: 1.先看已经建立的抛物线是否能打到这只 ...

  5. 【luogu P3369 普通平衡树（Treap/SBT）】 模板 Splay

    题目链接:https://www.luogu.org/problemnew/show/P3369 #include <cstdio> #include <algorithm> ...

  6. 【luogu P3379 最近公共祖先】 模板

    题目链接:https://www.luogu.org/problemnew/show/P3379 倍增求lca,先存下板子,留个坑以后再填讲解. in 5 5 43 12 45 11 42 43 23 ...

  7. papers-06-07

    A simple neural network module for relational reasoning Visual Interaction Networks 今天被这两篇文章的工作刷屏,说实 ...

  8. 什么是OR映射？

    实体对象采用的是面向对象技术,它表达实体的关系是用关联.继承.而RDBMS 是遵循关系的范式理论构建的二维表,主要采用主键和外键的关联方式.因此,对象模型与数据库模型是不一致的,需要在两者之间进行变换 ...

  9. 【SQL】Oracle的交集、并集、差集

    假设有表tableA.tableB,他们都有字段id和name 交集:INTERSECT (适用于两个结果集) select a.id, a.name from tableA a INTERSECT ...

  10. 序列(Sequence)创建、使用、修改和删除

    序列(Sequence)是用来生成连续的整数数据的对象.序列常常用来作为主键中增长列,序列中的可以升序生成,也可以降序生成. 语法结构:创建序列 CREATE SEQUENCE sequence_na ...