层叠样式表(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.cssh1 {font-size: 15px; font-weight: bold; color: red;}
<head> <title>title of article</title> <link rel="stylesheet" href="css/main.css" type="text/css"></head>
直接在<head>标签内插入<style>...</style>块
<html>
<head><style type="text/css"> h2 {font-size: 15px; font-weight: bold; color: blue}</style>
</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的选择器可以分为两大类: (标签名, 属性)
基本选择器: 通配符, 标签, 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>
以标签名作为选择器
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(字体)
color
:
指定颜色
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>
转载于:https://www.cnblogs.com/zhangxiaopeng/p/4862201.html
