CSS语法

发布 2021-05-11 04:49:28 阅读 3243

基本语法。一个样式(style)的语法由三部分构成:selector(中文叫选择器有点怪怪的,就用英文吧),属性(property),属性值(value)。

selector

举个例子,下面的**p就是selector,color就是属性,blue就是属性值。

p html中所有的tag都可以作为selector。

注:如果你想为style加多个属性,在两个属性之间要用分号加以分隔。下面的style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。

p 为了提高style**的可读性,你也可以分行写:

ptext-align: center;

color: black;

font-family: arial

组合(grouping)

你也可以将相同的属性和属性值赋予多个selector。selector之间用逗号分隔。

h1,h2,h3,h4,h5,h6

color: red

上面的例子是将所有正文标题(

这个段落居中显示。

contextual selector

你可以为嵌入其它tag的tag定义样式,示例**如下:

p emem这个tag嵌套在p里面。p em就叫做contextual selector,定义嵌套于p里的em的样式。这个例子表示,在p里面的用em这个tag标记的字体颜色是红色。

css注释。

为了方便你自己或者他人日后更好地理解你的css**,你可以写css**注释。css**注释以/*开头,以*/结束。

* 段落样式 */

ptext-align: center;

* 居中显示 */

color: black;

font-family: arial

css边框属性。

边框风格属性(border-style)

这个属性用来设定上下左右边框的风格,它的值如下:

none (没有边框,无论边框宽度设为多大)

dotted (点线式边框)

dashed (破折线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

边框宽度属性(border-width)

这个属性用来设定上下左右边框的宽度,它的值如下:

medium (是缺省值)

thin (比medium细)

thick (比medium粗)

用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

边框颜色属性(border-color)

这个属性用来设定上下左右边框的颜色。例句如下:

d5 边框属性(border)

这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下:

d1 单边边框属性。

上下左右四个边框不但可以统一设定,也可以分开设定。

设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。

css间隙属性。

间隙属性(padding)是用来设置元素内容到元素边界的距离。

左间隙属性(padding-left)

这个属性用来设定左间隙的宽度。示例如下:

d1右间隙属性(padding-right)

这个属性用来设定右间隙的宽度。示例如下:

d1 演示示例请参照左间隙属性示例,只要将里面的padding-left改成padding-right即可。

上间隙属性(padding-top)

这个属性用来设定上间隙的宽度。示例如下:

d1 演示示例请参照左间隙属性示例,只要将里面的padding-left改成padding-top即可。

下间隙属性(margin-bottom)

这个属性用来设定下间隙的宽度。示例如下:

d1演示示例请参照左间隙属性示例,只要将里面的padding-left改成padding-bottom即可。

间隙属性(padding)

这个属性是设定间隙宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右间隙属性。

你可以为上下左右间隙设置相同的宽度。示例入下:

d1 你也可以分别设置间隙,顺序是上,右,下,左。示例如下:

d1 上面的**表示,上间隙为1cm,右间隙为2cm,下间隙为3cm,左间隙为4cm。

css字体属性。

字体名称属性(font-family)

这个属性设定字体名称,如arial, tahoma, courier等。例句如下:

s1 字体大小属性(font-size)

这个属性可以设置字体的大小。字体大小的设置可以有多种方式,最常用的就是pt和px(pixel)。例句如下:

s2 字体风格属性(font-style)

这个属性有三个值可选:normal, italic, oblique。normal是缺省值,italic, oblique都是斜体显示。例句如下:

s1 字体浓淡属性(font-weight)

这个属性常用值是normal和bold,normal是缺省值。例句如下:

这段文字字体的浓淡属性(font-weight)值是bold。

字体变量属性(font-variant)

这个属性有两个值,normal和small-caps,normal是缺省值。small-caps表示小的大写字体。例句如下:

s1 字体属性(font)

这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style),字体变量属性(font-variant),字体浓淡属性(font-weight),字体大小属性(font-size)等属性。例句如下:

s1 字体颜色(color)

字体颜色用css中的color属性来表示。参见css常用文本属性。

css背景属性。

背景颜色属性(background-color)

这个属性为html元素设定背景颜色,相当于html中bgcolor属性。

body 上面的**表示body这个html元素的背景颜色是翠绿色的。

背景**属性(background-image)

这个属性为html元素设定背景**,相当于html中background属性。

上面的**为body这个html元素设定了一个背景**。

背景重复属性(background-repeat)

这个属性和background-image属性连在一起使用,决定背景**是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,**既横向重复,又竖向重复。

repeat-x 背景**横向重复。

repeat-y 背景**竖向重复。

no-repeat 背景**不重复。

body 上面的**表示**竖向重复。

背景附着属性(background-attachment)

这个属性和background-image属性连在一起使用,决定**是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body 上面的**表示**固定不动,不随内容滚动而动。

背景位置属性(background-position)

这个属性和background-image属性连在一起使用,决定了背景**的最初位置。

body 上面的**表示背景**的初始位置距离网页最左面20px,距离网页最上面60px。

背景属性(background)

这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body 上面的**表示,网页的背景颜色是翠绿色,背景**是**,背景**不重复显示,背景**不随内容滚动而动,背景**距离网页最左面40px,距离网页最上面100px。

css盒子模式(box model)

css 中有个重要的概念,就是盒子模式 (box model)。

胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城,而这个盒子模式套用这句话来说,就是方块套方块。

先看看下面这个图,黑框包围的一个方块,就是一个盒子 (box)。

盒子里由外至里依次是:

margin 边距。

border 边框。

padding 间隙 (也有人称做补丁)

content (内容,比如文本,**等)

css 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

css 边框属性 (border) 用来设定一个元素的边线。

css 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

css 背景属性指的是 content 和 padding 区域。

css 属性中的 width 和 height 指的是 content 区域的宽和高。

css伪类(pseudo-class)

和一般的css语法不同(参见css语法),css伪类的语法有两种。

第一种:selector:pseudo-class

例句:a:link

第二种:例句:

锚(a)伪类。

锚(a)伪类是最常用的伪类。例句如下:

a:link /未被访问的链接红色 */

a:visited /已被访问过的链接绿色 */

a:hover /鼠标悬浮在上的链接橙色 */

a:active /鼠标点中激活链接蓝色 */

也可以用html的class属性来设定伪类。例句如下:

/*未被访问的链接红色 */

/*已被访问过的链接绿色 */

/*鼠标悬浮在上的链接橙色 */

/*鼠标点中激活链接蓝色 */

注:由于css优先级的关系(后面比前面的优先级高),在写a的css时,一定要按照a:link, a:

visited, a:hover, a:actived的顺序书写。

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

未来不是固定在那里等你趋近的,而是要靠你创造。可能有人会问,css还有语法?是的,它不属于任何编程语言类型,但它有自己规定的格式以及规范,只有了解这些规范你才能写出更简洁 易懂的css。网页设计师们应力求写出的css有更好的可读性,更规范的书写,更小的体积,这是初学者们应该要明白的。css 语法由三...

css语法

使用css样式美化和布局网页。1css简介。css是cascading style sheets的缩写,称为层叠样式表。它允许网页设计者定义网页元素的样式,包括字体 颜色以及其他高级样式。采用css技术,可以有效地对页面的布局 字体 颜色 背景和其他效果实现更加精确的控制。css样式可以是一个单独的...