CSS技术

来源：互联网发布：服装淘宝店从哪里进货编辑：程序博客网时间：2024/05/16 06:45

CSS：层叠样式表 Cascading Style Sheet

一种用来定义网页外观格式的技术，在网页中引入CSS可以有效的队页面进行样式设计，更加精确的控制网页的字体，颜色，背景等网页元素的效果，更重要的是CSS3+div的技术已经成为了现在的主流网页布局技术。

CSS3是CSS的升级版本，把CSS划分为了更小的模块，在CSS3中有字体，颜色，布局，背景，定位，边框，多列，动画，用户界面等多个模块。

为什么要用css，因为css不仅可以完成html标签可以完成的所有操作，还能实现html标签不能实现的功能，实现了代码和设计的分离，更利于网页的开发

结构：

样式选择器{属性1：属性值；属性2：属性值}

下面介绍几个常用的标签选择器：

1 标签选择器：p{font-size:14px}

这样写的话，则页面中所有的段落文字受到这样的样式的控制，字号都是14像素

2类选择器

标签名.类名{属性1：值1；属性2：值2...}

类名由设计者定义，标签名在使用的过程用*表示全部。

3ID选择器

类似于类选择器，但是用的不是.而是#，引用的时候使用元素的id属性，一般情况下页面的id属性是唯一的，因此ID选择器一般只针对某个特定的元素作用一侧。

标签名#id名{属性1：值1；属性2：值2...}

PS *表示统配选择符，没被书写且被覆盖了的都显示*的内容，为什么叫层叠样式表呢？就是因为一层层覆盖的原因。

现在我们知道了CSS的结构，那我们要怎么用呢？

CSS使用方法

主要用三种方式

1行内样式

简单点说，就是这个要改变的元素本身内部写样式，这样的好处是写法很简单，但是缺点就是并没有实现设计和代码的分离。

2内嵌样式

内嵌样式是一种比较常用的样式，将CSS样式直接定义在网页的<head></head>里面。

<head>

样式表

body{

background-color:red;

font-size:14px;

}

</style>

</head>

<body>

</body>

其中，type用来指定元素的文本属性

3链接外部样式

简单的说，就是将内嵌样式单独放在一个XX.css文件中，HTML页面通过<link>元素将.css文件链接到当前页面中：

href 路径，rel用来定义链接的文件与HTML的关系，stylesheet值表示制定一个固定或首选的样式。

用法同内嵌样式。

但是要注意css文件直接写样式就可以了，不用写表头什么的。

body{

background-color:red;

font-size:14px;

}

.还有一种，导入外部样式，写法上有点不同

@import url("样式表路径")

常用CSS属性

下文将介绍几个常用的CSS属性，如字体、颜色、背景、边框效果。

分四类来介绍

1：字体和段落

font-family:字体

设置字体，可同时设定一个或者多个

font-size:绝对尺寸、相对尺寸、长度、百分比

设置字体大小，最常用的是用长度值指定文字大小，有px像素，pt点，em字体高

font-weight:normal | bold | bolder | lighter|数值

字体粗细，分别代表正常，粗体，加粗，细体，数值是100-900的整百数字

line-height:normal 长度百分比数值

行高

text-align left right center justify

水平对齐方式左中右两端

text-decoration：值

常用值有 none underline overline line-through

2：颜色和背景

color：颜色值;

设置前景色，常用的表示方式有
英文名法：yellow表示黄色
十六进制：#00FF00 表示绿色，如果两个数字相同可以简写 #0F0也可以表示绿色
RGB函数：RGB(R,G,B) 如（0，255，0）(0%,100%,0%)都表示绿色

background-color：颜色值

背景颜色

background-image：url（路径）

背景图

background-repeat： repeat | no-repeat | repeat-x | repeat-y

重复的方式，分别表示重复，不重复，在水平方向重复，在垂直方向重复

background-attachment: scroll | fixed

表示背景图片是否随着背景滚动，scroll表示默认，fixed表示背景图像固定

background-position：关键字 | 百分比 | 长度

表示背景图片位置，常用关键字来表示，关键字在水平方向上有left center right 三种，垂直方向上主要由 top center bottom 水平方向和垂直方向可以互相搭配使用

3：盒子属性

width auto 长度百分比
height auto 长度百分比
float： none left right
浮动属性，改变元素块的显示方式

border-style：样式值{1，4}；
border-top-style
border-bottom-style
border-left-style
border-right-style
设置边框样式，可以是无边框 none 隐藏边框hidden dotted 点状 dashed 虚线 solid 实现 double 双线，groove 3D ridge 3D凸槽轮廓 inset 3D凹槽轮廓 outset 3D凸边轮廓

<html><head><title>table_test</title><meta http-equiv="Content-Type" content = "form/html;charset=utf-8"/><style type="text/css">table{color:red;width:500px;height:500px;border: 10px groove blue;}</style></head><table><tr><td>111111</td><td>111111</td></tr><tr><td>111111</td><td>111111</td></tr><tr><td>111111</td><td>111111</td></tr></table></body></html>

border-width：样式值{1，4}；
border-top-width
border-bottom-width
border-left-width
border-right-width
边框的宽度值：可以是medium ，thin 和thick 默认，细，粗，我们可以分别设定1-4个边框。

border-color：样式值{1，4}；
border-top-color
border-bottom-color
border-left-color
border-right-color
同上

给border设置属性的时候，无特定顺序空格分隔
border-top:[宽度] [样式] [颜色]
border-bottom:[宽度] [样式] [颜色]
border-left:[宽度] [样式] [颜色]
border-right:[宽度] [样式] [颜色]
要注意的是
如果提供一个值，代表四条框
如果提供两个值，分别代表上下；左右
如果提供三个值，则代表上；左右；下

什么属性有不同的需要，就把什么属性拿出来写

table{color:red;width:500px;height:500px;border: 10px groove blue;border-color: blue red;}

4 超链接样式

a:link

原始状态

a:visited

点击之后的状态

a:active

点击的状态

a:hover

鼠标放上去的状态

eg

a:link{text-decoration:none}
a:hover{text-decoration:underline;color:red}
a:visited{text-decoration:none;color:blue}
a:hover{text-decoration:underline;color:green}

基本上，基础的CSS就如上。

0 0