标签：
层叠样式表(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> |
CSS的作用
第一，简化网页的代码，提高访问速度
外部的CSS文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。
第二，便于维护
(1)便于修改网站样式:只要修改css文件，就可改变整个网站的风格特色。避免一个个网页的修改，大大减少重复劳动的工作量；
(2)可以重用样式；
第三，页面内容和显示样式分离
创建CSS有三种方式: 外部样式表, 内部样式表和内联样式
先建立外部样式表文件(.css)，然后在网页文件的<head>内使用<link>.链接
|
main.css |
|
<head> |
直接在<head>标签内插入<style>...</style>块
|
<html> <head> </head> <body> …. </body> |
在标签的style属性中定义样式
|
<h3 style="font-size:14px;color:green;"> h3标签内的内容! </h3> |
注意：不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！
CSS语法由三部分组成：选择器、属性(名)和值
selector { property: value; }
selector:选择器,希望定义样式的HTML标签;
property: 样式名称
value:样式的值
例如：
p { color: #ff0000;font-size:12px }
1、多个属性值用分号隔开,最后一个可加也可不加;
2、如下写法可读性更好些；
p {
text-align: center;
color: black;
font-size: 20px;
}
3、CSS对大小写不敏感，但在选择器中对class和id名称也不敏感；
4、注释符号 /* 注释内容 */
CSS的选择器可以分为两大类: (标签名, 属性)
|
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">尚硅谷欢迎你!</div> <br> <div title="dt">尚硅谷欢迎你2222!</div> |
以标签名作为选择器
|
h2 { color: red; } div { color: red; } |
为指定id属性值的某个标签应用样式,以#开头来定义
|
#p1 { color:#00ff00; font-size: 40px; } |
为指定class属性值的某些标签应用样式,以.开头来定义
|
.cs { color: blue; } |
属性选择器可以根据元素的属性[及属性值]来选择元素。
|
[title] { color: gray; font-size: 20px; } |
|
[title=‘dt‘] { color: gray; font-size: 20px; } |
配置任意标签
|
* { font-size: 30px; } |
同时为多个标签或多类标签同时应用指定样式, 中间用,隔开
|
h2,#p1,.cs { color:green; } |
|
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">尚硅谷欢迎你!</div> <br> |
|
div span { color: blue; } |
|
<div title="dt"> <h3> <span>尚硅谷欢迎你22222!</span> </h3> <span>尚硅谷欢迎你3333!</span> </div> |
|
div>span { color: green; } |
|
<div title="dt"> <h3> <span>尚硅谷欢迎你22222!</span> </h3> <span>尚硅谷欢迎你3333!</span> </div> |
|
h3+span { color: orange; } |
|
<div title="dt"> <h3> <span>尚硅谷欢迎你22222!</span> </h3> <span>尚硅谷欢迎你3333!</span> </div> |
学习和使用CSS属性, 可以参见CSS2.0文档
|
font(字体) |
font-size: 字体尺寸 text-decoration: 文本的装饰 none |
|||
|
background(背景) |
padding: 0pt 5.4pt; border-left-width: 0.5pt; border-left-color: windowtext; border-right-width: 0.5pt; border-right-color: windowtext; border-top-style: none; border-bottom-width: 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: 高度 width: 宽度 |
|||
|
Position(定位) |
position: 指定定位方式 |
l 盒子模型是CSS的基石,指定标签如何显示
l 页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容(content)、内边距(填充,padding)、边框(border)和外边距(空白边,margin)组成；
l 任何web页面都是由很多这样的盒子，通过不同排列组合而成，盒子之间相互影响，要掌握盒子模型需要从以下2个方面去理解：
n 单个盒子的内部结构；
n 多个盒子之间的相互关系
l 内容(Content)：盒子里面所装的内容
l 内边距(填充,padding):内容到边界之间的距离
l 边框(border)：盒子本身
l 外边距(空白边,margin)：与其他盒子之间的距离
n 注意: 默认情况下,盒子边框是无,背景色是透明的,所以,看不到盒子
|
#div1 { width: 200px; height: 200px;
margin: 20px; padding: 20px; border-width:10px; border-style:solid; border-color:blue; } #div2 { background-color:green; } #div3 { width: 200px; height: 200px; background-color: green; } |
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 行元素的高度宽度设置无效，其宽度就是自身文字或者图片的宽度
l 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
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)
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 { width: 15%; height: 100%; background-color: red; float: left; }
#main { width: 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> |
标签：
原文地址：http://www.cnblogs.com/zhangxiaopeng/p/4862201.html
