首页 > 代码库 > css基础

css基础

CSS简介

CSSCascading Style Sheets,层叠样式表、样式表),我们可以根据需要来修改某一个HTML元素的样式。

XHTML是结构标记:哪些地方是段落,哪些地方是项目符号,哪些地方是图片等

CSS是表现、格式:这个段落文本颜色、大小、对齐方式、边框、背景颜色等。

 

 

结构和表现分离:

 

<style  type=text/css>

 

p{

 

color:#FF0000;

 

font-size:24px;

 

font-family: 黑体;

 

background-color#f0f0f0;

 

border:1px dashed #000000;

 

letter-spacing10px;

 

}

 

</style>

 

 

 

<p>My name is bruce</p>

 

 

技术分享

 

一个样式表<style></style>由多个样式规则构成;

一个样式规则由“选择器”和“格式声明语句”构成,如:h1就是选择器,{}中的语句就是格式定义;

选择器就是要定义样式的HTML元素(标记)

格式声明语句放在{}中,{}中由多个格式声明语句构成;比如:color:red;

格式语句由“属性名称”和“属性值”构成,属性名称和属性值间用冒号隔开,每个格式语句必须以分号结束

 

 

CSS选择器:选择HTML标记加样式

一、 基本选择器

1)通用选择器(*)

        格式:*{font-size:24px;}

     说明:通用选择器(*),将匹配所有的HTML标记。

     注意:通用选择器(*)IE6不支持,建议尽量少用。

2)标签选择器,对应于所学的HTML标记

     格式:h1{color:#FF0000;}

        举例: h2{color:#FF0000;}

                   p{font-size:14px;line-height:150%;color:#9900CC;}

                   li{color:#0000ff;text-decoration:underline;cursor:pointer;}

3)类样式:就是给一类HTML元素添加样式,类样式以.开头。(使用最多的样式)

     可以同时给多个HTML元素增加class属性,class属性的值可以一样。

        <div class=news”>Welcome to Guangzhou</div>

        <p  class=news”>这是一个段落</p>

       <style  type=text/css>

.            news{ color:#FF0000; font-size:24px; }

       </style>

4id选择器:给标记特定id属性的HTML元素添加样式,id选择器必须以“#”开头。

                       HTML元素的id属性的值,必须唯一。

                       Id属性就相当于身份证号一样,不能重复;

                       HTML元素的id属性,一般是给JS使用;

                       <div  id=box></div>

                            <style  type=text/css>

                                 #box{color:#FF0000;}

                            </style>

 

 

二、组合选择器

1)多元素选择器:E,F,G,H{color:#FF0000;}

              说明:同时给E元素、F元素、G元素、H元素增加样式,多个元素间用逗号隔开

                        body,div,ul,li,ol,dt,dd,p,form,a{ margin:0px; padding:0px; }

                        div.box,div#header,form{ color:#FF0000; }

                        div.box含义:class=box”的<div>元素;

                        div#header含义:id=header”的<div>元素;

2)后代元素选择器

              格式:E  F{color:#FF0000;}

              说明:E元素的所有后代F元素,增加样式,中间用空格隔开

.                                  news  li{width:400px;border:1px solid #006600;}

 

3)子元素选择器

              格式:E > F{color:#FF0000}

              说明:匹配E元素的子元素F,增加样式

                         举例:.news > .title{background-color:#FFCC66;}

 

 

三、 伪类选择器:一般是给超级链接<a>增加CSS样式

一个链接有四种状态:正常状态(:link)、放上状态(:hover)、激活状态(:active)、访问过的状态(:visited)

1)全局链接样式的设置

          a:link,a:visited{color:#0000FF;text-decoration:none;}

          a:hover{color:#990000;text-decoration:underline;}

2)局部链接样式的设置:给一类链接加样式

        <a class="a1" href="http://www.mamicode.com/#">市区惊现老虎</a>

        a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}

        a.a1:hover{ color:#FF00FF;border:1px solid #996600;}

 

 

 

CSS尺寸属性

width:指定元素的宽度,单位是 px%

height:指定元素的高度,单位是px%

注意:任何HTML元素,都可以看成一个“盒子”,都具有widthheightpadding(内边距)margin(外边距)borderbackgroun(背景)。  比如:<b><i><font><span><div><table>

 

CSS字体属性

font-family:设置字体

font-weight:粗细,取值:bold,相当于<b>

font-style:斜体,取值:italic,相当于<i>

font-size:文字大小

font:简写的形式,各个属性值间用空格隔开

body{ font-size:24px; font-family:黑体; font-weight:bold; font-style:italic; }

body{ font:bold italic 24px 黑体; }

 

CSS文本属性

Color:文本颜色,取值:英文单词、10进制、16进制;

text-align:文本的水平对齐,取值:left  center  right

text-decoration:文本修饰线,取值:noneunderlineoverlineline-through

text-indent:首行缩进,text-indent:36px;

letter-spacing:字间距

line-height:行高,line-height:150%;   line-height:24px;

 

CSS列表属性

list-style-type:列表的类型,取值:nonedisccirclesquare

list-style-image:列表的图片,list-style-image:url(images/li01.gif);

list-style-position:符号的位置,取值:outside()inside()

list-style:简写形式

.li01{ list-style-type:none;list-style-image:url(images/li01.gif);list-style-position:outside; }

.li01{ list-style:url(images/li01.gif) disc outside;}

实现:单行文本在一个“容器”中垂直居中,使用的原理是,heightline-height值一样,就可以实现。

 

 

CSS背景属性

background-color:背景颜色

background-image:背景图片,格式:background-image:url(images/bg.gif)

background-repeat:背景平铺,取值:no-repeat(不平铺)repeat(平铺)repeat-x(水平方向)repeat-y(垂直方向)

background-position:水平方向 垂直方向,

background-positionleft|center|right  top|center|bottom;   //水平垂直都居中

background-position50%  50%;

background-position100px  200px;  //背景图距离左边100px,距离顶边200px

background-attachment:当移动滚动条时,背景是固定(fixed)还跟着滚动(scroll)

background:简写形式

.box{ background-image:url(images/bg.gif); background-repeat:no-repeat;background-position:center center;}

.box{background:url(images/bg.gif) no-repeat center center;}

 

 

CSS清除和浮动

Float:使HTML元素向左或向右浮动,取值:leftright

浮动的元素,可以向左或向右浮动,直到碰到包围框的边上或者上一个浮动框的边上为止;

浮动的元素将脱离普通文档流,并且不再占用空间,浮动元素的层级要高于普通文档流中的元素。

浮动元素将生成块元素,不管它原来是什么元素(块元素、行元素)。换句话说,行内元素浮动后,将变成块元素,就可以设置widthheight

注意:行内元素<span>设置widthheight是没有用的,行内元素主要是靠内容决定widthheight

 技术分享

 

 

Clear:清除上面的浮动特性,取值:left(左浮动)right(右浮动)both(两者)

1)如何让包围元素从“视觉上”包住浮动元素呢?就需要在包围元素的最下边(浮动元素)加上一个清除浮动。

2)清除浮动的后面的其它元素,都将恢复默认排版。

 

 

CSS盒子模型

每一个HTML元素,都可以看成一个“盒子”。

一个“盒子”具有:内容的宽或高、边框线、内边距、外边距。

一个“盒子”具有:widthheightborderpaddingmargin

 技术分享

 

 技术分享

 

 

CSS边框属性

border-left:设置元素的左边线,border-left:粗细 线型 颜色;

例如:border-left:2px solid #FF0000;

border-right:设置元素的右边线

border-top:设置元素的顶边框线

border-bottom:设置元素的下边框线

border:简写形式,同时设置四个边框线;

border:1px solid #FF0000; //同时设置四个边框线

线型的取值:

none:无边线;

solid:实线;

dashed:虚线;

dotted:点状态线

double:双线

 

 

CSS内填充(内边距)

padding-top:上内填充距离

padding-right:右内填充距离

padding-bottom:底内填充距离

padding-left:左内填充距离

padding:简写形式

padding5px;   //上右下左内填充分别为5px

padding5px 10px;  //上下分别为5px,左右分别为10px

padding5px 10px 15px;  //上填充5px,左右分别为10px,下填充为15px

padding5px 10px 15px 20px;  //顺序必须为:上右下左,上填充5px,右填充10px,下填充15px,左填充20px

 

 

CSS外边距

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

margin:简写形式

margin:5px;   //上右下左,外边距分别为5px

margin:5px 10px;  //上下分别为5px,左右外边距分别为10px

margin:5px 10px 15px;  //上外边距5px,左右外边距分别10px,下外边距15px

margin:5px 10px 15px 20px;  //分别设置四个外边距,顺序是:上右下左

 

 

外边距合并的问题(怪异现象)

两个垂直块元素的上下外边距,会发生合并的问题,取其中较大的一个值。

行内元素、浮动元素、定位元素,外边距不会发生合并;

解决的方法:

1)只能其中一个元素增加下外边距,另一元素的上外边距设置为0px

2)也就是在上下两个元素的中间,加一个100px高的空<div>

 

 

 

HTML引入CSS的方法

1、内嵌式

通过<style></style>标记来引入CSS代码,<style>一般放在<head>标记中;

<stype type=text/css>

body{

margin:0px;

padding:0px;

}

</style>

2、外链式:链接外部的CSS文件(.css)

通过<link>标记,来引入外部的CSS文件,<link>标记一般放在<head>标记中。

格式:<link  href=http://www.mamicode.com/CSS文件路径” rel=stylesheettype=text/css/>

href:指定外部CSS文件的路径和名称;

rel:当前文件与链入的文件的关系,取值:stylesheet

例如:<link  href=http://www.mamicode.com/css/public.cssrel=stylesheettype=text/css/>

 

3、行内式

每一个HTML元素都有一个公共属性style,通过该属性可以直接给该元素添加样式,并且它的优先级最高

<p  style=width:400px;height:300px;border:1px solid #444;padding:20px;>这里是一个段落</p>

 

选择器优先级:行内样式 > ID选择器 > 类选择器 > 标签选择器

 

css基础