近期在学习牛腩的时候遇到了网页的制作。挺新奇的。其中涉及到了有关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. OCC 矩阵变换

    在OpenCADCADE中, 通过gp_Trsf类来进行矩阵变换操作, 采用矩阵在左的方式: 新点 = 变换矩阵 * 点 基本原理如下: //! Defines a non-persistent tr ...

  2. C#中的流_字节_字符_字符串之间的相互转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  3. jqGrid 排序

    jqgrid 排序: 1.前台和后台交互依靠的是index属性,index属性没有设置情况下获取name属性 2.如下状态是经过处理显示的中文,name属性为StatusStr,没有index属性的情 ...

  4. ridis 集群配置

    ./redis-cli -h 192.168.106.128 -p  6379 redis 1.ping 2.set str1 abc    get str1 3.  mkdir ../redis-c ...

  5. IE浏览器 ajax传参数值为中文时出现乱码的解决方案

    找了很多方法,发现就这个方法简单.直接.方便,直接推荐哦! 在汉字的位置加个保护措施:encodeURIComponent(parentid) 举个栗子>>> $.ajax({    ...

  6. JavaScript实现鼠标效果

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  7. R 连接DB2数据库,并制作词图

    #写在前面的话:此教程主要是用R连接了DB2数据库,并进行文本分析,制作了词图 #教程为markdown编写 ---title: "网站留言分析"output: html_docu ...

  8. 【Oracle】搭建DG(DataGuard)

    操作系统:OEL 5.6 Oracle 版本:11.2.0.4.0 DataGuard规划说明 DATABASE_ROLE DB_NAME IPADDR Primary lgr 192.168.10. ...

  9. Docker-compose Setup for Self-hosting Development & Deployment Tools

    Last week I wrote about my self-hosted Sentry install in 3 Docker containers. This week I want to br ...

  10. aspnet_regiis加密文件提示路径中具有非法字符

    加密结果受当前目录影响,不知道是不是哪里操作错误,mark.   Web.config文件位置:E:\Web\Surgery 加密成功,上图命令最后有个".",表示web.conf ...