WEB前端--CSS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WEB前端--CSS相关的知识,希望对你有一定的参考价值。

一、认识CSS

1、概念

CSS(Cascading Style Sheet,层叠样式表),可以将网页制作的更加绚丽多彩。它可以有效的对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

2、CSS优点:

  • 制作网页方便

  • 精确控制网页的内容形式

  • 样式丰富

  • 定义样式灵活多样

二、使用CSS

1、基本语法

1
2
3
4
5
选择符{
    样式属性:取值;
    样式属性:取值;
    ……
}

举例:

1
2
3
body {
    backgroud-color: red;
}

2、添加CSS方法

共有四种方法:连接外部样式表、内部样式表、导入外部样式表和内嵌样式。

2.1、连接外部样式表

用<link>调用定义好的样式css文件

1
2
3
4
5
<head>
……
<link rel=stylesheet type=text/css href=slstyle.css>
……
</head>
2.2、内部样式表

调用在<head>内部定义好的样式,并且以<style></style>方式定义。

1
2
3
4
5
6
7
8
<head>
<style type="text/css">
.style{
    color: red;
    font-size: 13px;
}
</style>
</head>
2.3、导入外部样式表

将外部样式表文件导入内部样式表<style>里,用@import导入。

1
2
3
4
5
6
7
8
9
<head>
<style type="text/css">
.style{
    color: red;
    font-size: 13px;
}
@import slstyle.css
</style>
</head>
2.4、内嵌样式

直接混合在html标记里添加style参数,主要在body内实现。

1
2
3
4
<body>
<table style="color:red;margin-right:220px;">
这是个表格
</body>

三、字体属性

1、字体 font-family

1
font-family: "字体1","字体2",……

浏览器会按自己支持的字体从左往右识别,如果都不识别,就用系统默认字体。

2、字号 font-size

1
font-size: 大小的取值

3、字体风格 font-style

1
font-style:样式的取值

取值有三种:

  • normal--正常字体(默认)

  • italic--斜体显示文字

  • oblique--偏斜体(上两个的中间状态)

4、加粗字体 font-weight

相当于html里的<b>

1
font-weight:字体粗细值

取值范围:(细-->粗)

  • normal-->bold-->bolder-->lighter-->number

  • 用数值:100~900

5、小写字母转大写 font-variant

1
font-variant:取值

6、字体复合属性

多个属性写在一起

1
.h{font: bold italic "宋体"}

四、颜色和背景

1、颜色 color

1
.cl{color: #9900ff;}

颜色取值参考RGB规范

2、背景色 background-color

1
.bgc{background-color: #ff99ff;}

3、背景图像 background-image

1
.bgi{background-image: url(image/ber.gif);}

4、背景重复 background-repeat

设置背景图像是否平铺,或如何平铺。

1
2
3
background-repeatno-repeat;  #不平铺
background-repeat: repeat-x    #横向重复
background-repeat: repeat-y    #纵向重复

5、背景附件 background-attachment

设置背景图随对象滚动还是不动

1
2
3
4
5
6
.g{
    background-image: url(der.png)
    background-attachment: scroll;  #默认跟随滚动
    or
    background-attachment: fixed    #固定不动
}

6、背景位置 background-position

设置背景图像的位置

1
2
3
background-position: 位置取值(数字或关键字)
例如:
background-position: left top;

7、背景复合属性 background

1
2
background:取值
background: url(img/ber.jpg) no-repeat left top;

五、段落属性

1、单词间隔 word-spacing

1
word-spacing: 3px;

2、字符间隔 letter-spacing

1
letter-spacing: 3px;

3、文字修饰 text-decoration

共5种修饰方式

1
2
3
4
5
text-decoration: none;    #默认值,不修饰。
text-decoration: underline;    #下划线
text-decoration: overline;    #上划线
text-decoration: line-through;    #删除线
text-decoration: blink;    #文字闪烁

4、垂直对齐方式 vertical-align

共7中对齐方式:

1
2
3
4
5
6
7
vertical-align: baseline;    #浏览器的默认对齐方式
vertical-align: sub;    #按文字的下标对齐
vertical-align: super;    #按文字的上标对齐
vertical-align: top;    #垂直靠上对齐
vertical-align: text-top;    #使元素和上级元素的字体向上对齐
vertical-align: middle;    #垂直居中对齐
vertical-align: text-bottom;    #使元素和上级元素的字体向下对齐

5、文本转换 text-tranform

转换英文字母的大小写

1
2
3
4
text-transform: none;    #使用原始值
text-transform: capitalize;    #每单词第一个字母大写
text-transform: uppercase;    #所有字母大写
text-transform: lowercase;    #所有字母小写

6、水平对齐 text-align

1
2
3
4
text-align: left;    #左对齐
text-align: right;    #右对齐
text-align: cengter;    #居中对齐
text-align: justify;    #两端对齐

7、文本缩进 text-indent

html中只能控制整体缩进,css能控制首行缩进及缩进的距离。

1
text-indent: 25px;    #数值或百分比

8、文本行高 text-height

行间距,行高值可以为长度、 倍数或百分比。

1
text-height: 25px;

9、处理空白 white-space

页面空白的处理方式

1
2
3
white-space: normal;    #默认值,将连续的多个空格合并。
white-space: pre;    #源代码中的空格和换行符被保留,ie6有效。
white-space: nowrap;    #强制在同一行内显示所有文本,直至结束或<br>

10、文字反排 unicode-bidi、direction

两个属性一起使用,设置对象的阅读顺序。

1
2
3
unicode-bidi: bidi-override;    #安装direction属性的值进行重排序
unicode-bidi: normal;    #默认值
unicode-bidi: embed;    #对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序
1
2
3
direction: ltr;    #文字从左到右的顺序阅读
direction: rtl;    #文字从右到左的顺序阅读
direction: inherit;    #文本流的值不可继承
1
2
3
4
5
.k{
    font-size: 10pt;
    direction: rtl;
    unicode-bidi: bidi-override;
}

六、外边距与内边距属性

盒子模型由Content(内容)、padding(内边距)、border(边框)和margin(外边框)4部分组成:

技术分享技术分享


1、上边距 margin-top

1
2
margin-top: auto;    #默认值
margin-top: 30pt;    #数值或百分比

2、其它边距 margin-bottom、margin-left、margin-right

1
2
3
4
5
6
7
8
<style type="text/css">
img {
    margin-top:20pt;
    margin-right:50px;
    margin-bottom:10px;
    margin-left:50px;
}
</style>

3、外边距复合 margin

1
2
3
4
5
<style type="text/css">
img {
    margin: 20pt 50px 10px 50px;    #上、右、下、左
}
</style>

4、顶端内边距 padding-top

1
padding-top: 间隔值;    #长度值或百分比

5、其它内边距 padding-bottom、padding-right、padding-left

1
2
3
padding-bottom: 数值或百分比;
padding-right: 数值或百分比;
padding-left: 数值或百分比;

6、内边距复合 padding

1
2
3
4
5
6
<style type="text/css">
    body{
        padding: 50px 20% 30px 20%;
                 /*上、右、下、左*/
    }
</style>

七、边框属性

边框有3个属性:边框的样式、边框的宽度和边框的颜色。

1、边框样式 border-style

1
2
3
4
5
border-style: 样式值;
border-top-style: 样式值;
border-right-style: 样式值;
border-bottom-style: 样式值;
border-left-style: 样式值;

边框样式取值:

none

默认值,无边

dotted点线边框
dashed虚线边框
solid实线边框
double双实线边框
groove边框具有立体感的沟槽
rigde边框成脊形
inset使整个边框凹陷,即在边框内嵌入一个立体边框
outset使整个边框凸起,即在边框外嵌入一个立体边框


2、边框宽度 border-width

1
2
3
4
5
border-width: 宽度值;
border-top-width: 宽度值;
border-right-width: 宽度值;
border-bottom-width: 宽度值;
border-left-width: 宽度值;

取值范围:

  • medium--默认宽度

  • thin--小于默认宽度

  • thick--大于默认宽度

3、边框颜色 border-color

1
2
3
4
border-top-color: 颜色值
border-right-color: 颜色值
border-bottom-color: 颜色值
border-left-color: 颜色值

4、边框复合 border

1
2
3
4
5
border: 边框宽度 样式 颜色值;
border-top: 上边框宽度 样式 颜色值;
border-right: 右边框宽度 样式 颜色值;
border-bottom: 下边框宽度 样式 颜色值;
border-left: 下边框宽度 样式 颜色值;

八、定位属性

控制元素的位置,包括相对定位和绝对定位:

  • 相对定位:允许元素在相对于文档布局的原始位置上进行偏移;

  • 绝对定位:允许元素与原始文档布局分离且任意定位。

1、定位方式 position

1
2
3
4
position: static;    #默认值
position: absolute;    #绝对定位,需要同时使用leftrighttopbottom属性。
position: fixed;    #当页面滚动时,元素不随着滚动。
position: relative;    #相对定位,对象不可层叠。

2、元素位置 top\right\bottom\left

1
2
3
4
top: auto|长度值|百分比
right: auto|长度值|百分比
bottom: auto|长度值|百分比
left: auto|长度值|百分比

auto是默认值,长度值包含数字和单位,也可使用百分比来设置。

3、层叠顺序 z-index

设置层的先后顺序和覆盖关系。默认z-index=1,表示在最底层。

1
z-index: auto|数字

4、浮动属性 float

设置文字在某个元素的周围,它能应用于所有的元素。

1
2
3
float: none    #默认值
float: left    #元素浮动在文字的左边
float: right   #元素浮动在文字的右边

5、清除属性 clear

指定元素周围是否可以有其它元素浮动

1
2
3
4

(c)2006-2024 SYSTEM All Rights Reserved IT常识