基本语法。一个样式(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样式可以是一个单独的...