CSS3基础

1 样式表的使用

1.内联样式表。

只影响单个元素，常用于标签。

2.内部样式表。

对本页面元素起作用，一般写在

中，用

定义。

<head>

<title>

无标题文档

</title>

<style>

body{

font-family: "

宋体

}

</style>

</head>

3.连接外部样式表。

建立一个外部

CSS

文件用

link

元素引入到

HTML

中。

总结：

CSS

内联：就是把

CSS

放在

HTML Head

里使用

Style

包围。

CSS

外联：就是把

CSS

放到一个单独的文件里，然后在

HTML

通过调用。

。

我们知道

HTTP

请求是比较昂贵的，

CSS

内联的话肯定会更快，因为把

CSS

放到

HTML

文件里，这意味着减少了一次

HTTP

请求。而外联的话就是一次

HTTP

请求，但是可以缓存，当浏览器加载过这个文件时，第二次请求的时候是第缓存里读取的，所以第二次请求时是很快的，外联的

CSS

还可以重用代码。那到底是使用内联还是外联呢？这就要看需求，如果一个页面不需要缓存时，也就是这个页面不太访问，或者访问不多的时候，比如注册页面，一般情况下人家只会进入一次，不可能第次进入这个网站你都去注册，那就另当别论了，这个页面不需要缓存，把

CSS

放在

Head

里时可以缩短加载时间，提高用户体验。对于经常访问的页面，外联肯定是不二的选择。

在一些大的网站，如：

Google

，

Yahoo

也可以看到把

CSS

写在

Head

里。对于结构表现行为分离的原则，我们对于

CSS

入在

Head

里是可以接受的，只要不是写在元素上面。

2 定义选择器

选择器分两个种类，第一种为

DOM

选择器，包含类型选择器、类选择器和选择元素一部分和

选择器，第二种包含伪选择器。

1.按照类型选择元素。

以标签为单位来设置相同的显示样式，不需要定义前缀符。

<style>

font-family: "

宋体

";color: red;

}

a{color: #ADADAD;}

</style>

2.按照类型选择标签。

以标签样式类型选择为选择条件，类型为

class

，

“.”

为前缀，可以对多个标签应用样式，也可以派生样式。

<head>

.anyname{

font-family: "

宋体

color: #ADADAD;

width: 100px;

height: auto;

border: 1px solid blue;

}

</style>

</head>

<body>

</div>

</body>

3.按照ID选择元素

类似与类型选择器，以

“#”

为前缀，在标签中加入

属性引用样式。

<head>

#box{

font-family: "

宋体

color: #ADADAD;

width: 100px;

height: auto;

border: 1px solid blue;

}

</style>

</head>

<body>

</div>

</body>

4.选择元素的一部分

单独选择元素从而不影响其他元素，有子元素选择器和多重元素选择器。

子元素选择器

h1>strong{color:red;}

或者：

h1 strong{color:red;}

注：只对第一层有效

多重元素选择器

优点在于避免过多的

、

class

属性设置，直接对所需元素进行定义。

#anyname p li a{float:right; color:#ADADAD;}

选择部分元素

实现多个元素或标签设置为同一样式。

html {color:black;}

p {color:blue;}

h2 {color:silver;}

</style>

5. 伪类选择器

CSS

中已经定义好的选择器，不可以重命名。

1)<a>

标签中的集中选择器

a:link

表示未访问的链接

a:visited

表示已访问的链接

a:hover

表示鼠标悬停的链接

a:active

表示选定的链接（被按下时）

注：在

CSS

定义中，

a:hover

必须被置于

a:link

和

a:visited

之后，才是有效的。

在

CSS

定义中，

a:active

必须被置于

a:hover

之后，才是有效的。

如：

a:link{color:#ADADAD;text-decoration:none;}/*none

表示将默认下划线去掉

2)CSS

中四个伪元素选择器

First-line

对所选标签元素的第一行应用样式

p:first-line{color:red;}

First-letter

对所选标签元素的文字首字母应用样式

p:first-letter{color:bule;}

Before

在某个元素前插入一些内容

li:before{content:”^^^”;}

After

在某个元素后插入一些内容

li:after{content:”(

仅用于测试

)”;}

3 文本与排版样式的使用

1. 长度、百分单位

像素（

）与百分比是常用的长度单位。

在没有

CSS

规则限制下，长度关系：

1em(

相对单位

)==16px(

像素

)==0.17in(

英寸

)==12pt(

点

)==1pc(

派卡

)==4.2mm(

毫米

)==0.42cm(

厘米

)

2. 文本样式属性

1) text-shadow

文字阴影。

div {

text-shadow: 10px 10px 10px orange,/*x

偏移量，

偏移量，模糊半径，颜色

40px 40px 40px yellow,

20px 20px 23px #ADADAD;/*

设置多个文字阴影

font-size: 50px;

font-weight: bold;/*{normal|bold|bolder|lighter|inherit}*/

font-family: "

宋体

color: navy;

}

2) word-wrap

文本的控制换行。用于指定区域如

div

显示不完一行文字的时候为了不超出区域范围而使用的强制换行。

Word-wrap; normal | break-word

*normal

只能在两个单词之间折断，

break-word

允许词内换行

3) webfont

与

font-face CSS3

中

webfont

功能使网页上能显示服务器端的字体。

使用方法：直接在

中插入以下代码

@font-face{

font-famliy:WebFont;

src: url('Font_Sans_R_45b.otf')format("opentype");/*

应用服务器端字体

font-weight: normal;

}

4) font-size-adjust

可以保持字体在大小部发生变化的情况下改变字体的类型。

font-size-adjust: 0.46;

5) text-ouline

与

text-stroke

轮廓控制属性。

Text-outline: 2px 4px red; /*

宽度，模糊半径，颜色

Text-stroke

描边控制

-webkit-text-stroke:3px #ADADAD; /*

宽度，颜色

4 背景和颜色的使用

1. 背景颜色

网页背景颜色设置：

Background-color: transparent | color /*

透明或者设置颜色

HSLA

：

色调

(0-360,0&360==red,120==green,240==bule)

，饱和度

(100%)

，亮度

(100%)

，透明度

(0~1)*/

div.a{background:hsla(120,35%,50%,0.2);height: 20px;}

2. 背景图片

格式如下：

Body{background-img:url(../picture.jpg);}

关于

background

还有一些属性如

-cilp

、

origin

、

size

等控制背景图片位置等属性

5 盒子概念与使用

1. 元素外边界。

外边界定义了矩形对象与其他矩形对象的距离，即模块与模块之间的空隙。

margin-bottom: 10px;/*

下边界

margin-left: 20px;/*

左边界

padding: 40px 30px 20px 60px;/*

上下左右边界

margin: 0 auto;/*auto

居中

2. 元素边框

可以定义边框粗细。

border: 50px #ADADAD;/*

定义粗细，颜色

border-style: solid dotted double dashed;/*

上下左右边框单独设置样式

border-style

属性：

3. 元素内边界

内容与边框的空隙，与外边界属性类似。

padding: 40px;

设置一个的时候表示上下左右距离一样，也可以用分别设置上下左右边界距离。

padding: 40px 30px 20px 60px;

4. 内容的宽度、高度设置

在设置边框的时候可以一同定义内容的宽高度。

div.a{

background:hsla(120,35%,50%,0.2);height: 20px;width:200px;

margin-bottom: 10px;/*

外边界定义

margin-left: 20px;

margin: 0 auto;

padding: 40px 30px 20px 60px;/*

内边界定义

height: 100px;/*

宽高度定义

width: 100px;

border: 50px #ADADAD;/*

边框定义

border-style: solid dotted double dashed;

}

5. 列表样式

常见的列表属性值

list-style-type /*

设定引导列表的符号类型

list-style-image /*

选择图像作为项目的引导符号

list-style-position /*

决定列表项目缩进

常见的列表符号属性

Circle

设定类型

Square

图像

Decimal

阿拉伯数字

Lower-roman

小写罗马数字

Wpper-roman

大写罗马数字

Lower-alpha

小写字母

Wpper-alpha

大写字母

None

不现实项目符号

Disc

实心圆

在

style

中使用列表样式

List-style-type:decimal;

想要学习前端开发的同学，可以加群：

543627393

学习哦