CSS

最新推荐文章于 2024-10-29 19:02:06 发布

大西瓜计算机

最新推荐文章于 2024-10-29 19:02:06 发布

阅读量261

点赞数

分类专栏： css样式

本文链接：https://blog.youkuaiyun.com/u010979052/article/details/40716453

版权

css样式专栏收录该内容

2 篇文章

订阅专栏

width+padding-left+border=总盒子。
设置内容width.值。width值是内容的大小。

-------------
#ffffff 白
#000000 黑
#FF6600 橙色
#ff00ff 紫红
#ff0000 红
#ff3300 粉红
#aa0000 红
.nav li a:link {color: #FF0000}     /* 未访问的链接 */
.nav li a:visited {color: #00FF00} /* 已访问的链接 */
-----------
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */ hover 徘徊
a:active {color: #0000FF}   /* 被选择的链接 */
注：注意顺序。

总: a 表示所有状态下的连接如 .myclass a{color:red}

a{color: #FF0000}     /* 所有状态下的链接 */
----
全局定义：
a{color:#000; } /* 未访问的链接 */
a:hover{color:#f60} /* 当有鼠标悬停在链接上 */

------------------

正确<img src="图片地址" alt=“图片说明" border="" align="" width="" height= />

----------------
如何让dw源代码排列整齐：命令---应用源格式。

-----------
ID与Class的区别?
在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

-----------------
 •  代表：* 一个点。
-----------
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

其实就是把IE8当做IE7用
=================================
<base href="http://www.www.com" />
<link rel="shortcut icon" href="favicon.ico" />
默认地址或默认目标
======
<head>
<base href="http://www.w3school.com" />
<base target="_blank" />
</head>
<base> 标签为页面上的所有链接规定默认地址或默认目标。
-----------
<link rel="shortcut icon" href="favicon.ico" />
网页图标   favicon的大小是16×16，格式通常为.ico，

==============
clear:both;
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。

======
position:absolute 绝对定位。
top:
left:
-------------
#nav li a{}

#nav li a:link,#nav li a:visited{}

#nav p.more a{}   ----<p

-----
<span> </span>在CSS定义中属于一个行内元素,在行内定义一个区域，本身没有效果。

---=================
overflow: auto; 内容以滚动条，显示。
------==============
如果使用css3属性，如果有必要加入浏览器前缀，则按照，
-webkit-/-moz-/-ms-/-o-

-----============
除十六进制颜色和字体以外，css其它都应该小写，

-----====================
<table width="" height="" border="0">
<caption> 表格标题 </caption>
<tr>       ---表行

<th> </th>    ---表头
<td id="" align="center 或 left或right">     --表格内内容
表格内容
</td>

<td class="hei"><p>
<a href="#" title="##"><img src="images/13_173x125.jpg" width="173" height="125" border="0" / alt="##"></a>
</p>
##</td>

</tr> ---表行 --(结束end)

</table>

格与格之间，格间线：cellspacing=5
跨多列<th colspan=5> </th>
跨多行<th rowspan=5> </th>

<a href="http:www." target=_blank或_self(同一窗口)或——top>内容</a>
<a href="mailto:aa@qq.com"> aa</a>
------==========================
conter 居中

无序列表，<ul> <li> </li> </ul>
有序列表，<ol> <li> </li> </ol>

-----------===============
<br>不要成对出现。换行.
<p> </p> 段落，成对出现。
-----------======================
表单：<form action="url" name="myform" id=" my" method="post/ get">
<input name=.. value=... size=... type="submit">
</from>

表单;表单;表单;表单;表单;

<form action="" method="post" name="form1" >搜索产品
<input class="inp_srh" style="css值,width=100px;" name="textfield" type="text" id="textfield" value="文本" />
<input class="btn_srh" name="button" type="submit" id="button" value="查询/登录/注册" />

</form>
=============
字体滚动
<marquee width="707" height="70" direction="up" scrolldelay="7" scrollamount="1" οnmοuseοut="this.start()" οnmοuseοver="this.stop()">字体滚动</marquee>                       ---- 字体滚动

marquee>啦啦啦，我会移动耶！</marquee>

width 宽 height高 bgcolor背景颜色 direction滚动方向 behavior行为（滚动方式）值有scroll（连续不断的滚动）slide（滚动一次并停止）alternate（交替式滚动） scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数οnmοuseοver="this.stop()" οnmοuseοut="this.start()"鼠标经过的时候停止，离开的时候继续滚动

===========================
ie6下padding属性双倍hack

.xx{width:100px; height:100px; padding:50px!important; padding:25px;}
=============================
ie6下双倍margin间距的解决办法
假设：一个div代码为<div style="float:left; margin-left:10px;"></div>

       当一个html元素的css样式同时设置了float和margin的属性的时候，在ie7+及火狐上，该元素显示正常，但是在ie6下，将会出现双倍的 margin-left属性值，也就是上面那段代码中的div在ie6下的实际margin-left的值是20px;

       解决此办法的最简单的方法是，在style中添加：display:inline; 如上面的代码将改为：

      <div style="float:left; display:inline; margin-left:10px;"></div>

((((display:inline; ))))
也可以使用以下办法来书写兼容浏览器的css代码:
第一种：
.div {
background:orange;/*ff*/
*background:green !important;/*ie7*/
*background:blue; /*ie6*/
}
第二种：
.div {
margin:10px;/*ff*/     ff不支持*
*margin:15px;/*ie7*/
_margin:15px;/*ie6*/      ie6下就是15px;
}
第三种：
#div { color: #333; } /* ff */
* html #div { color: #666; } /* IE6 */
*+html #div { color: #999; } /* IE7 */

=====================================
作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>

======================
* {margin: 0px;padding: 0px;}所有的div

===============================
全局定义：
/*body*/
body { margin:0 auto; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.5em; clear:both;}
ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,form,p,li { padding:0; margin:0;}
ul,ol,li { list-style:none;}
img { border:0px;}
a { color:#444; text-decoration:none;}
a:hover {color:#f30; text-decoration:underline;}
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

#container { width:900px; margin:0 auto; clear:both;}

=======================
清除影响浮动：（在float 和没有float之间的div 加入） -html:<div class="cleaner"></div> 在css中:.cleaner{ clear:both;} 作用：清除上一层浮动背景。让背景显示。在ff下。
clear:both，
超出隐藏：{overflow:hidden}
例：overflow:hidden放在放在第二层div,然后隐藏里面一层div 超出部份。

===
内联样式表。
style="background:#000"
<div style="background:#000" class="nav">
------
   float:right;/*浮动居右*/
   clear:right;/*不允许右侧存在浮动*/

float: 和clear:both不能同时用，否则float将不能起作用。、
====
注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

=======================

图片;
<ul>
    <li><a href="#"><img src="images/pic4.gif" width="110" height="90" alt="aaa" />产品名称</a></li>
</ul>

--
定义列表：
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>
   <dd>sdlf</dd>

   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ..</dd>
</dl>
----------
.sidebars ul li.sidebar2{ border-bottom:none;} 对sidebar2起作用
.head .heads{ }   只对heads 起作用
--------------------
调用js文件代码
head头部：<script type="text/javascript" src="script/common.js"></script>
或<script type="text/javascript" language="javascript" src="/mian.js"></script>

有时候js文件，脚本要放在要执行的html代码后面。
-----------
不能显示：下a:hover下划线时，因为没有定义文本的高度。
----
外面一层div 和里面一层不能一下用padding 一下用 margin ie6不支持，要同时用padding.

-----
border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏

==================================
<link rel="icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon">

2 <link rel="shortcut icon" href="/dir/favicon.ico" mce_href="/dir/favicon.ico" type="image/x-icon">
==================================
banner 幻灯片 css===>>overflow:hidden

==================================
position: absolute; left:0;bottom:0px;

rele
absolute:绝对定位..