目录
一. css概述
- css(Cascading Style Sheet)级联样式表
- css是一种样式表语言,用于对HTML文档控制外观,定义布局
- 例如:CSS涉及字体,颜色,边距,高度,宽度,背景图像,高级定位等方面
- 可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的css在一个.css文件中或者HTML文档的某个位置
HTML是网页的内容,css就是定义网页内容的样式
二. css基本语法
1. 样式表
1.1 行内样式表
行内样式表,又称内联样式,行间样式,内嵌样式,是通过style属性来设置元素的样式,其基本语法如下
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>
<a href="" style="color:green;font-size: 20px;font-family: 楷体;">新浪</a>
1.2 内嵌样式表
内嵌样式表:定义在HTML文档的头部用<style></style>标签定义,修饰的内容在选择器中定义
<style>
.p1{
color: green;
font-size: 24px;
font-family: 楷体;
background-color: aquamarine;
}
</style>
1.3 外部样式表
外部样式表:使用<link href="外部样式的文件地址",rel="stylesheet">标签将一个.css文件导入到该HTML文档中
<!--导入外部样式表-->
<link href="css/index.css" rel="stylesheet">
三. 选择器
1.标签选择器
标签选择器:通过标签名可以指定要修饰的标签
/* 标签选择器 */
<style>
/* 超链接选择器*/
a{
color: red;
}
/*段落选择器*/
p{
color: green;
}
</style>
<body>
<a href="">新浪</a>
<a href="">新浪</a>
<a href="" style="color: crimson">新浪</a>
<a href="">新浪</a>
<p>段落</p>
</body>
2. 类选择器
类选择器:通过标签的class属性来选中一组要修饰标签
/* 类选择器 */
<style>
.p1{
color: blue;
}
</style>
<body>
<a href="">新浪</a>
<a href="">新浪</a>
<a href="" class="p1">新浪</a>
<a href="" class="p1">新浪</a>
<p>段落</p>
</body>
3. id选择器
id选择器:通过标签的id属性选中唯一的一个要修饰的标签
/* id选择器 */
<style>
#aid{
color: chocolate;
}
</style>
<body>
<a href="">新浪</a>
<a href="">新浪</a>
<a href="" id="aid">新浪</a>
<a href="">新浪</a>
<p>段落</p>
</body>
4. 通配选择器
通配选择器:用*来选中该HTML文档的所有标签
/* 通配选择器 选中所有的标签*/
<style>
*{
font-size: 20px;
}
</style>
<body>
<a href="">新浪</a>
<a href="">新浪</a>
<a href="" id="aid">新浪</a>
<a href="">新浪</a>
<p>段落</p>
</body>
5. 后代选择器
后代选择器:对某个父标签下的子标签进行修饰
<style>
/*
后代选择器 对某个父标签下的子级标签修饰
*/
.u1 li{
color: aqua;
text-align: center;
list-style-type:none; /*去掉列表前面的符号*/
list-style-image: url(img/img.jpg);/*将列表前的符号换成图片*/
list-style-position: inside; /*让列表前的符号在列表里面 */
}
</style>
<body>
<ul class="u1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul class="u2">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
只修饰u1这个无序列表
6. 选择器的优先级
行内样式表>id选择器>类选择器>后代选择器>标签选择器>通配选择器
选择器能选中的范围越大表示选择器的优先级越低,低优先级所独有的修饰也会被添加到样式中
三. 文本
color | 设置字体颜色 |
font-size | 字体大小 |
font-family | 设置字体类型 |
text-align | 文本对齐方式 |
text-decoration:line-through | 在文本上添加一条删除线 |
text-decoration:underline | 定义文本下的一条线 |
text-decoration:none | 定义标准文本 |
font-style:italic | 斜体文本 |
font-weight | 字体粗细 |
line-height | 设置行高 |
letter-spacing | 可以指定字符间距 |
word-spacing | 可以指定单词间距 |
text-indent | 用来设置首行缩进 |
<style>
.p1{
color:#00aa7f; /* 字体颜色,要么用英语,要么用十六进制 */
font-size:20px; /*px是像素单位 css中尺寸需要加单位 */
font-family: 楷体; /*字体*/
font-weight:700; /*加粗*/
/* text-align:center; 文本水平对齐 */
font-style:italic; /*斜体*/
/* text-decoration: underline; 修饰文本下添加下划线 */
/* text-decoration: line-through; 修饰文本添加删除线 */
/* line-height: 30px; 行高 */
/* letter-spacing: 20px; 字符间距*/
/* word-spacing: 20px; 单词间距 */
/* text-indent: 2em; 首行缩进 em当前文本中一个字符的大小 */
}
a{
text-decoration: none;//删除超链接下的横线
}
a:hover{
text-decoration: underline;
color: #00aa7f;
}
</style>
四. 背景
background-color | 背景颜色 |
background-image | 背景图片 |
background-repeat | 背景重复 |
background-size | 背景尺寸 |
background- position | 背景位置 |
<style>
p{
background-color: aqua;/*设置背景颜色*/
background-image: url(img/bg.jpg);/*添加背景图片*/
background-repeat: no-repeat; /*背景不重复*/
background-position: center center;/*背景位置 水平(left center right) 垂直(top center bottom)*/
background-size: 400px 400px; /*背景尺寸 宽 高*/
width: 800px;
height: 600px;
}
</style>
五. 列表
css列表属性可以放置,改变列表项标志,或者将图像作为列表项标志
list-style-image | 将图象设置为列表项标志 |
list-style-position | 设置列表中列表项标志的位置 |
list-style-type | 设置列表项标志的类型 |
list-style可以简写属性
<style>
.u1 li{
color: aqua;
text-align: center;
list-style-type:none; /*去掉列表前面的符号*/
list-style-image: url(img/img.jpg);/*将列表前的符号换成图片*/
list-style-position: inside; /*让列表前的符号在列表里面 */
list-style: url(img/img.jpg) outside none;/*简写上述三种*/
}
</style>
六. 伪类
css一个伪类表示了标签的一种特殊状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类
伪类的语法
- :hover伪类表示鼠标移入的状态
- :active表示的是被点击的状态
- :focus向拥有键盘输入焦点的标签添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
color:aqua;
}
/*当鼠标移入到选择器对应的标签上时,自动切换到此样式表*/
a:hover{
color: red;
font-size:20px;
}
/*当鼠标点击标签时 自动切换到此样式表*/
a:active{
color:blue;
}
p:hover{
color: red;
background-color: aqua;
}
p:active{
color:blue;
}
.btn:hover{
background-color: aquamarine;
}
.btn:active{
background-color: red;
}
/*当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表*/
input:focus{
background-color: gainsboro;
}
</style>
</head>
<body>
<a href="">百度</a>
<p>段落</p>
<input type="button" value="保存" class="btn"/><br/>
<input/><br/>
<input/><br/>
<input/><br/>
<input/><br/>
<img src="img/photo.jpg">
</body>
</html>
七. 透明
透明:可以使标签对应的内容变透明
透明度可以自己在0-1之间设置1为不透明,往下慢慢更透明,0为完全透明
八. 标签的分类
1. 块级标签
块级标签:无论内容多少,都占一整行,可以自己设置宽高,主要用来进行网页布局
常见的块级标签有: <p></p> <h1></h1>....<h6></h6>
但这些常见的块级标签总附加了一些我们有时可能用不上的属性,比如:外边距,或字体加粗,此时我们需要一个纯净的块级标签
1.1 div标签
div标签:div标签是一个纯净版的块级标签,没有被附加任何效果,我们想要什么样式自己修饰即可
2. 行级标签
行级标签:内容多少就占多少,不会占一整行,不可以自己设置宽高,主要用来对网页文字进行修饰
常见的行级标签有:<a></a> <b></b> <s></s> <i></i>
但这些常见的行级标签也被附加了一些我们可能用不上的属性,比如:加粗文字,斜体,超链接等,我们需要一个纯净的行级标签
2.1 span标签
span标签:span标签是一个纯净版的行级标签,没有被附加任何效果,我们想要什么文字效果自己修饰即可
3. 行块级标签
行块级标签:不占一行,又可以设置宽高,将行级标签和块级标签的优点结合
常见的行块级标签有:<img> <input>
九. Display
display是一个标签样式,可以通过它修改标签的类型,可选值
block | 设置标签为块级标签 |
inline | 设置标签为行级标签 |
inline-block | 设置标签为行级块标签 |
none | 隐藏标签(标签将在页面消失) |