css帮助文档 css文件怎么写

编程之家2026-06-281184次浏览

大家好，今天小编来为大家解答css帮助文档这个问题，css文件怎么写很多人还不知道，现在让我们一起来看看吧！

css的属性有哪些

希望能帮到你属性名称

字体属性（Font）

font-family

font-style

font-variant

font-weight

font-size

颜色和背景属性

Color

Background-color

Background-image

Background-repeat

Background-attachment

Background-position

文本属性

Word-spacing

Letter-spacing

Text-decoration

Vertical-align

Text-transform

Text-align

Text-indent

Line-height

边距属性

Margin-top

Margin-right

Margin-bottom

Margin-left

填充距属性

Padding-top

Padding-right

Padding-bottom

Padding-left

边框属性

Border-top-width

Border-right-width

Border-bottom-width

Border-left-width

Border-width

Border-color

Border-style

Border-top

Border-right

Border-bottom

Border-left

Width

Height

Float

Clear

分级属性

Display

White-space

List-style-type

List-style-image

List-style-position

List-style

鼠标（Cursor）属性属性含义

使用什么字体

字体是否斜体

是否用小体大写

字体的粗细

字体的大小

定义前景色

定义背景色

定义背景图案

重复方式

设置滚动

初始位置

单词之间的间距

字母之间的间距

文字的装饰样式

垂直方向的位置

文本转换

对齐方式

首行的缩进方式

文本的行高

顶端边距

右侧边距

底端边距

左侧边距

顶端填充距

右侧填充距

底端填充距

左侧填充距

顶端边框宽度

右侧边框宽度

底端边框宽度

左侧边框宽度

一次定义宽度

设置边框颜色

设置边框样式

一次定义顶端

一次定义右侧

一次定义底端

一次定义左侧

定义宽度属性

定义高度属性

文字环绕

哪一边环绕

定义是否显示

怎样处理空白

加项目编号

加图案

第二行起始位置

一次定义列表

自动

定位“十”字

默认指针

手形

移动

箭头朝右方

箭头朝右上方

箭头朝左上方

箭头朝上方

箭头朝右下方

箭头朝左下方

箭头朝下方

箭头朝左方

文本“I”形

等待

帮助

属性值

所有的字体

Normal、italic、oblique

Normal、small-caps

Normal、bold、bolder、lithter等

Absolute-size、relative-size、length、percentage等

颜色

路径

Repeat-x、repeat-y、no-repeat

Scroll、Fixed

Percentage、length、top、left、

right、bottom等

Normal<length>

同上

None|underline|overline|line-

through|blink

Capitalize|uppercase|

lowercase|none

Left|right|center|justify

Normal|<number>|<length>|

Length|percentage|auto

同上

Length|percentage

同上

Thin|medium|thick|length

同上

Color

None|dotted|dash|solid等

Border-top-width|color等

同上

Length|percentage|auto

Length|auto

Left|right|none

Left|right|none|both

Block、inline、list-item、none

Normal、pre、nowrap

Disc、circle、square等

<url>|none

Inside、outside

Auto

Crosshair

Default

Hand

Move

e-resize

Ne-resize

Nw-resize

n-resize

Se-resize

Sw-resize

s-resize

w-resize

Text

Wait

Help

什么是css有什么特点和优点吗

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是

Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工

具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有

几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信

提问的问题整理出来，供诸位参考。

1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？

当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页

中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。

2、CSS的三种用法在一个网页中要以混用吗？

三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处

理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行

了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方

式、外连文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？

在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的<head>与

</head>之间加上一句这样的代码：<link rel="stylesheet" rel="external nofollow" href="在这里填上你的CSS文件地址（相对路径+文件

名）" type="text/css">就行了。

4、如何用Dreamweaver3快速创建CSS外连式文件？

对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于

Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：

1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定

义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；

2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在<head>与</head>之间的那段定义好的CSS复制

到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？

5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？

不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=""，再把你刚才定义的CSS从<head>

后面拖到这个双引号中来，把花括号以外的部分删去就行了。

6、在方档头部方式和外连文件方式的CSS中都有“”，好象没什么用，不要可以吗？

这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内

容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。

css网页的几种布局实例

本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。

1、左边固定，右边自适应布局的两种实现方式

效果图如下：

大屏展示：

小屏展示：

第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：

.left{

float: left;

width: 100%;

height: 200px;

background-color: red;

}

.left-content{

margin-left: 30%;

}

.right{

float: left;

width: 30%;

margin-left:-100%;

height: 200px;

background-color: green;

}

.layout0{

clear: both;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

<body>

设置子元素的margin,然后父元素必须浮动。

用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。

-margin必须大于或等于自身的宽度才会上移

</body>实现过程中需要注意的是:

1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。

2.right容器的负边距必须大于或等于自身的宽度才会上移。

3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。

第二种通过浮动布局来实现左边固定，右边自适应的布局

主要的代码如下：

.left{

float: left;

width: 200px;

height: 200px;

background-color: yellow;

}

.right{

padding-left: 200px;

height: 200px;

background-color: red;

}

@media(min-width: 650px) and(max-width: 1000px){

.left{

width: 150px;

}

.right{

margin-left: 150px;

}

@media(max-width: 640px){

.left{

width: 100px;

}

.right{

margin-left: 100px;

}

</style>

<body>

左边固定宽度，右边自适应

</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。

2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。

大屏展示：

小屏展示：

主要代码如下：

#head{

height: 200px;

background-color: yellow;

}

#body{

width: 100%;

float: left;

}

.main{

background-color: green;

min-height: 200px;

margin: 0 210px;

}

.left{

float: left;

background-color: red;

width: 200px;

height: 200px;

margin-left:-100%;

}

.right{

float: right;

background-color: blue;

width: 200px;

height: 200px;

margin-left:-200px;

}

#footer{

clear: both;

height: 200px;

background-color: orange;

}

</style>

<body>

即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置

当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移

</body>实现过程中需要注意:

1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹

2.left和right容器向同一个方向浮动。

主要代码如下：

#head{

height: 200px;

background-color: yellow;

}

#body{

overflow: hidden;

}

.left{

float: left;

background-color: red;

width: 200px;

height: 200px;

}

.right{

float: right;

background-color: blue;

width: 200px;

height: 200px;

}

.main{

background-color: green;

height: 200px;

margin: 0 210px;

}

#footer{

clear: both;

height: 200px;

background-color: orange;

}

</style>

<body>

左右固定宽度并且向两边浮动，中间的p设置两边的margin

该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了

</body>实现过程中需要注意:

1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。

2.left和right容器向两边浮动。

主要代码如下：

<!DOCTYPE html>

<html>

<head>

<title>使用flex实现“双飞翼布局”</title>

</head>

#main{

display: flex;

display:-webkit-flex;//谷歌浏览器加前缀

flex-flow: row nowrap;

justify-content: flex-start;

align-items: center;

}

.left{

flex: 0 0 auto;

width:100px;

height: 200px;

background-color: red;

word-wrap: break-word;

overflow: hidden;

}

.main{

flex: 1 1 auto;

height: 200px;

background-color: green;

}

.right{

flex: 0 0 auto;

width: 100px;

height: 200px;

background-color: yellow;

}

</style>

<body>

flex语法我参照了阮一峰关于flex语法介绍 ;

</body>

</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法

3、定位布局

这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。

第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：

在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：

<!DOCTYPE html>

<html>

<head>

<title>关于position的定位的坑</title>

</head>

body{

margin: 0;

padding: 0;

}

font-style: normal;

cursor: pointer;

}

#delete-button{

position: absolute;

left: 45%;

top: 45%;

text-align: center;

vertical-align: middle;

height: 50px;

margin: auto;

cursor: pointer;

}

#delete-button> i{

display: inline-block;

width: 32px;

height: 32px;

border-radius: 16px;

background-color: orange;

color: red;

font-size: 32px;

vertical-align: middle;

line-height: 28px;

}

/*第一个模态框的样式*/

#layout{

display: none;

width: 100%;

height: 100%;

}

/*使用flex布局水平竖直居中*/

/*#layout-box{

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

display: flex;

display:-webkit-flex;

flex-flow: column nowrap;

justify-content: center;

align-items: center;

background-color: rgba(0,0,0,0.3);

}*/

/*使用postion和 transform水平垂直居中*/

#layout-box{

position: fixed;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.3);

}

.modal-dialog{

position: absolute;

left: 50%;

top: 50%;

width: 500px;

height: 200px;

border-radius: 10px;

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

background-color:#fff;

}

.dialog-title{

text-align: center;

color:#333;

font-size: 28px;

margin-bottom: 10px;

}

.dialog-content{

text-align: center;

color:#666;

font-size: 18px;

}

.dialog-button{

margin-top: 20px;

width: 100%;

color:#333;

}

.dialog-button>.button-box{

display: inline-block;

width: 48%;

text-align: center;

}

.button-box span{

display: inline-block;

padding: 10px;

color:#fff;

border-radius: 6px;

cursor: pointer;

}

#confirm{

background-color:#27ad9a;

}

#cancel{

background-color: red;

}

/*添加按钮的样式*/

#add-button> i{

display: inline-block;

width: 32px;

height: 32px;

border-radius: 16px;

background-color:#27ad9a;

color:#fff;

font-size: 32px;

vertical-align: middle;

line-height: 28px;

text-align: center;

}

#add-button{

display: inline-block;

cursor: pointer;

}

/*第二个模态框的样式*/

.layout2{

display: none;

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

background-color: rgba(0,0,0,0.2);

}

.modal-dialog2{

position: fixed;

left: 50%;

top: 50%;

width: 50%;

height: 50%;

border-radius: 10px;

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

background-color: rgba(0,0,0,0.2);

}

.modal-dialog2> span{

display: block;

}

.modal-text{

float: left;

}

#close{

color: red;

font-size: 24px;

float: right;

cursor: pointer;

}

</style>

<body>

-删除

提示

是否删除该项,点击确定

确定

取消

<p id="add-butto

css帮助文档和css文件怎么写的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！

threadlocal threadlocal的典型用法向上取整和向下取整，向上取整是取大还是小