目录
一、css概述
1.CSS是Cascading Style Sheets（级联样式表）
2.CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如：CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面‘
3.可将页面内容与表现形式分离，页面内容存放HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档中的某一部分。
4.CSS与HTML的关系
HTML是网页的内容，CSS定义页面的样式。
二、基本语法
1.行内样式表
又称：内联样式、行间样式、内嵌样式。是通过 标签的style属性来设置元素的样式
<标签名 style="属性1:属性值;属性2:属性值;属性3:属性值">内容</标签名>
<p style="color: blue;font-family:隶书">行内样式表</p>
2.内嵌样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: blue;
font-size: 30px;
font-family: 隶书;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>效果如下：
3.外部样式表
外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
使用link（链接）标签 :
<head>
<link href="newstyle.css" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>
</head>
三、选择器
1.概念
要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这时就需要用到CSS中的选择器
2.常用选择器
1）标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名{}
2）类选择器：通过标签的class属性选中一组标签
语法：.class{}
3）id选择器·通过标签的id属性值选中唯一的标签
语法：#id{}
4)通配选择器：可以用来选择页面中的所有标签
注：选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
3.优先级
行内定义的优先级是最高的
id选择器>类选择器>标签选择器>通配选择器
四、常用CSS属性
1.字体属性
| 属性 | 含义 |
| font-size | 大小、尺寸 |
| font-weight | 粗细 |
| font-family | 字体 |
| font-style | 样式 |
| font | 简写 |
1.1font-size
1）px像素pixel
2）inherited继承，默认从父级标签字体的大小（默认值），所有CSS属性的默认值都是inherited
3）%百分比，相对于父级标签字体大小的百分比
4）em倍数，相对于父级标签字体大小的倍数
5）HTML根元素字体的大小为16px，也称为基础字体大小
1.2font-weight
1）normal普通（默认）
2）bold粗体
3）自定义 700 bold normal
1.3font-family
可取电脑中自带的字体
注：电脑中字体查找方法：在C盘中查找fonts文件夹
1.4font-style
normal普通
italic斜体
1.5font
简写属性：font:font-style|font-weight|font-size|font-family
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
font-size: 30px;
}
p{
/*font-size: 20px;*/
font-size: 80%;
}
.hello{
font-size: 2em;
}
body{
font-size: 70%;
}
ol li {
/*font-size: 30px;
font-weight: bold;
font-family: 隶书,宋体,黑体;
font-style: italic;*/
font: italic bold 30px 微软雅黑;
}s
</style>
</head>
<body>
<p>
<span>wn</span>
</p>
<span>wn</span>
<hr>
<div>
我的DIV
<p>
<span>字体属性1</span>
</p>
</div>
<hr>
<span class="hello">字体属性2</span>
<hr>
<ol>
<li>
字体1
</li>
<li>
字体2
</li>
</ol>
</body>
</html>
2.文本属性
| color | 字体颜色 |
| font-size | 字体大小 |
| font-family | 字体 |
| text-align | 文本对齐 |
| text-decrorcation:line-through | 定义穿过文本下的一条线 |
| text-decrorcation:underline | 定义文本下的一条线 |
| text-decrorcation:none | 定义标准的文本 |
| font-style:italic | 斜体文本 |
| font-weight | 字体粗细 |
| line-height | 设置行高 |
| letter-spacing | 可以指定字符间距 |
| text-indent | 设置首行缩进 |
3.背景
| 属性 | 含义 |
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景图片的重复方式 |
| background-position | 背景图片的显示位置 |
| background-attachment | 背景图片是否跟随滚动 |
| background-size | 背景大小 |
| background | 简写 |
3.1 background-color
取值：transparent 透明
3.2 background-image
必须使用url()方式指定图片的路径
如果是在css样式文件中使用的相对路径，此时是相对于css文件，而不是HTML文件
3.3background-repeat
取值：repeat默认，repeat-x，repeat-y，no-repeat
3.4background-position
默认背景图片显示在左上角
取值：top，bottom，left，right，center
坐标：左上角(0,0)坐标，向右为x正方向，向下为y正方向
4.列表属性
css列表属性可以放置、改变列表项标志，或将图像作为列表标志
| 属性 | 含义 |
| list-style-type | 设置列表前的标记 |
| list-style-image | 将图像作为列表前的标记 |
| list-style-position | 设置标记的位置 |
| list-style | 简写 |
4.1list-style-type
取值：none、disc（实圆）、circle（空圆）、square（正方形）
此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了
4.2 list-style
简写属性：list-style:list-style-type|list-style-image|list-style-position
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
