CSS初步理解

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

CSS基础知识

以下是对CSS理解的导图

通过上图我们也发现,CSS也很难,也容易。容易是说,学起来很快就可以上手,这中语言简单易懂,只要你具备小学英语的知识量就可以了。困难是在指学好它并不容易,因为它需要你耐心。就好比我们对word文档的排版,哪里需要主体鲜明一点,哪里需要着重突出一下,哪里需要加一下背景图片,这都需要考虑的,其实就是美工的工作。学习CSS也很杂,为何会这么说呢,因为需要与PS、photoshop联系起来。

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

文字样式

line-height:行间距

letter-spacing:字间距

text-decoration:标题处关键字的下划线

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初步理解,布布扣,bubuko.com

时间: 2024-10-25 08:02:11

CSS初步理解的相关文章

CSS (一)初步理解

通过牛腩新闻发布系统,接触了CSS,也感受到了它在做Web前台开发时简单方便易更改的优点. 尤其是后边对于CSS盒子的学习和认识,更加让人体会到网页设计和很多事物一样蕴含着深刻的思想和设计技巧,融于生活,表现生活. 本篇文章主要是对CSS内容概况的一些个人理解. CSS,即级联样式表.它真正做到了使网页表现层与内容分离的一种样式设计语言,做到了代码控制界面,简单易修改的解耦效果. 通过CSS,我们可以精确控制对象位置精确到像素级,还可以随心设计对象样式和风格,达到最优的美观度. 下面是CSS的一

CSS深入理解之line-height

以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离. 定义三问: 什么是基线? 为何是基线? 需要两行? 如图红色线即为基线 基线乃*线定义之根本! 基线的扩展知识,稍作了解.如图: 第3个问题,一行文字难道就没有行高吗?非也,一行文字也是有行高的,两行的定义已经决定了一行的表现! 所以,行高表现为,如下图:(如果试想行高为0,那么两行文字将重合) 问题:为何line-height可以让单行文本垂直居中?

对于中国剩余定理(CRT)的初步理解

以前觉得用中国剩余定理来求同余方程组很鸡肋,因为可以用拓展欧几里得算法来构造出一种更加强大(可以处理取模的数(默认为mi)不互质的情况)的算法. 今天查了点资料,发现我太天真了. 首先讲讲中国剩余定理: 即 : x ≡ a[i] (mod m[i]) 1<= i <= r (m[i] 两两互质) 求这个同余方程组可以快速算: x = ∑M/m[i] * Inv(M/m[i], m[i]) * a[i] (mod M) 其中M = m[1]*m[2]*m[3]...m[r]  , Inv(x,

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

Spring框架是一个轻量级的框架,不依赖容器就能够运行,像重量级的框架EJB框架就必须运行在JBoss等支持EJB的容器中,核心思想是IOC,AOP,Spring能够协同Struts,hibernate等其他众多的框架. 下面介绍环境的搭建,首先下载好spring的完整包,我下载的是4.2.5版本的,在elipse中,新建java项目: 1,导入核心jar包: 2.在src目录下,创建spring配置文件(名称可以自定义,一般写为beans.xml): <?xml version="1.

初步理解socket

近期研究下socket,发现自己还是有非常多不明确的地方,索性沉下心来,从最基础開始学习,開始看起,如今对自己的学习做下小小总结,以便和大家分享,如有谬误,敬请指正. 原创文章,转载请注明出处:http://blog.csdn.net/jessonlv TCP/IP 在学习socket之前,先回想下TCP/IP协议. TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协议,定义了主机怎样连入因特网及数据怎样再它们之间

通过阅读Oracle Enterprise Asset Management User Guide,我对Oracle eAM的初步理解

通过阅读Oracle Enterprise Asset Management User Guide,我对Oracle eAM的初步理解 Oracle eAM是Oracle EBS套件的一部分,解决资产密集的组织的综合的和常规的设备维护需求.在设备层面追踪所有的维护成本和工作历史,来衡量绩效和最优化维护操作. eAM为组织提供了工具给资产和可重建的库存物料创建和应用维护程序.eAM让用户可以最大化地计划和安排维护活动,同时对组织的运作或生产中断最小.重要的是,它能提高资源有效性,增强维护质量,跟踪

初步理解require.js模块化编程

初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程,这标志”Javascript模块化编程”正式诞生. 在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限:但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.j

关于THINKPHP5模型关联的初步理解

初步理解的意思是,使用最常用的关联模型,然后可以正常运行 还是打个比方 文章表  和文章分类表 一个文章分类可以有多个文章  所以  文章分类模型和文章建立 hasMany的关联 而文章和文章分类表则建立belongto关联 注:belongto和hasMany第二个参数外键的定义请仔细查看教程 关联建立后,可以使用with所以查询关联,with是预载入的时候最常用 比如要查找文章的列表,想顺便展示文章的分类名 $list=Article::with('articleType')->where(

【Oracle】 oracle数据库的并发初步理解

先从一个列子来说:我们经常听到说某某网站的每天访问用户数有几十,几千,几百万甚至上千万,同时在线用户数有几万,几十万的. 从这个列子我们来分析,数据库并发的概念. 首先,这儿有两个名词,一个是每天访问的用户数,一个是同时在线用户数.那么这两个数据是不是就是数据库的并发数呢?Oracle数据库的一个相对比较稳定的并发数是200左右,也就是说一台比较好的服务器,并发数在200时,还能够正常的运行,不会死机.由此可见,上面两个数据都不是并发数. 我们再来了解这两个名词的含义. 访问用户数:一个大型的网