黑马程序员-自学笔记-CSS基础

来源：互联网发布：macair怎么卸载软件编辑：程序博客网时间：2024/05/16 14:45

CSS基础

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------

1、样式表、CSS

1）CSS（层叠样式表，CascadingStyle Sheet）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。

2）使用CSS的好处：

样式表能实现内容与样式的分离，方便团队开发

方便统一定义格式,修改也方便.

外观美化布局、定位

HTML标签的外观样式比较单一

页面色彩不生动

样式修改不方便

样式表的作用：为网页设置外观，相当于华丽的衣服。

2、常见CSS样式

1）Css样式的属性的键值对之间用“：”（冒号）隔开，而不同的属性之间用”;”（分号）隔开。

2）css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。

3）background-color:Red;背景颜色；

4）color：文本颜色

5）border-style:solid;边框风格，实线（默认是没有），还有dotted(点)等值；

6）border-color：边框颜色；

7）border-width：边框宽度(默认是0)。

style="border-color:Red;border-width:1px;border-style:dotted;"

8）display：元素是否显示，可选值none（不显示）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符 ,为div增加display:inline;样式后与span显示效果一致。注意：【

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> 】）等。

9）cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。

10）LI不显示圆点：LIST-STYLE-TYPE:none;一般设在li或者ul上

11）margin(与表格的cellspacing属性类似)、padding(与表格的cellpadding类似。)

3、使用CSS的三种方式

CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！

1）元素内联(行内样式表)，直接将样式写入元素的style属性中，<inputtype="text" readonly="readonly"style="background-color: #FF00FF" />，适用于样式没有可复用性的场合。

2）页面嵌入（内嵌样式表）：在head中加入

<styletype="text/css">

input{border-color:Yellow;color:Red;}

</style>

表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积

3）外部引用（外部样式表），将css内容写入css后缀的文件

textarea{background:yellow}

然后在页面中引用，在head中加入

适合于多个页面共享css。

4）推荐把尽可能多的样式写到单独的css文件中，这样可以复用，美工人员和开发人员很好的分工。

只有页面特有的样式才写到<style>中

只有元素特有的样式才写到元素的style属性中。

如果不同级别的样式有冲突，详细级别、子元素的会覆盖更高级别、父元素的。就近原则。

CSS中的注释： /* */

4、样式选择器

1）对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，三种：标签选择器、class选择器和id选择器。

2）标签选择器input{border-color:Yellow;color:Red;}，对于指定的标签采用统一的样式

3）class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

样式名称开头加“.”

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

4）同一个标签可以应用多个类选择器（空格隔开）。如果样式表中的定义有重复，则以最后一个定义为准。

5）选择器的优先级：Style > Id选择器 > 类选择器 > 标签选择器

5、标签+class选择器

class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

input.accountno{text-align:right;color:Red;}

label.accountno{font-style:italic;}

<labelclass="accountno">333333333333333333</label>

6、id选择器

1）为指定id的元素设定样式，id前加#

#username

{

font-size:10px;

}

2）style、class可以同时组合使用

7、更多选择器

1）包含选择器：

P strong{ background-color:Yellow}

表示P标签内的strong标签内的内容使用的样式

<strong>fadsfasdfads</strong>

<p><strong>adfasfd</strong></p>

2）组合选择器，同时为多个标签设定一个样式

H1,H2,input{background-color:Green}

<h1>nihao</h1>

8、伪选择器

1）伪选择器：为标签的不同状态设定不同的样式：

A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。

A:visited {TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:link {TEXT-DECORATION: none}

A:hover {TEXT-DECORATION: underline}

说明：TEXT-DECORATION:none表示超链接不显示下划线。

2）不是所有的元素都支持伪选择器。

9、细边框表格

1）table的border-collapse样式。

separate:边框独立。

collapse：相邻边缘被合并。如：

<html>

<head>

<title> new document</title>

<styletype="text/css">

{

border:1px solidblue;

}

table

{

/*border-collapse:collapse;*/

}

</style>

</head>

<body>

<tablecellpadding="0" cellspacing="0">

<tr><td>three</td><td>four</td></tr>

</table>

</body>

</html>

2）使用ul和li制作横向和纵向菜单(*)

布局最重要的一个属性就是float

ul li { float:left; list-style-type:none; margin-left:30px; }

动态二级菜单，如：

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>css菜单演示</title>

<styletype="text/css">

<!--

*{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/

body {font-family: arial, 宋体, serif; font-size:12px;}

/*下列菜单样式*/

#menu {width:778px; height:22px;margin:auto; background:#FF2700}

#nav{line-height: 22px;list-style: none; background:#666;}

#nav a {display:block; width: 80px; text-align:center;}

#nav a:link{color:#fff; text-decoration:none;}

#nav a:visited{color:#fff;text-decoration:none;}

#nav a:hover{color:#FFF;text-decoration:none;}

#nav li {float:left; width: 80px; background:#FF2700;}/*首层背景色*/

#nav lia:hover{background:#FF2700;}/*经过背景色*/

#nav li ul{line-height: 22px; list-style-type: none;text-align:left;left: -999em; width:100px; position: absolute;}

#nav li ulli{float: left; width: 100px;background:#ECECEC; border:1px solid #FF2700;border-top:none;border-right:none}/*下列列表层背景色,属性*/

#nav li ula{display: block; width: 84px;text-align:left;padding-left:16px;}

#nav li ul a:link{color:#666; text-decoration:none;}

#nav li ula:visited {color:#666;text-decoration:none;}

#nav li ula:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;}/*下列列表层经过属性*/

#nav li:hover ul{left: auto;}

#nav li.sfhoverul {left: auto;}

/*下列菜单结束*/

-->

</style>

<scripttype=text/javascript><![CDATA[//><!--

function menuFix() {

var sfEls =document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=(this.className.length>0?" ": "") + "sfhover";

}

sfEls[i].onMouseDown=function() {

this.className+=(this.className.length>0?" ": "") + "sfhover";

}

sfEls[i].onMouseUp=function() {

this.className+=(this.className.length>0?" ": "") + "sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(newRegExp("( ?|^)sfhover\\b"),

"");

}

window.onload=menuFix;

//--><!]]></script>

</head>

<body>

<divid="menu">

<ulid="nav">

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

10、Div+CSS布局(*)

1）网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。

2）不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。

3）Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。

4）布局最重要的一个属性就是float。

float，浮动。什么是浮动？

布局模式：

1.文档流

2.脱离文档流

2.1 float（浮动）

2.2 position(绝对定位)

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title> New Document </title>

html,body

{

height:100%;

}

</style>

</head>

<divstyle="float:left;width:100px;height:100px; border:1px solidblue;">

</div>

<divstyle="float:right;width:100px;height:100px; border:1px solidblue;">

</div>

</div>

</body>

</html>

案例：顶部菜单

#nav ul

{

list-style-type:none;

}

#nav ul li

{

float:left;

margin:010px;

}

.menuSeparator{width:1px;height:18px;background:Red}

</style>

<divid="nav">

<ul>

<liclass="menuSeparator"></li>

<liclass="menuSeparator"></li>

</ul>

</div>

li中的项横排显示是float:left;的作用，margin:010px;的作用是不让各个项之间紧挨着。项之间的分割竖线是用一个宽度为1，高度为18的红色背景的li做的。

11、文档流

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

position 有五个值：static、relative、absolute、fixed、inherit。

static

是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页时，没有指定position，也就表示使用static。

relative

没有脱离布局流，此时可以使用 top、right、bottom、left 属性。

top 和 bottom 共存时，使用 top 值，忽略 bottom 值；

left 和 right 共存时，使用 left值，忽略 right 值；

relative 是相对位置，指相对于元素的 position 为 static 时的位置：

top 相对于 static 下移多少像素（若 top 是负值，则上移）。

right 相对于 static 左移多少像素（若 right是负值，则右移）。

bottom 相对于 static 上移多少像素（若 bottom是负值，则下移）。

left 相对于 static 右移多少像素（若 left是负值，则左移）。

使用 relative 之后：

原来的空间不会被其他元素挤占。

元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。

absolute

脱离布局流，此时可以使用 top、right、bottom、left，但这些属性不再是相对于 static时的位置，而是相对于 containingblock 的，相对于其边框内边缘的，而不是其padding 内边缘。

使用 absolute 之后：

原来的空间会被其他元素挤占。

元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。

fixed

它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕的指定位置。在IE6 中不支持这个属性；在IE7 中支持这个属性但需要指明DOCTYPE；Firefox 等浏览器支持这个属性。

top、right、bottom、left 属性指相对于视口的。

inherit

继续父元素的 position 值。

名称解释

视口－通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。

12、框架简介

1）frameset 框架页里不能有body.

<framesetcols="20%,80%">

<framesrc="left.htm" noresize/>

<framesrc="main.htm" noresize/>

</frameset>

<body>当浏览器不支持框架时，显示这个body中内容</body>

</noframes>

</frameset>

测试target属性的其他取值：top、parent、框架名。

2）Iframe(不分割当前页面，就可以嵌入其他页面。)

3）rows:表示把页面按照行，分割成几部分

cols:表示将页面按列分割成几部分。

frameset：是将一个页面分割成多个子页面。

iframe:是在一个页面中（在body中）的某个部分。嵌入一个新页面。

13、其他及盒子模型

1）当使用表格布局的时候，不要建一个非常复杂的表格，而是使用表格嵌套表格，这样虽然代码会多点，但思路清晰，便于修改。

2）!important提高优先级。（color:red!important; color:green;最后显示是red;）

3）z-index

4）@importurl(xx.css);

在一个css中，添加对其他css文件的引用。

5）/CSS中的注释：/* */

6）盒子模型。

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------