目录
一. css概述
二. css基本语法
1. 样式表
1.1 行内样式表
1.2 内嵌样式表
1.3 外部样式表
三. 选择器
1.标签选择器
2. 类选择器
3. id选择器
4. 通配选择器
5. 后代选择器
6. 选择器的优先级
三. 文本
四. 背景
五. 列表
六. 伪类
七. 透明
八. 标签的分类
1. 块级标签
1.1 div标签
2. 行级标签
2.1 span标签
3. 行块级标签
九. Display
一. 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 | 隐藏标签(标签将在页面消失) |