常用的CSS属性。

html-css023

常用的CSS属性。,第1张

float,css的一种属性,主要属性值为:left(左浮动)、none(不浮动)、right(右浮动)、inherit(继承父元素浮动),多用于网页排版。

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

扩展资料

CSS属性

1、整数和实数

在CSS中只能使用浮点小数,而不能像其他编程语言那样使用科学记数法表示实数,即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313,实数:12.20、1415、-12.03。

2、长度量

相对长度单位有:em——当前字体的高度,也就是font.size属性的值;ex——当前字体中小写字母x的高度;Dx——一个像素的长度,其实际的长度由显示器的设置决定,比如在800木600的设置下,一个像素的长度就等于屏幕的宽度除以800。

3、百分数量(percentages)

百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。

参考资料来源:百度百科-CSS

参考资料来源:百度百科-FLOAT

一、html标签

scrollbar-face-color: 滚动条凸出部分的颜色<br />

scrollbar-highlight-color: 滚动条空白部分的颜色<br />

scrollbar-shadow-color: 立体滚动条阴影的颜色<br />

scrollbar-3dlight-color: 滚动条亮边的颜色<br />

scrollbar-arrow-color: 上下按钮上三角箭头的颜色<br />

scrollbar-track-color: 滚动条的背景颜色<br />

scrollbar-darkshadow-color: 滚动条强阴影的颜色<br />

scrollbar-base-color: 滚动条的基本颜色

021-5027-3306

<pre>...</pre>文字格式化

<div>......</div>列块容器

字体大小变化 <font size=?>想输入的字</font>

字体颜色 <font color="...">想输入的字</font>

字体变粗 <b>想输入的字</b>

字体变斜 <i>想输入的字</i>

字体加下划线 <u>想输入的字</u>

对正中央ㄉ语法 <p align="center">内容</p>

对正左边ㄉ语法 <p align="left">内容</p>

对正右边ㄉ语法 <p align="right">内容 </p>

字体删除线 <s>想输入的字</s>

字体设置 <font face="字体名称">想输入的字</font>

打字机字体 <tt>想输入的字</tt>

上标字 <sup>想输入的字</sup>

下标字 <sub>想输入的字</sub>

水平线 <hr color="...">

换行输入 想输入的字<br>想输入的字

超链接 <a href="想链接网址">链接地的名称</a>

<a href="mailto:填入email">要显示的字打这里</a>网络邮寄标签

贴图 <img src="图形的网址">

跑马灯(循环) <marquee behavior=scroll>想输入的字</marquee>

外部文件导入格式标签

CSS外部导入格式:

<link rel="stylesheet" type="text/css" href="/css.css" />

直接引用:

<style type="text/css">

<!--

id{...}

-->

</style>

javascript - 加载外部.js独立文件:

<script type="text/javascript" src="/script.js"></script>

二、CSS文字属性:

color : #999999/*文字颜色*/

font-family : 宋体,sans-serif/*文字字体*/

font-size : 9pt/*文字大小*/

font-style:itelic/*文字斜体*/

font-variant:small-caps/*小字体*/

letter-spacing : 1pt/*字间距离*/

line-height : 200%/*设置行高*/

font-weight:bold/*文字粗体*/

vertical-align:sub/*下标字*/

vertical-align:super/*上标字*/

text-decoration:line-through/*加删除线*/

text-decoration:overline/*加顶线*/

text-decoration:underline/*加下划线*/

text-decoration:none/*删除链接下划线*/

text-transform : capitalize/*首字大写*/

text-transform : uppercase/*英文大写*/

text-transform : lowercase/*英文小写*/

text-align:right/*文字右对齐*/

text-align:left/*文字左对齐*/

text-align:center/*文字居中对齐*/

text-align:justify/*文字分散对齐*/

vertical-align属性

vertical-align:top/*垂直向上对齐*/

vertical-align:bottom/*垂直向下对齐*/

vertical-align:middle/*垂直居中对齐*/

vertical-align:text-top/*文字垂直向上对齐*/

vertical-align:text-bottom/*文字垂直向下对齐*/

三、CSS符号属性:

list-style-type:none/*不编号*/

list-style-type:decimal/*阿拉伯数字*/

list-style-type:lower-roman/*小写罗马数字*/

list-style-type:upper-roman/*大写罗马数字*/

list-style-type:lower-alpha/*小写英文字母*/

list-style-type:upper-alpha/*大写英文字母*/

list-style-type:disc/*实心圆形符号*/

list-style-type:circle/*空心圆形符号*/

list-style-type:square/*实心方形符号*/

list-style-image:url(/dot.gif)/*图片式符号*/

list-style-position:outside/*凸排*/

list-style-position:inside/*缩进*/

四、CSS背景样式:

background-color:#F5E2EC/*背景颜色*/

background:transparent/*透视背景*/

background-image : url(/image/bg.gif)/*背景图片*/

background-attachment : fixed/*浮水印固定背景*/

background-repeat : repeat/*重复排列-网页默认*/

background-repeat : no-repeat/*不重复排列*/

background-repeat : repeat-x/*在x轴重复排列*/

background-repeat : repeat-y/*在y轴重复排列*/

指定背景位置

background-position : 90% 90%/*背景图片x与y轴的位置*/

background-position : top/*向上对齐*/

background-position : buttom/*向下对齐*/

background-position : left/*向左对齐*/

background-position : right/*向右对齐*/

background-position : center/*居中对齐*/

五、CSS连接属性:

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text}

六、CSS框线一览表:

border-top : 1px solid #6699cc/*上框线*/

border-bottom : 1px solid #6699cc/*下框线*/

border-left : 1px solid #6699cc/*左框线*/

border-right : 1px solid #6699cc/*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用:

文字方块 <input type="text" name="T1" size="15">

按钮 <input type="submit" value="submit" name="B1">

复选框 <input type="checkbox" name="C1">

选择钮 <input type="radio" value="V1" checked name="R1">

多行文字方块 <textarea rows="1" name="S1" cols="15"></textarea>

下拉式菜单 <select size="1" name="D1"><option>选项1</option>

<option>选项2</option></select>

八、CSS边界样式:

margin-top:10px/*上边界*/

margin-right:10px/*右边界值*/

margin-bottom:10px/*下边界值*/

margin-left:10px/*左边界值*/

九、CSS边框空白

padding-top:10px/*上边框留空白*/

padding-right:10px/*右边框留空白*/

padding-bottom:10px/*下边框留空白*/

padding-left:10px/*左边框留空白*/

前者是 选择href 属性值包含 "rss" 的所有A标签 这就更加精细化控制。这是CSS3,新出来的语法,算是对html标签的补足,比如input标签,针对input类型的不同来变换样式,input有单选框,复选框,文本框,只针对文本框就可以写input[type*="text"],这个功能说实话不是特别有用,毕竟加个class就可以解决选择的问题。

[attribute*=value] 选择器匹配属性值包含指定值的每个元素。