一、CSS概述

内容的样式

英文全称: Cascating Style Sheets^注释1

二、CSS语法

基本语法格式

p{
font-size:#;——>字体大小
color:blue; ——–>字体颜色

font-weight:bold;——>加粗
}

注意:

1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。

2、为了使用样式更加容易阅读,可以将每条代码写在一个新行里。

1、css添加方法

a: 行内添加

<!DOCTYPE HTML>





学习笔记CSS篇





</!doctype>

b: 内嵌样式

<!DOCTYPE HTML>






学习笔记CSS篇,内嵌样式的添加





</!doctype>

c: 单独文件

外部样式表文件 style.css

p{color:#;}

网页文件 12.html



使用 href 链接到 css文件

单独样式的优点

页面结构HTML代码与样式CSS代码的完全分离,便于维护

如果需要改变网站的风格,只需要修改公共CSS文件即可

可以在同一个HTML文件中引用多个外部样式表

2、 添加方式的优先级

_ 多重样式可以层叠,可以覆盖

_ 样式的优先级按照“就近原则”

_ 行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式

三、CSS选择器

1、标签选择器

采用内嵌式时,以body、h1、p等直接作为标签名




标题






正文的段落

版权所有

2、类别选择器

printf()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
> <style type="text/css">
> p{ font-size:12px;}
> .one{ font-size:13px;}
> .two{ font-size:14px;}
> </style>
> <body>
> <p class="one">类型1</p>
> <p class="two">类型2</p>
> <p class="three">类型3</p>
> <p class="four">类型4</p>
> <p class="five">类型5</p>
> <p>普通的段落文字</p>
> </body>
>

3、ID选择器

printf()

1
2
3
4
5
6
7
8
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>

4、嵌套声明

printf()

1
2
3
4
5
6
7
8
<style>
p span{
color:#;
}
</style>
<body>
<p><span>学习</span></p>
</body>

5、文本样式格式

属性 描 述 取值
color 文本颜色 red #f00
letter-spacing 字符间距 2px、3px
line-height 行高 14px 1.5em 120%
text-align 对齐 center left right justify
text-decoration 装饰线 none overline underline line-though
text-indent 首行缩进 2em

6、背景设置

1、背景属性

空元素需要先定义元素的高度和宽度

background-color

background-image–背景图片 url(“logo.jpg”)

background-repecat–背景图片的填充方式 repeat repeat-x(横向填充) repeat-y(纵向填充) no-repeat(填充一次)

bacground

2、CSS超链接

超链接的四种状态

a:link 普通的、未被访问的链接

a:visited 用户已经访问的链接

a:hover 鼠标指针位于链接的上方悬停

a:active 链接被点击的时刻

:伪类选择器

顺序

a:hover 必须位于a:link 和a:visited之后

a:active 必须位于a:hover之后

3、列表样式

life-style 所有用于列表的属性设置于一个声明之中

list-style-image 为列表项标志设置图像

list-style-position 标志的位置

list-style-type 标志的类型

无序列表ul和有序列表ol

4、表格的样式

表格大小 属性 width(宽),height(高)

printf()

table{

1
2
3
width:500px;

height:200px;

}

表格边框属性boder

1
2
3
table,td,th{
boder:1px solidn#eee
}

td标签—单元格的样式

th标签—表头的样式

另一个属性 boder-collapse —内外边框重叠问题

1
2
3
table{
boder-collapse:collapse;
}
5、CSS表格–奇偶选择器 :nth-child(odd|even)
1
2
tr:nth-child(odd)
background-color:#EAF2D3;

四、CSS布局和定位问题

1、盒子模型

概念

页面上的区域、图片、导航、列表、段落都可以是盒子

除了content之外其他的都是属性的名字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
> <html>
> <head>
> <style type="text/css">
> #box{
> width:100px;
> height:100px;
> border:1px solid;
> padding:20px;
> margin:10px;
> }
> </style>
> </head>
> <body>
> <div id="box">
> 你猜啊
> </div>
> </body>
> </html>
>
>

2、盒子属性

border-width: px thin medium thick

border-style:dashaed^注释2 dotted^注释3 solid^注释4 double^注释5

border-color: 颜色

border:width style color

五、CSS定位机制

概述:就是盒子的位置

三种定位机制

1、文档流 flow定位:默认的方式

2、浮动 float定位:设置float属性

3、层定位 layer:设置position属性

1、文档流定位

1、元素分类

block类型每个此类型的元素都要独占一行

常见的block元素有:

···

inline类型 : 每个元素不单独占一行,且width height不可设置

常见的inline元素有:

–显示为inline元素 display:inline–

inline-block类型 : 不单独占据一行,但是可以改变设置

常见的inline-block 元素有:

2、元素转换类型

display类型

2、浮动定位

float属性


width:200px;
height:200px;
boder:1px solid red;
float:left;

3、层定位

概述

像图象软件中的图层一样可以对每个layer进行能够精准定位操作

position 属性(相对于谁定位)

fixed 固定定位 :相对于浏览器窗口进行定位

relative 相对定位 :相对于直接父元素进行定位

absotive 绝对定位 :相对于static定位意外的第一个父元素

六、CSS3续篇

1、圆角边框和阴影

2、文字与文本

text-shadow属性 :文本阴影

–水平偏移 垂直偏移 阴影大小 颜色–

text-wrap属性 :允许单词、url强制进行换行

–normal 属性–

–break-word 属性–

@font-face属性