CSS基础学习目录

 

  1. 网页布局的三个阶段和CSS的基本概念
    1. 1. 网页布局的三个阶段
    2. 2. CSS的基本概念
    3. 3. CSS的优点
  2. CSS的语法结构
  3. CSS的三种引入方式
    1. 1. 行内样式
    2. 2. 内部样式
    3. 3. 外部样式
  4. CSS常见选择器
    1. 1. 标签选择器
    2. 2. ID选择器
    3. 3. 类别选择器
    4. 4. 通用选择器
    5. 5. 包含选择器
    6. 6. 分组选择器
    7. 7. 伪类选择器
    8. 8. 选择器的优先级
  5. 段落(文本)属性和边框以及背景属性
    1. 1. 文本的行高 — line-height
    2. 2. 文本对齐 — text-align 和 文本修饰 — text-decoration
    3. 3. 边框设置 — border
    4. 4. 文字属性
    5. 5. 背景属性
  6.  布局属性
    1. 1. 外边距 – margin
    2. 2. 内边距 – padding
    3. 3. 元素浮动 – float
    4. 4. display属性
    5. 5. overflow溢出处理属性
    6. 6. 定位属性
    7. 7. z-index
  7. IE6的bug
  8. 常见的网站布局
  9. 作业
网页布局的三个阶段和CSS的基本概念
1. 网页布局的三个阶段
  • table网页设计 内容和样式(外观和布局)混合
  • table+css网页设计 table布局,css指定外观
  • div+css网页设计 div放内容,css指定样式(外观和布局), 内容和样式彻底分离
2. CSS的基本概念

CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一

3. CSS的优点
  • 使网页代码更少，网页下载更快
  • 实现了内容与样式的分离，使网站维护更快捷
  • 使网页与浏览器的兼容性更好
CSS的语法结构

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

FZSFP.md.png

注意：在CSS中，选择器是非常重要的，它制定了对哪些元素进行样式设置

CSS的三种引入方式
1. 行内样式

它是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，
然后将css代码直接写在其中

1
2
3
<p >正文内容 1</p>
<p >正文内容 2</p>
<p >正文内容 3</p>
2. 内部样式

内部样式就是将css写在与之间，并且用标签进行声明

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
　　p{
　　color:#0000ff;
　　text-decoration:underline;
　　font-weight:bold;
　　font-size:25px;
}
</style>
 
<p>这是第1行正文内容......</p>
<p>这是第2行正文内容......</p>
<p>这是第3行正文内容......</p>
3. 外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可

1
2
3
4
5
6
7
8
<head>
　　<title>页面标题</title>
　　<link href="07-07.css" type="text/css" rel="stylesheet">
</head>
<h2>CSS标题</h2>
<p>这是正文内容……</p>
<h2>CSS标题</h2>
<p>这是正文内容……</p>
CSS常见选择器
1. 标签选择器

FZ9W8.png

1
2
3
4
5
6
7
8
<style>
h1{
　　color:red;
　　font-size:25px;
}
</style>
 
<h1>fuck alex</h1>
2. ID选择器

FZPSS.md.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
　　#bold{
　　　　font-weight:30px;
　　}
　　#green{
　　　　font-size:30px;
　　　　color:#009900；
　　}
</style>
 
<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
<p id="green">ID选择器3</p>
<p id="bold green">ID选择器4</p>
3. 类别选择器

FZiQg.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< style type="text/css">
　　.red{
　　　　color:red;
　　　　font-size:18px;
　　}
　　.green{
　　　　color:green;
　　　　font-size:20px;
　　}
</style>
 
<p class="red">css选择器1</p>
<p class="green">css选择器2</p>
<h3 class="green">h3同样适用</h3>
4. 通用选择器
1
* {margin:0;padding:0;}
5. 包含选择器
1
div p {background:red;}
6. 分组选择器
1
div, span, h1 {color:blue;}
7. 伪类选择器

:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式

1
2
3
4
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
 text-decoration: none去除超链接下边横线显示
8. 选择器的优先级

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
　　#show1{color:gold;}
　　.show {color:pink;}
　　h1 {color:red;}
　　* {color:green;}
</style>
</head>
<body>
　<h1 id="show1" class="show" >优先级测试</h1>
</body>
段落(文本)属性和边框以及背景属性
1. 文本的行高 — line-height
1
line-height：行高值(像素)
2. 文本对齐 — text-align 和 文本修饰 — text-decoration
1
2
3
4
5
6
7
8
9
10
11
12
text-align : left / right / center
 
left：左对齐；
right：右对齐
center：居中对齐
 
text-decoration :
 
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
blink 定义闪烁的文本
3. 边框设置 — border
1
宽度，样式，颜色 (border: 1px solid red;)
4. 文字属性

字号：font-size
语法：font-size：大小的取值(像素值)

文字颜色：color
语法：Color：颜色取值

color:#292378; //6个十六进制数获得颜色
color:#A64; //#AA6644的缩写
color:red; //颜色关键字定义颜色
color:rgb(100,159,170); //rgb定义颜色

tips: chrome控制台可以获取你想要的颜色
颜色样式表：http://webcolor.chrafz.com/

5. 背景属性

背景颜色 —- background-color

关键字：red pink orange

背景图像 —- background-image

使用background-image属性可以设置元素的背景图像
语法：background-image：url（图像地址）

背景位置 —- background-position

background-position-x : 200px;
background-position-y : 100px;

背景重复 —- background-repeat

语法：background-repeat：取值

Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺

使用背景属性的一个常见案例

当我们的网站流量比较大的时候，我们一般在请求图片资源时，并不是一张一张的去请求，而是一整张的去请求，然后根据需求对图像进行截取，这样的话，能够减少网络的请求，节省大量的费用

FZFyQ.png

1
2
3
4
5
6
7
8
9
10
11
12
<style>
　　#myimg{
　　　　border:1px solid red;
　　　　height:18px;
　　　　18px;
　　　　background-image:url('2.png');
　　　　background-position-y:138px;
　　}
</style>
<body>
　　<div id="myimg"></div>
</body>
布局属性

注意：只有块级元素使用下列属性才有效

1. 外边距 – margin

FZkLj.md.png

margin是对外元素的距离，用来控制元素本身的浮动位置

margin的取值：

  • 四边距margin
  • 上边距margin-top
  • 下边距margin-bottom
  • 左边距margin-left
  • 右边距margin-right
1
margin 10px 20px 30px 40px;

margin取值解释：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

注意：margin: a auto — 居中显示

2. 内边距 – padding

FZVwn.md.png

padding是对内元素，用来控制内部元素的位置

padding的取值：

  • 四边距padding
  • 上边距padding-top
  • 下边距padding-bottom
  • 左边距padding-left
  • 右边距padding-right
1
padding 10px 20px 30px 40px;

padding取值解释：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

3. 元素浮动 – float

float的取值：left, right, none(默认值)

3个div正常显示如下：

FZMSU.png

如果想让3个div并排显示，就需要设置它们的float属性，如下是设置float:left;

FZQlF.md.png

如下是设置第1个和第3个div向左浮动float:left;第2个div向右浮动float:right;

FZly4.md.png

因此我们想，如果有若干个div，都设置float:left,则会像流水一样排开

FZ1OJ.md.png

看到这块以后，想必聪明的你也许想到了，各大电商网站上商品的展示不就是这个样子的吗，嗖嘎！

FZGwR.md.png

常见的banner头部的制作案例

FZ8m9.md.png

1
2
3
4
5
6
7
8
9
10
11
<div >
　　<div >
　　　　<div >请登录</div>
　　　　<div >
　　　　　　<a href="#">我的淘宝</a>
　　　　　　<a href="#">购物车</a>
　　　　　　<a href="#">手机淘宝</a>
　　　　　　</div>
　　</div>
　　<div ></div>
</div>
4. display属性
  • block：将元素变成块级标签，可以设置高度和宽度
  • inline：将元素变成行内标签，不能设置高度和宽度
  • inline-block：同时具有两种
  • none：标签消失
1
<span >行内标签</span>
5. overflow溢出处理属性
  • Overflow (水平和垂直均设置)
  • Overflow-x (设置水平方向)
  • Overflow-y (设置垂直方向)

设置水平滚动条

overflow-x : scroll

FZJT1.png

设置垂直方向滚动条

overflow-y : scroll

FZtFx.png

6. 定位属性
  • fixed : 将某个元素固定在页面的某个位置
  • absolute : 绝对定位
  • relative：相对定位

定位方式通常与定位坐标一起使用
定位坐标：要定位的元素偏离目标位置多远的距离
常见取值：Top，left，right，bottom

1.fixed属性

将某个元素固定在页面的某个位置

特点：

相对于浏览器的窗口来进行定位的
固定到窗口的某个位置上，不随内容而滚动
如果不设置定位坐标，就在原来的位置，否则反之

案例：

FZdSO.pngFZwlD.png

2.relative属性

相对定位

特点：

相对定位是相对于，自身的左上角为坐标点

FZ06e.png

3.absolute属性

绝对定位

特点：

相对于（祖先元素的定位方式（relative）来进行定位

找祖先元素是否有定位，如果没有定位，找到<body>，就相对body来定位
如果找到祖先元素有定位，相对祖先元素来定位

FZrmd.png

简单的案例

FZs0A.png

学会了这个定位属性之后，我们可以做出如下的效果

FZckt.md.png

7. z-index

设置对象的层叠顺序

特点

较大 number 值的对象会覆盖在较小 number 值的对象之上

浮层的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
　　.one{
　　　　height:2000px;
　　　　background-color: #dddddd;
　　}
　　.two{
　　　　height:2050px;
　　　　background-color: #3ba354;
　　　　position: fixed;
　　　　top:0;
　　　　right:0;
　　　　left:0;
　　　　opacity: 0.3;
　　　　/*z-index:10;*/
　　}
　　.three{
　　　　height:400px;
　　　　300px;
　　　　position: fixed;
　　　　top:100px;
　　　　right:400px;
　　　　left:800px;
　　　　background-color: white;
　　　　z-index: 10;
　　}
</style>
　　<body>
　　　　<div class="one">
　　　　</div>
　　　　<div class="three">
　　　　</div>
　　　　<div class="two">
　　　　</div>
　　</body>
IE6的BUG

万恶的IE，前端的天敌！

  • _属性：属性值; ie6和ie6版本以下的好使
    *属性：属性值; ie7和ie7版本以下的可以用

  • 如果盒子结构设置了margin，并且元素设置了浮动，IE6会产生双倍的间距 （display：inline）

  • img外部的border

更多：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/

常见的网站布局

FZgtP.md.png

作业

zuoye.png

登录框.png

i_pwd.jpg
i_name.jpg

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhutiancheng/p/9886096.html