目录
一、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