HTML
超文本标记语言
属性:可以通过属性来设置标签,可以在开始标签中添加属性,一个标签可以设置多个属性,之间用 空格隔开
声明网页的版本:<!DOCTYPE html> 不写可能导致网页无法显示
标签
1.注释标签:<!-- -->
2.标题标签:<h1></h1>-<h6></h6>
从大到小
3.段落标签:<p></p>
4.换行标签:<br/>
5.水平线标签:<hr/>
6.图片标签:<img/>
-----图片标签中的属性:
- src:图片的路径
- alt:图片不能显示时的描述信息
- width:宽度
- height:高度
- …/返回上一级目录
7.超链接标签:<a></a>
-----超链接标签中的属性
- href:从一个页面跳转的另一个页面,如果没确定可以用"#"代替
- target:跳转的界面-_self:在当前窗口(默认) _blank:在新的窗口
8.版权标签:<p>© CopyRight By xxxx网 </p>
9.内联框架:<frame>
10.居中标签:<center></center>
CSS
Cascading Style Sheet 层叠样式表
是一组样式设置规则,用于控制页面的外观样式
1.为什么使用CSS
- 实现内容与样式的分离,便于团队开发
- 样式复用,便于网站的后期维护
- 页面的精确控制,让页面更精美
2.CSS语法
<html>
<head>
<meat charset = "utf-8">
<title></title>
</head>
<body>
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
</body>
</html>
将声明块中的样式应用到选择器的元素上面
也可以将样式表编写到外部css文件中,然后通过link标签将外部css文件导入到当前页面,使结构与表现分离,利用浏览器的缓存,加快用户访问的速度
<link rel = "stylesheet" type = "text/css" href = "xxx.css"/>
3.块元素与内联元素
3.1块元素
<div>我是块元素</div>
- 块元素独占一行,用来进行页面布局
<p>
、<h1-h6>
都是块元素
3.2内联元素
<span>我是内联元素</span>
- 内联元素只占自身大小
<a>
是内联元素
块元素可以包裹内联元素,但是内联元素不能包裹块元素<a>
元素可以包含任何元素,除了它自身
<p>
元素也不能包含它自身。
4.常用的选择器
元素选择器:选择页面中的指定元素
/*为页面中的p元素设置背景为黄色*/
<style>
p{
background-color:yellow;
}
</style>
id选择器:通过id属性选择唯一的元素(不可重复)
<style>
#id{
background-color:yellow;
}
</style>
类选择器:为元素设置class属性(可重复)
<style>
.p2{
background:yellow;
}
</style>
分组选择器:同时选中多个选择器对应的元素
<style>
元素1,元素2,元素n{
background:yellow;
}
</style>
通配选择器:选择页面中的所有元素
<style>
*{
background:yellow;
}
</style>
复合选择器:同时满足多个选择器 元素
<style>
span.p2{
background:yellow;
}
</style>
后代元素选择器:为父元素中的子元素设置属性
子元素选择器:为指定父元素的指定子元素设置属性
<style>
/*
为div中的span设置一个颜色
*/
#d1 span{
color: aquamarine;
}
/*
选中id为d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 100px;
}
/*
为div的子元素span设置一个背景元素
*/
div > span {
background-color: blue;
}
</style>
伪类选择器:通过不同状态来显示不同样式
<style>
/*
link表示没有访问时的颜色
*/
a:link{
color: blueviolet;
}
/*
visited:表示访问过的字体颜色,只能设置字体颜色,涉及到隐私
*/
a:visited{
color: red;
}
/*
hover:表示鼠标停留时的颜色
*/
a:hover{
color: chartreuse;
}
/*
active:表示鼠标点击时的颜色
*/
a:active{
background-color: brown;
}
/*
hover / active 也可以为其他元素设置
*/
/*
focus:文本框获取焦点以后,修改背景颜色
*/
input:focus{
background-color: darkgreen;
}
/*
selection:为p标签选中的内容使用样式
*/
p::selection{
background-color: blue;
}
/*
::first-letter:为p标签的第一个字符使用样式
*/
p::first-letter{
color: blueviolet;
}
/*
::first-line:为p标签的第一行使用样式
*/
p::first-line{
background-color: wheat;
}
/*
::before在元素内容的最前面添加内容,需要配合content属性使用
*/
p::before{
content: "我会出现在最前面";
color: blue;
}
/*
::after在元素内容的最后面添加内容,需要配合content属性使用
*/
p::after{
content: "我会出现在段落的最后面";
color: blue;
}
</style>