CSS基础教程（企业内部培训）

这是上周为公司内部培训的CSS资料，希望对初学者有所帮助。

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

一、如何把样式加入到你的网页。

1、链接外部样式。

特点：格式与代码分离。

2、定义内部样式块对象。

特点：页面内部使用，方便，下载流量会适当减少。

3、内联定义。

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

特点：随意、方便。
上面三种方式都可以达到我们需要的效果，主要看我们想达到什么效果，还要看个人习惯，如果想格式和代码分离，就用第一种；如果是一个页面内部的应用，用第二种和第三种方式都可以；第三种方式很随意，但是有一点不足的地方，下面会讲到。

二、语法
样式表语法 (CSS Syntax)
元素 { 属性:值 }
元素的写法将在下面第三部分讲到，属性和值将在第四部分讲到。

三、书写方法
1、直接用标签。

div{
font-size:12px;
}
<div>定义的样式</div>

特点：不用定义额外的元素，直接可以写CSS样式。

2、#开头的代表的是id。

#id{
font-size:12px;
}
<div id="text">定义的样式</div>

特点：可以为单独为某个元素定义的样式。

3、.开头的代表类

.text{
font-size:12px;
}
<div class="text">定义的样式</div>

特点：可以为一个页面里面多个应用此类的元素定义样式。

4、连写方式，中间加空格 (*)

div #text{
font-size:12px;
}
<div id="text">定义的样式</div>
#text p{
font-size:12px;
}

特点：精准定位到某个元素。

<div id="text">定义的样式<p>在p里面的样式</p></div>/

上面四种写法在我们平时用的都比较多，对于第四种是前三种的一种灵活的写法。具体用哪种方式，大家可以根据自己的情况来定。

四、常用的属性。

1、字体：font, font-size, font-family, font-weight, text-decoration, line-height
A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。
B. font-size定义文字的大小。
C. font-family定义字体。
D. font-weight定义文字的粗细。
E. text-decoration定义文字的装饰。
F. line-height定义行高。

2、文本：text-indent, vertical-align, text-align, word-break
A. text-indent，设置对象的缩进。
B. vertical-align，设置对象的上下对齐方式。
C. text-align，设置对象的左右对齐方式。
D. word-break，设置字体的强制换行。

3、背景：background, background-color, background-image, background-position, background-repeat
A. background定义背景的一个复合属性。和上面的font一样，可以把后面这几个属性的值都放在font里面用。
B. background-color定义的是背景的颜色。
C. background-image定义的是背景的图片。
D. background-position定义背景的位置。
E. background-repeat定义背景的是否平铺。

4、定位：position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定义层叠顺序。
C. top, right, bottom 和left表示距离他父级的上边，右边，下边和左边的距离。

5、尺寸：width, height
A. width定义对象的宽度。
B. height定义对象的高度。

6、布局：clear, float, display
A. clear 设置不允许又浮动对象的边。
B. float设置对象浮动及如何浮动。
C. display设置对象是否及如何显示。
D. visibility 设置对象是否显示。

7、外补丁：margin, margin-top, margin-right, margin-bottom, margin-left
A. margin定义外补丁的一个复合属性。同上。
B. margin-top定义对象的上边距离父级的外补丁。
C. margin-right 定义对象的右边距离父级的外补丁。
D. margin-bottom 定义对象的下边距离父级的外补丁。
E. margin-left 定义对象的左边距离父级的外补丁。

8、边框：border, border-top, border-right, border-bottom, border-left
同上（外补丁）。

9、内补丁：padding, padding-top, padding-right, padding-bottom, padding-left
同上（外补丁）。

10、列表：list-style, list-style-image, list-style-position, list-style-type
A.list-style是一个定义列表项目的复合属性。
B. list-style-image定义列表项目的图标。
C. list-style-type定义列表项目的标记。

11、其他：Cursor
这里只讲cursor，就是定义鼠标的显示样式，可以用图标。

12、伪类：:link, :visited, :hover, :active
:link定义链接未被点击时候的样式。
:visited定义链接点击之后的样式。
:hover定义鼠标移动到链接上的样式。
:active定义链接被激活时候的样式。
伪类只讲这四个，因为这四个用的最多，而且很多人容易出错，这里强调一个地方，书写顺序。在CSS里面写这四个伪类的时候，就按上面的顺序来写，不要颠倒顺序，否则可能达不到我们想要的效果。

13、伪对象：:first-letter
这里只讲这一个伪对象，他的作用是定义对象的第一个字母的样式。

14、声明：!important
提升应用样式的优先权。这个声明在firefox和ie7上面支持，在ie6上面不支持。他的主要作用是用来调整不同浏览器显示效果的差异。

五、单位

1、长度：Px
px象素，in英寸等。用得最多的是象素px。
2、颜色：rgb(RGB),#RRGGBB
Rgb(255,255,255)，#FFFFFF
3、Color name：red, blue

六、注意
1、html代码和css代码尽量小写。
2、子随父姓，就近原则。

CSS基础教程（企业内部培训）相关推荐

DIV+CSS基础教程
DIV+CSS基础教程第一节了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...
CSS基础教程（下）
今天把看<CSS基础教程>的下半部分笔记贴出来,嘿嘿,希望也对大家有点好处. 一．文本 1. 基本字体属性下面看看字体的几个属性: 1)font-f ...
公司内部计算机网络培训,企业内部培训常用的方法
企业内部培训常用的方法企业培训的效果在很大程度上取决于培训方法的选择,当前,企业培训的方法有很多种,不同的培训方法具有不同的特点,其自身也是各有优劣.要选择到合适有效的培训方法,需要考虑到培训的目的 ...
如何做好企业内部培训？
就目前而言,每个企业组织内部培训都不敢盲目进行.培训是企业给员工最大的投资,人才的培养是企业具有核心竞争力的关键所在,人才优势往往决定了企业的竞争优势.企业想要得到长远的发展,做好企业内部培训才是关键 ...
css做名单,css基础教程：2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
企业内部培训和外部培训的区分
导读:在企业培训预算投入中,常见的有两种模式--内部培训和外部培训. 内部培训是指企业为了提升人员素质或技能.促进员工绩效改进,凭借自身的资源和力量来实施的培训和学习活动. 一般而言,内部培训是企业培 ...
企业内部培训——华微软件的培训制度
每日培训--华微软件的培训制度摘要培训对企业的价值是不可估量的,但如此"变态"的做法恐怕不是每个人可以想象的--每天都进行培训,从不间断!一个CMMI5的软件企业,是如何通过每 ...
css基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 css基础一. css初识二. css语法规范三. 字体属性四. CSS注释五.开发工具六. 选择器七.文本属性八.css样式表: 1.内部样式表(嵌 ...
中科院计算所培训中心举办【人工智能的计算机工程】企业内部培训
随着时代的不断发展,"人工智能"这个熟悉又陌生的词汇已经走进了我们生活的方方面面.为了使企业人员更加深入地学习和分享前沿技术知识,2019年1月4日上午,中科院计算所培训中心全体人 ...

CSS基础教程（企业内部培训）

CSS基础教程（企业内部培训）相关推荐

最新文章

热门文章