近期在学习牛腩的时候遇到了网页的制作。挺新奇的。其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间。找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容。有关CSS的基础知识详见下链接。

CSS基础知识

下面是对CSS理解的导图

通过上图我们也发现。CSS也非常难。也easy。easy是说。学起来非常快就能够上手,这中语言简单易懂,仅仅要你具备小学英语的知识量就能够了。

困难是在指学好它并不easy,由于它须要你耐心。就好比我们对word文档的排版。哪里须要主体鲜明一点。哪里须要着重突出一下,哪里须要加一下背景图片,这都须要考虑的。事实上就是美工的工作。学习CSS也非常杂,为何会这么说呢。由于须要与PS、photoshop联系起来。

下面是一些常见的属性设置

文字样式

    line-height:行间距

    letter-spacing:字间距

    text-decoration:标题处keyword的下划线

    font-style:设置字体风格

    font-weight:字体粗细

    border-style:边框样式

    border-width:边框粗细

    vertical-align:图片相对于文字对齐方式

背景图片

    background-image:加入背景图片

    background-repeat:背景图片的反复方式

    background-position:背景图片的位置

    background-attachment:固定背景图片

CSS设置表格与表单的样式

    border-collapse:边框重叠

    list-style-type:用来清除列表前面的标记

设置页面和浏览器的元素

    <a href=""></a>:加入超链接

    a:link:超链接的普通样式

    a:visited:被点击过的超链接的样式

    a:hover:鼠标经过超链接上的样式

    a:active:在超链接上单击时

    cursor:设置鼠标的显示样式

用CSS制作有用的菜单

    <ul></ul>:有用列表

    list-style-type:项目列表的标头

    list-type-image:项目列表能够设置为图片

    display:block :块级显示

看看这些属性是不是so easy呢? 仅仅要稍微的熟悉一下。你就能够称的上是半个CSS专家了。

从导图中我们也可以看到,假设可以把CSS布局学懂的话。就算成功一半多了,所下面篇博客将会讲CSS中的盒子模型

CSS初步理解的更多相关文章

  1. javascript 原型及原型链的初步理解

    最近折腾了好久,终于是把js里面的原型和原型链做了个初步的理解: 在这里,我打个比喻: 我(child),我妈constructor(构造函数)生了我:别人问我老妈跟谁生的我,于是此时我妈会指向我爸爸 ...

  2. Spring学习笔记--环境搭建和初步理解IOC

    Spring框架是一个轻量级的框架,不依赖容器就能够运行,像重量级的框架EJB框架就必须运行在JBoss等支持EJB的容器中,核心思想是IOC,AOP,Spring能够协同Struts,hiberna ...

  3. Graph Cuts初步理解

    一些知识点的初步理解_8(Graph Cuts,ing...) Graph cuts是一种十分有用和流行的能量优化算法,在计算机视觉领域普遍应用于前背景分割(Image segmentation).立 ...

  4. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  5. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  6. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  7. 非常易于理解‘类'与'对象’ 间 属性 引用关系,暨《Python 中的引用和类属性的初步理解》读后感

    关键字:名称,名称空间,引用,指针,指针类型的指针(即指向指针的指针) 我读完后的理解总结: 1. 我们知道,python中的变量的赋值操作,变量其实就是一个名称name,赋值就是将name引用到一个 ...

  8. springBoot(1)---springboot初步理解

    springboot初步理解 在没有用SpringBoot之前,我们用spring和springMVC框架,但是你要做很多比如: (1)配置web.xml,加载spring和spring mvc 2) ...

  9. Mysql加锁过程详解(7)-初步理解MySQL的gap锁

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...

随机推荐

  1. hihoCoder-1633 ACM-ICPC北京赛区2017 G.Liaoning Ship’s Voyage 线段与三角形规范相交

    题面 题意:给你一个20*20的地图,起点(0,0),终点(n-1,n-1),有障碍的点为‘#’,每次可以向8个方向走一步,还给了一个三角形,除了障碍以外,到这8个方向上的点的线段如果没有与三角形相交 ...

  2. ASP.NET Core Web API下事件驱动型架构的实现

    mvp 原创博文:http://www.cnblogs.com/daxnet/p/8082694.html

  3. BZOJ 4491 分块OR差分+线段树

    思路: (是不是只有我作大死写了个分块) up[i][j]表示从第i块开始到第j个位置 上升的最大值 down[i][j]同理 left_up[i]表示从第i块开始能够上升的最长长度 left_dow ...

  4. 树莓派-基于aria2实现离线下载

    安装aria2 aria2是linux下的一个下载工具,它支持http.bt种子.磁力链接三种方式下载 sudo apt-get install aria2 配置aria2 aria2支持命令参数,也 ...

  5. asp.net 字符串过滤

    /// <summary> /// 去除HTML标记 /// </summary> /// <param name="Htmlstring">包 ...

  6. MVC中使用UpdateModel获取接口参数

    废话少说,直接上代码: 模型类定义: public class RequestModel { public string Name { get; set; } public float Age { g ...

  7. Android线程间异步通信机制源码分析

    本文首先从整体架构分析了Android整个线程间消息传递机制,然后从源码角度介绍了各个组件的作用和完成的任务.文中并未对基础概念进行介绍,关于threadLacal和垃圾回收等等机制请自行研究. 基础 ...

  8. [hihocoder][Offer收割]编程练习赛45

    互补二元组 Xi + Xj = Yi + Yj等价于Xi - Yi + Xj - Yj = 0 ,对每个二元组计算其x与y的差,每次加上其相反数的个数. #pragma comment(linker, ...

  9. Data内置对象

    1.内置对象 Date 日期对象 2.创建日期对象 2.1 根据当前的系统时间来创建日期对象. var date1 = new Date(); //a.输出日期对象的信息 console.log(da ...

  10. kinect:0x80080014

    changed to 0x83010014 aka E_NUI_NOTCONNECTED? kinect识别问题,重启一下,就可以了.