CSS基础
CSS：cascading style sheets，层叠样式表格；CSS起到装饰作用，将不同功能的代码做分离，方便维护；可以大大提高工作效率，将HTML代码和样式代码分离；
1. 书写规范
- 格式：选择器 {属性:属性值;属性:属性值}
- 选择器：确定当前css修饰的是哪一个元素
2. CSS与HTML的结合
2.1 内联结合
使用font标签可以改变文本的字体大小和字体颜色，但是字体大小最大是7，不能满足部分需求；
格式：
style="属性名1: 属性值1;属性名2: 属性值2"
颜色取值：颜色英文单词/颜色16进制
<html>
<head>
<meta charset="UTF-8">
<title>内联结合</title>
</head>
<body>
<div>
<font style="font-size: 100px; color:red;">这是一个div</font>
</div>
</body>
</html>
- 优点：简单方便，一般对少数的特定的元素进行单独设置；
- 缺点：复用性差
2.2 内部结合
- 需要在head标签中使用style标签
- 使用选择器选中元素
- 编写css代码
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
}
<html>
<head>
<meta charset="UTF-8">
<title>内部结合</title>
<style>
font{
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div>
<font >这是font1</font><br />
<font >这是font2</font><br />
<font style="color: blue;">这是font3</font><br />
</div>
</body>
</html>
- 优点：可以对多个标签进行统一样式设置
- 缺点：复用性不高，css代码和html代码分离不彻底，只能作用于当前页面；
2.3 外部结合
实现：
新建一个CSS样式文件，放入CSS文件夹下
编写CSS代码
使用link标签引入外部样式文件
font{
font-size: 20px;
color: red;
}
<html>
<head>
<meta charset="UTF-8">
<title>外部结合</title>
<link rel="stylesheet" href="css/CSS_01.css"/>
</head>
<body>
<div>
<font >这是font1</font><br />
<font >这是font2</font><br />
<font >这是font3</font><br />
</div>
</body>
</html>
- 优点：将HTML和CSS代码完全分离，复用性高；
- ./代表同一个目录
- ../代表上一级目录
3. CSS选择器
让开发者能够选定元素；
3.1 Id选择器
使用 # 引入，引用的是元素的id属性；id唯一标识
语法：
id属性值{
属性名:属性值;
}
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
font{
font-size: 20px;
}
#i{
color: red;
}
#j{
color: orangered;
}
#k{
color: green;
}
</style>
</head>
<body>
<font id="i">this is font one</font><br />
<font id="j">this is font two</font><br />
<font id="k">this is font three</font><br />
</body>
</html>
3.2 类选择器
使用”.”来描述，引用的的是元素上的class属性值；
格式：
.class属性值{
属性名:属性值;
}
处理多个元素有相同样式效果的；
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
font{
font-size: 20px;
}
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<font class="red">this is font red</font><br />
<font class="red">this is font red</font><br />
<font class="green">this is font green</font><br />
<font class="green">this is font green</font><br />
<font class="blue">this is font blue</font><br />
<font class="blue">this is font blue</font><br />
</body>
</html>
3.3 标签选择器
对页面上的标签进行统一的设置，引用的就是标签的名称；
格式：
标签名{
属性名:属性值;
}
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<!--
将font标签中的文本颜色修改为红色
将span标签中的文本颜色修改为蓝色
将div标签中的文本颜色修改为绿色
所有的文本大小都为20px
-->
<style>
body{
font-size: 20px;
}
font{
color: red;
}
span{
color: blue;
}
div{
color: green;
}
</style>
</head>
<body>
<font>this is a font1</font><br />
<span>this is a span1</span><br />
<font>this is a font2</font><br />
<div>this is a div1</div><br />
<span>this is a span2</span><br />
<font>this is a font3</font><br />
<div>this is a div2</div><br />
</body>
</html>
3.4 选择器的分组
多个选择器使用同一段CSS,那么就可以将这多个选择器划为一组,使用分组。选择器之间使用逗号分开；
格式：
id选择器,class选择,元素选择器{
属性名:属性值;
}
<html>
<head>
<meta charset="UTF-8">
<title>选择器的分组</title>
<!--
font/span/div中的文本内容字体大小为20px,字体颜色为红色
-->
<style>
#f1,.s1,div{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<font id="f1">this is a font</font><br />
<span class="s1">this is a span</span><br />
<div>this is a div</div><br />
</body>
</html>
3.5 派生选择器
通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。也称为上下文选择器；
父标签名(父id,父类名) 子标签名(子id,子类名){
属性名:属性值;
}
<html>
<head>
<meta charset="UTF-8">
<title>派生选择器 </title>
<!--
设置span中的font中内容样式,先找到span,再找到font
-->
<style>
span font{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<span>
<font>这是一个font</font>
</span>
<div>
<font>这是一个font</font>
</div>
</body>
</html>
3.6 选择器的优先级
内联样式 > id选择器 > 类选择器 > 标签选择器
作用范围越小，优先级越大
<html>
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style>
/*标签选择器*/
font{
font-size: 10px;
color: yellow;
}
/*类选择器*/
.class{
font-size: 20px;
color: red;
}
/*id选择器*/
#id1{
font-size: 30px;
color: beige;
}
</style>
</head>
<body>
<font id="id1" class="class" style="font-size: 40px; color: red;">
这是一个font
</font>
</body>
</html>
4.CSS伪类
CSS伪类用于向某些选择器添加特殊的效果；
在支持CSS的浏览器中，链接的不同状态都可用不同方式显示，这些状态包括活动状态、已访问状态、未被访问状态、鼠标悬停状态；
a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接注意事项
a:hover 必须被置于 a:link 和 a:visited 之后
a:active 必须被置于 a:hover 之后
<html>
<head>
<meta charset="UTF-8">
<title>CSS伪类</title>
<style>
a:link {
/* 未访问的链接 */
color: cornflowerblue;
}
a:visited {
/* 已访问的链接 */
color: red;
}
a:hover {
/* 鼠标移动到链接上 */
color: orange;
}
a:active {
/* 选定的链接 */
color: green;
}
font:hover{
color: green;
font-size: 100px;
}
button{
background-color: orange;
}
button:hover{
background-color: orangered;
}
</style>
</head>
<body>
<a href="index.html">this is a super link</a><br />
<font>this is a font element</font><br />
<button>按钮</button><br />
</body>
</html>
5.CSS的属性
5.1 字体属性
CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；
font-family:
默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；
font-size:
字体大小
font-style:
字体倾斜度
font-weight:
字体的粗细
<html>
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
span{
font-family: "楷体";
font-size: 10px;
font-style: oblique;
font-weight: bolder;
}
</style>
</head>
<body>
<span>这是一个span标签</span>
</body>
</html>
5.2 文本属性
可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；
css文本属性
direction:
ltr: left to right
rtl: right to left
line-height:文本行高
text-align:文本的对齐方式
text-decoration：文本装饰 常用属性underline、none、line-through text-indent:首行缩进以em为单位，如首行缩进2个字符2em；
letter-spacing:字符间距,字符与字符之间的间距
word-spacing:单词间距,单词与单词之间的间距
<html>
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style>
div{
font-size: 50px;
color: gray;
direction: ltr;
text-align: left;
text-decoration: none;
}
a{
font-size: 50px;
text-decoration: none;
}
#i1{
font-size: 100px;
letter-spacing: 20px;
}
#i2{
font-size: 100px;
word-spacing: 20px;
}
</style>
</head>
<body>
<div>
这是一个div
</div>
<a href="index.html">超链接</a>
<div id="i1">
this is a div1
</div>
<div id="i2">
this is a div2
</div>
</body>
</html>
5.3 背景属性
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；
background-color:将颜色作为背景
background-image:将图片作为背景
<html>
<head>
<meta charset="UTF-8">
<title>CSS背景属性</title>
<style>
body{
background-color: darkgoldenrod;
color: red;
font-size: 100px;
background-image:url(img/123.png);
background-size: cover;
}
</style>
</head>
<body>
卡卡之家
</body>
</html>
5.4 尺寸属性
CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；
CSS尺寸属性对行内元素无效，只对是块级元素
<html>
<head>
<meta charset="UTF-8">
<title>CSS尺寸属性</title>
<style>
#d1{
min-width: 100px;
max-width: 300px;
min-height: 100px;
max-height: 300px;
width: 500px;
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">这是一个div</div>
</body>
</html>
5.5 列表属性
CSS 列表属性允许放置、改变列表项标志，或者将图像作为列表项标志；
list-style-image 将图象设置为列表项标志；
list-style-position 设置列表中列表项标志的位置；
list-style-type 设置列表项标志的样式；
<html>
<head>
<meta charset="UTF-8">
<title>CSS列表属性</title>
<style>
ul{
/*文本内容的对齐方式*/
text-align: center;
list-style-image: url(img/a.gif);
/*list-style-type: circle;*/
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>卡卡</li>
<li>之家</li>
<li>卡卡</li>
</ul>
</body>
</html>
5.6 边框属性
CSS边框属性允许规定元素边框的样式、宽度和颜色；
<html>
<head>
<meta charset="UTF-8">
<title>CSS边框属性</title>
<style>
body{
text-align: center;
}
#d{
width: 300px;
height: 300px;
/*样式都一样*/
border: dotted greenyellow 10px;
/*
* 左边框
* 样式：点状
* 颜色：淡绿
* 宽度：10px
*/
/*
border-left-style: dotted;
border-left-color: greenyellow;
border-left-width: 10px;
*/
border-left: dotted greenyellow 10px;
/*
* 上边框
* 样式：虚线
* 颜色：中绿
* 宽度：15px
*/
border-top: dashed mediumseagreen 15px;
/*
* 右边框
* 样式：实线
* 颜色：绿
* 宽度：20px
*/
border-right:solid green 20px;
/*
* 下边框
* 样式：实线
* 颜色：绿
* 宽度：20px
*/
border-bottom: double darkgreen 25px;
}
</style>
</head>
<body>
<img id="d" src="img/123.png" />
</body>
</html>
5.7 圆角边框
边角是个弧形；
<html>
<head>
<meta charset="UTF-8">
<title>CSS圆角边框</title>
<style>
img{
width: 500px;
height: 500px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="img/123.png" />
</body>
</html>
