1. CSS概述
1.1. 什么是CSS?
层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素，用来控制网页的样式和布局。
|
<html> <head> <title>Hello!</title> </head> <body> <h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div>css给我们带来丰富多彩的世界</div> <br> <div>尚硅谷欢迎你!</div> </body> </html> |
|
<html> <head> <title>测试: 内部样式表</title> <style type="text/css"> h2 { color: red; font-size: 46px; font-family: 宋体; } #p1 { font-size: 30px; background: blue; font-family: 黑体; } .cs { font-size: 20px; background: green; font-family: 黑体; } </style> </head> <body> <h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">尚硅谷欢迎你!</div> </body> </html> |
1.2. 为什么要用CSS?
CSS的作用
第一，简化网页的代码，提高访问速度
外部的CSS文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。
第二，便于维护
(1)便于修改网站样式:只要修改css文件，就可改变整个网站的风格特色。避免一个个网页的修改，大大减少重复劳动的工作量；
(2)可以重用样式；
第三，页面内容和显示样式分离
2. 如何创建CSS?
创建CSS有三种方式: 外部样式表, 内部样式表和内联样式
2.1. 外部样式表
先建立外部样式表文件(.css)，然后在网页文件的<head>内使用<link>.链接
|
main.css |
|
<head> |
2.2. 内部样式表
直接在<head>标签内插入<style>...</style>块
|
<html> <head> </head> <body> …. </body> |
2.3. 内联样式
在标签的style属性中定义样式
|
<h3 style="font-size:14px;color:green;"> h3标签内的内容! </h3> |
注意：不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！
3. CSS基础语法
3.1. 基本语法组成
CSS语法由三部分组成：选择器、属性(名)和值
selector { property: value; }
selector:选择器,希望定义样式的HTML标签;
property: 样式名称
value:样式的值
例如：
p { color: #ff0000;font-size:12px }
3.2. 注意事项
1、多个属性值用分号隔开,最后一个可加也可不加;
2、如下写法可读性更好些；
p {
text-align: center;
color: black;
font-size: 20px;
}
3、CSS对大小写不敏感，但在选择器中对class和id名称也不敏感；
4、注释符号 /* 注释内容 */
4. CSS选择器
CSS的选择器可以分为两大类: (标签名, 属性)
- 基本选择器: 通配符, 标签, ID, class和属性选择器
- 组合选择器: 分组选择器,后代选择器,子选择器和相邻兄弟选择器
|
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">尚硅谷欢迎你!</div> <br> <div title="dt">尚硅谷欢迎你2222!</div> |
4.1. 基本选择器
1) 标签选择器
以标签名作为选择器
|
h2 { color: red; } div { color: red; } |
2) ID选择器
为指定id属性值的某个标签应用样式,以#开头来定义
|
#p1 { color:#00ff00; font-size: 40px; } |
3) 类(class)选择器
为指定class属性值的某些标签应用样式,以.开头来定义
|
.cs { color: blue; } |
4) 属性选择器
属性选择器可以根据元素的属性[及属性值]来选择元素。
- 根据属性名来匹配, 将属性名用[]包含起来
|
[title] { color: gray; font-size: 20px; } |
- 根据属性名和属性值来匹配, 将属性名和值用[]包含起来
|
[title='dt'] { color: gray; font-size: 20px; } |
5) 通配符选择器
配置任意标签
|
* { font-size: 30px; } |
4.2. 组合选择器
1) 分组选择器
同时为多个标签或多类标签同时应用指定样式, 中间用,隔开
|
h2,#p1,.cs { color:green; } |
|
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">尚硅谷欢迎你!</div> <br> |
2) 后代选择器
|
div span { color: blue; } |
|
<div title="dt"> <h3> <span>尚硅谷欢迎你22222!</span> </h3> <span>尚硅谷欢迎你3333!</span> </div> |
3) 子选择器
|
div>span { color: green; } |
|
<div title="dt"> <h3> <span>尚硅谷欢迎你22222!</span> </h3> <span>尚硅谷欢迎你3333!</span> </div> |
4) 相邻兄弟选择器
|
h3+span { color: orange; } |
|
<div title="dt"> <h3> <span>尚硅谷欢迎你22222!</span> </h3> <span>尚硅谷欢迎你3333!</span> </div> |
5. CSS主要属性
5.1. 属性简介
学习和使用CSS属性, 可以参见CSS2.0文档
5.2. 常用属性表
|
font(字体) |
font-size: 字体尺寸 text-decoration: 文本的装饰 none |
|||
|
background(背景) |
padding: 0pt 5.4pt; border-left- 0.5pt; border-left-color: windowtext; border-right- 0.5pt; border-right-color: windowtext; border-top-style: none; border-bottom- 0.5pt; border-bottom-color: windowtext;"> Layout(布局) |
visibility: 可见性 float: 指定是否及如何浮动 |
||
|
Margin(外边距) |
margin: 指定四边的外边距 10px; margin-top: 指定上边的外边距 margin-bottom: 指定下边的外边距 margin-left: 指定左边的外边距 margin-right: 指右四边的外边距 |
|||
|
Border(边框) |
border : 指定边框的样式(复合值) border-color : 边框的颜色 border-width : 边框的宽度 |
|||
|
Paddings(内边距) |
padding: 指定四边的内边距 padding-top: 指定上边的外边距 padding-bottom: 指定下边的内边距 padding-left: 指定左边的内边距 padding-right: 指定右边的内边距 |
|||
|
Table(表单) |
border-collapse: 表格的行和单元格的边是合并在一起还是分开 border-spacing: 行和单元格的边在横向和纵向上的间距 |
|||
|
Dimension(尺寸) |
height: 高度 宽度 |
|||
|
Position(定位) |
position: 指定定位方式 |
6. CSS核心机制-盒子模型(Box Model)
6.1. 盒子模型概述
l 盒子模型是CSS的基石,指定标签如何显示
l 页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容(content)、内边距(填充,padding)、边框(border)和外边距(空白边,margin)组成；
l 任何web页面都是由很多这样的盒子，通过不同排列组合而成，盒子之间相互影响，要掌握盒子模型需要从以下2个方面去理解：
n 单个盒子的内部结构；
n 多个盒子之间的相互关系
6.2. 盒子模型的四个要素
l 内容(Content)：盒子里面所装的内容
l 内边距(填充,padding):内容到边界之间的距离
l 边框(border)：盒子本身
l 外边距(空白边,margin)：与其他盒子之间的距离
n 注意: 默认情况下,盒子边框是无,背景色是透明的,所以,看不到盒子
|
#div1 { 200px; height: 200px; margin: 20px; padding: 20px; border-10px; border-style:solid; border-color:blue; } #div2 { background-color:green; } #div3 { 200px; height: 200px; background-color: green; } |
7. 补充:
7.1. 块元素与行内元素
l 块元素(Block element)
n 默认状态下每次都占据一整行，后面内容必须再新起一行显示
n <p>,<div>,<h1>..<h6>,<ul><li>,<table>…等
l 行内元素(Inline element)
n 默认状态下其内容在一行内进行显示
n <a>,<img>,<input>,<span>
l 补充说明:
n 每个块元素都独占一行;行元素则在一行内显示;
n 可以利用元素的display属性进行转换
n 块元素一般用作容器,可以容纳其他块元素和行元素,而行元素只能容纳文本或者其他行元素
n 行元素的高度宽度设置无效，其宽度就是自身文字或者图片的宽度
7.2. 浮动
l 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
7.3. 关于路径
l 目录结构如下：
l 在Index.html中引用xx.css文件
<link rel=“”stylesheet” type=“text/css” href=“css/xx.css”>
l 在xx.css中引用xxx.gif
Background:url(../images/xxx.gif)
7.4. DIV+CSS配合使用
l 实现下面的框架页面
|
<html> <head> <title>css的综合使用: DIV+CSS</title> <meta charset="UTF-8"> <style type="text/css"> #head { height: 15%; padding: 5px; } #body { height: 75%; background-color: gray; } #left { 15%; height: 100%; background-color: red; float: left; } #main { 85%; height: 100%; background-color: green; float: right; } #foot { height: 10%; background-color: orange; padding: 5px; } </style> </head> <body style="text-align: center;"> <div id="head">欢迎访问尚硅谷在线书城</div> <div id="body"> <div id="left">导航部分</div> <div id="main">主体内容</div> </div> <div id="foot">昌平区文华西路育荣教育园区(102206)</div> </body> </html> |