CSS入门

来源：互联网发布：淘宝卖家付款给买家编辑：程序博客网时间：2024/06/04 00:20

Web标准的构成？

Web标注由三大部分组成：结构（structure）、表现（presentation）和行为（behavior）.

结构标准对应的语言：XHTML

表现标准对应的语言：CSS

行为标准对应的语言:Javasctipt

HTML

什么是CSS？

CSS全称为层叠样式表（Cascading Style Sheet）,通常又称为风格样式表（Style Sheel），它是用来进行网页风格设计的。

CSS的基本语法

CSS基本语法结构：CSS规则由两部分构成，选择器和声明。声明必须放在大括号｛｝中，每条声明由一个属性和值组成，属性和值用

冒号分开，每条语句以英文分号结尾。

CSS3种最基本的选择器：标签选择器、类选择器、ID选择器。

标签选择器：标签选择器一旦声明，那么页面中所有的该标签，都会发生对应值变化。

<head>

h3{color:#090;} p{font-size:16px;}

p{font-size:16px; HTML标签声明

color:red;｝

</style>

</head>

类选择器：类选择器的名称由用户自定义。在HTML标签中，使用标签的class属性引用类样式，

即<标签名 class="类名称">标签内容</标签> 。类选择器是点出来的

<head>

h3{color:#090;} .green{font-size:16px;}

.green{font-size:16px; HTML标签声明

color:red;｝

</style>

</head>

<body>

............

</body>

ID选择器：与上两种不同在于ID选择器只能在HTNL页面中使用一次，一次它的针对性强。

<head>

h3{color:#090;} #first{font-size:16px;}

#first{font-size:16px; HTML标签声明

color:red;｝

</style>

</head>

<body>

............

</body>

在HTML中引入CSS样式：

行内样式：行内样式就是在HTML标签中直接使用上style属性设置CSS样式。

内部样式表：把CSS代码写在<head>的<style>标签中，但对内容与样式的分离也不够彻底。

外部样式：是把CSS代码保存为一个单独的样式表文件，文件扩展名为.css,可分为链接式和导入式。

链接外部样式表：就是在HTML中使用<link/>标签链接外部样式表，<link/>标签必须放在页面的<head>标签内。

<head>

...

...

</head>

href：Hypertext Reference的缩写。意思是超文本引用。href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

url: Uniform Resource Locator 统一资源定位符

src属性用来指定图片位置。此时SRC是source的简写，意思是“源”即image的源文件

rel：relationship的英文缩写·，REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=“StyleSheet”指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。

例：

（1）把页面中的CSS代码单独保存在CSS文件夹下的commom.css样式表文件中，文件代码如下：在CSS中不需要<style>标签。

#first｛font-size:16px;｝

#second{color:red;}

(2)在HTML文件中使用<link/>标签；

<head>

</head>

<body>

</body>

导入外部样式表：@import表示导入文件，前面必须有一个@符号，url("style.css")表示样式的位置

<head>

<!--

@import url("css/common.css");

-->

</head>

css复合选择器：后代选择器、并集选择器、交集选择器。

后代选择器是指通过嵌套方式，对特殊位置的HTML标签进行声明。

h2 strong{color:blue;font-size:36px;} /*用空格*/

并集选择器是多个选择器通过逗号连接而成的，风格相同。

h3,first,secong,#end{font-size:16px;color:green;} /*用逗号*/

ul li ol li,ul li ul li{font-size:16px;color:green;}

交集选择器是由两个选择器直接连接构成，没有空格键

p.first{color:blue;}

CSS继承特性：子元素会继承父元素的某些样式，如子元素有默认样式，则不继承。

样式优先原则：就近原则。行内>内部>外部

CSS美化网页元素

字体样式：font-family:"隶书"; ----设置字体类型

font-size:12px;---------设置字体大小

font-style:italic;------设置字体风格

font-weight:bold;-------设置字体粗细

font:italic bold 12px "宋体"-----在一个声明中设置字体多个属性

风格--粗细--大小--类型（顺序）

字体类型中，先设置英文字体，在设置中文字体。

如：body{font-family:Times,"Times New Roman","楷体";}

有空格用引号汉字用引号

p{font-family:Verdana,"宋体";}

1、字体大小： h1{font-size:16px;} 大小单位还有in/cm/mm/pt/pc

2、字体风格： h2{font-style:italic;} 字体风格属性有normal/italic/oblique

3、字体粗细： p span{font-weight:bold;} 字体粗细属性有normal/bold/bolder/lighter

4、字体的属性：对同一部分的字体设置多种字体属性，各个属性之间用英文空格分开，顺序依次为

字体风格--字体粗细--字体大小--字体类型

如：p span{italic bold 14px "楷体";}

使用CSS排版网页文本：样式有文本颜色、水平对齐方式、首行缩进、行高、文本装饰、垂直对齐方式。

color:#00C;---------文本颜色

text-align:right;---水平对齐方式（left/right/center/justify）justify两端对齐

text-indent:2em;----首行缩进

line-height:25px;---行高 (垂直居中时使用)

text-decoration:underline--文本装饰（none/underline/overline/line-through/blink）

图片对齐方式：vertical-align:top/middle/buttom text-align:

使用CSS设置超链接：所谓伪类，就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式。

a:link{color:#oo;text-decoration:none;} --为访问时超链接样式

a:visited{color:red;text-decoration:underline;} --单击访问后超链接样式

a:hover{color:blue;text-decoration:underline;} --鼠标悬停时超链接样式

a:active{color:green;text-decoration:underline;} --鼠标单击未释放超链接样式

使用CSS设置鼠标形状：

detault(默认光标）pointer（超级链接指针） wait(指示程序繁忙) help(指示可用帮助) text(指示文本) crosshair（十字状）

注意：在页面中没有加超链接文本时，如按钮，需鼠标呈手状，则要为页面中<span>标签增加： span{cursor:pointer;}

背景样式:background

<div>:该标签可对HTML文档分割成独立的不同的部分，因此<div>用来进行网页布局。

设置页面中id名称为header的<div>的宽高

#header{width:px;height:200px;}

背景属性：背景包括背景颜色（background-color）和背景图像（background-image）两种方式。

背景颜色（background-color）有一个特殊值--transparent(透明色），该色是background-color属性的默认值。

背景图像（background-image）通常与背景重复（background-repeat）背景定位（background-position）同用。

background-image:url(图片路径);

background-repeat:no-repeat/repeat/repeat-x/repeat-y(只沿垂直方向平铺)

background-position:Xpx Ypx/X% Y%/X Y

30px 40px/50% 50%/right center/left bottom

背景： background:#C00 url(../image/down.gif) 200px 100px no-repeat;

背景颜色背景图像背景定位背景重复

列表样式：

list-style-type:none/disc/circle/square/decimal（数字）;

list-style-image:url(图片路径);

list-style-position:inside/outside; (定位)

list-style:circle outside url();

类型定位图像

list-style-type:none; /*设置无标签符号*/

15:37 2015-7-29

盒子模型：CSS将网页中所有元素都看成一个个盒子。盒子模型属性有边框、内边距、外边距。

边框（border）有三个属性:color/width/style

top

right

border-bottom --color/width/style(none/dashed/solid

left

border简写属性： border-bottom:2px #F00 dashed;

border:2px #F00 dashed; /*四边框都相同*/

外边距（margin）位于盒子的边框外，指网页中元素与元素之间的距离。

margin:3px 5px; /*指上下为3px,左右为5px*/

margin:0px auto; /*指上下为3px,左右外边距自动居中*/

内边距（padding）:用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。

padding-left:30px;

padding:3px 5px 5px 10px;

盒子模型总尺寸=边框+内边距+外边距+内容宽度

15:45 2015-7-30

标准文档流：简称“标准流”，是指在不使用其他的排版和定位相关的特殊CSS规则中，各种元素的排列规则，即CSS规则的网页元素默认的排列方式。

组成：由块级元素和内联元素组成。

块级元素（blocklevel):它们总是以一个块级形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满，如<p>/<h1>/<ul>/<li>/<div>

内联元素（inlink)：对于文字这类元素，各个字母之间横向排列，到最右端自动折行。如<span>/<a>/<img/>/<strong>

display的属性：

block：块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符；

inline：内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符；

none:设置元素不被显示；

浮动

7.1 网页布局

网站基本上都包括网站导航（网站logo、导航菜单）、网页主体内容、网站版权（网站声明、相关链接）这3部分。

浮动的属性：float:left/right/none;

清除浮动：clear:left/right/both/none;

溢出处理：overflow:visible/hidden/scroll/auto;

扩充盒子的高度：<div class="clear"></div> .clear{clear:both;}

overflow:hidden;

定位网页元素

在CSS中有3种基本的定位机制，分别为标准流、浮动和绝对定位。

position 属性：

1.static:默认值，没有定位，元素按照标准流进行布局；

2.relative:相对定位，以标准流的排版方式为基础，使盒子相对本身的标准位置偏移指定位置。

3.absolute:绝对定位，相对于有定位的父级元素的位置（没有取body）,该盒子脱离标准流，并且不影响其他元素位置。

4.fixed:固定定位，只于浏览器窗口为基准进行定位，当拖动浏览器窗口的滚动条时，保持相对位置不变。

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

默认值：auto继承性：no版本：CSS2JavaScript 语法：object.style.zIndex="1"

可能的值

值描述auto默认。堆叠顺序与父元素相等。number设置元素的堆叠顺序。inherit规定应该从父元素继承 z-index 属性的值。

关于伪类元素:before和:after

Posted@2011-11-02 3:02 p.m.

Categoriescss

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

#example:before {    content: "#";    color: red;}#example:after {    content: "$";    color: red;}

这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下:

Here is the example content

需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。

#example:before {    content: "";    display: block;    width: 100px;    height: 100px;}

伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

除了插入文字内容，还可以指定其他内容：

p:before {    content: url('img.jpg');}a:after {    content: attr(href);}

attr()函数会返回指定元素对应属性的值

最后，奉上最惦记的浏览器支持情况

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
Pretty much all mobile browsers.

放在伪类元素里面的内容一般都只是装饰性的，所以即便是IE6/7不支持也应该能降级到正常显示主体内容。

:before和:after的一些惊人用法

>. clearfix hack

如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS，所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现：(viaNicolas Gallagher)

/* For modern browsers */.clearfix:before,.clearfix:after {    content:"";    display:table;}.clearfix:after {    clear:both;}/* For IE 6/7 (trigger hasLayout) */.clearfix {    zoom:1;}

#yin-yang {

    width: 96px;    height: 48px;    background: #eee;    border-color: red;    border-style: solid;    border-width: 2px 2px 50px 2px;    border-radius: 100%;    position: relative;}#yin-yang:before {    content: "";    position: absolute;    top: 50%;    left: 0;    background: #eee;    border: 18px solid red;    border-radius: 100%;    width: 12px;    height: 12px;}#yin-yang:after {    content: "";    position: absolute;    top: 50%;    left: 50%;    background: red;    border: 18px solid #eee;    border-radius:100%;    width: 12px;    height: 12px;}

阅读全文

0 0