CSS学习笔记
1.css技术简介
详细情况请见文档css2.0.chm
定义：层叠样式表，cascading style sheet
用途：用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
2.css语法
-
选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
-
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue} 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号).注：一般每行只描述一个属性
备注：CSS 注释和java的多行注释相同
3.css和html的3种结合方式
3.1内联样式
在标签的 style 属性上设置”key:value value;”，修改标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
<div >div 标签 1</div>
<div >div 标签 2</div>
<span >span 标签 1</span>
<span >span 标签 2</span>
</body>
</html>
问题：这种方式的缺点？
-
如果标签多了。样式多了。代码量非常庞大。
-
可读性非常差。
-
Css 代码没什么复用性可方言。
3.2内部样式表
在 head 标签中，使用 style 标签添加css代码
格式如下：
xxx {
Key : value value;
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- style标签专门用来定义css样式代码-->
<style type="text/css">
/*总体设置div和span的样式就行了*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
缺点：
-
只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
-
维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
3.3链接外部样式表
把css样式写成一个单独的css文件，再通过head标签下的link标签引入即可复用
模板操作：
<!--link标签是单标签,在idea中可以使用快捷键:link:css + tab基本补全接下来的一行代码-->
<link rel="stylesheet" type="text/css" href="目标css文件" />
3.css文件代码如下：
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
3-css.html文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签是当前文档专门用来引入外部css样式代码
rel属性表示relationship,是设置当前的文档与外部文档的关系
stylesheet:就是样式表-->
<link rel="stylesheet" type="text/css" href="3.css"/>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
3.4css与html三种结合方式个人理解
区别：
第一种方式内联样式没有复用性；
第二种方式内部样式运用到css的语法规则，改进了第一种方式，但是只能在一个页面使用，简单教学案例适用
第三种方式外部样式运用到css的语法规则，改进了第二种方式，而且适用于所有页面
优先级不同
同一级别css引入方式不同，优先级不同，内联(行内)样式 > 内部样式表 > 外部样式表
4.css选择器
4.1标签名选择器
作用：决定哪些标签被动地使用这个样式
格式：
标签名{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签名选择器</title>
<style type="text/css">
div{
color:blue;
font-size: 30px;
border: 1px yellow solid;
}
span{
color:yellow;
font-size: 20px;
border: 5px blue dashed;
}
</style>
</head>
<body>
<!--
需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
4.2id选择器
作用：通过id属性选择性地使用这个样式
格式：
#id属性值{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
</head>
<body>
<!--
需求1：分别定义两个 div 标签，
第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
字体大小30个像素。边框为1像素黄色实线。
第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
-->
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
4.3class选择器（类选择器）
作用：通过class属性有效地选择性去使用这个样式
格式：
.class属性值{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class02{
color: gray;
font-size: 26px;
border: 1px red solid;
}
</style>
</head>
<body>
<!--
需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
-->
<div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span>span标签2</span>
</body>
</html>
4.4id选择器和class选择器个人理解
区别：
-
可不可以重复使用（单个处理和批量处理）;
-
优先级不同
详情区别：
-
id选择器只能让一个标签使用，不可重复，否则在idea中会报错,类选择器可以重复设置，可以给许多标签使用
-
两个选择器同时操作一个标签时，id选择器优先作用
4.5组合选择器
作用：可以让多个选择器共用同一个css样式代码
格式：
选择器 1，选择器 2，选择器 n{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
#id01,.class01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<!--
需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
-->
<div class="class01">div标签class01</div> <br />
<span id="id01">span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />
</body>
</html>
4.6常用样式
4.6.1字体颜色
color:red;
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必 须加#
4.6.2宽度
width:19px;
宽度可以写像素值：19px； 也可以写百分比值：20%；
4.6.3高度
height:20px;
高度可以写像素值：19px； 也可以写百分比值：20%；
4.6.4背景颜色
background-color:#0F2D4C
4.6.5字体样式
color：#FF0000；
font-size：20px;
4.6.6红色 1 像素实线边框
border：1px solid red;
4.6.7DIV 居中
div:division 块
代码：
margin-left: auto;
margin-right: auto;
4.6.8文本居中：
text-align: center;
4.6.9超连接去下划线
text-decoration: none;
4.6.10表格细线
table {
border: 1px solid black; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
td,th {
border: 1px solid black; /*设置边框*/
}
4.6.11列表去除修饰
ul {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
div{
color: red;
border: 1px blue solid;
width: 300px;
height: 300px;
background-color: aliceblue;
font-size: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a{
/*这时候text-decoration: none;不能是在div标签里面，应该是在a标签里面*/
text-decoration: none;
}
table{
border: 1px blue solid;
/* css合并表格边框是collapse,html合并边框是cellspacing="0" */
border-collapse: collapse;
}
td{
border: 1px blue solid;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<a href="http://www.baidu.com" target="_blank">戳我，有惊喜</a>
<div>我是div标签</div>
</body>
</html>
5.W3C标准盒子模型
W3C标准英文全程是World Wide Web Consortium，中文是万维网联盟
关于盒子模型的个人理解：
把标签当做一个盒子，不同的标签就是就是不同的盒子，可以以盒子A和盒子B来打比方，如图：
盒子模型详情链接如下：
浙公网安备 33010602011771号