一、css介绍
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
二、css基础
1.语法
css 由两部分组成 :选择器和一条或多条声明。
声明是以键值对形式存在的也可以称为属性:值。
代码如下(示例):
h2 {
color: aqua;
}
body {
color:red;
}
2.css注释
CSS注释以 /* 开始, 以 */ 结束
代码如下(示例):
/*这是一个注释*/
p {
text-align:center;
}
3.css连接模式
css连接方式有三种
- 内联样式
- 内部样式表
- 外部样式表
1.内联样式
<h1 style="font-weight: 700;color: aqua;">css学习</h1>
2.内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color:blue
}
</style>
</head>
<body>
<h1 >css学习</h1>
</body>
</html>
3.外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/ht1.css">
</head>
<body>
<h1 >css学习</h1>
</body>
</html>
ht1.css
h1 {
color: red;
}
优先级:!important>内联样式>内部样式表>外部样式表
三、css用法
1.选择器
1.标签选择器(根据名称、id、类来选取元素)
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
类选择器
class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
2.组合选择器
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
选择
元素内的所有
元素:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: blue;
}
</style>
</head>
<body>
<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section>
</div>
<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>
</body>
</html>
子选择器
子选择器匹配属于指定元素子元素的所有元素。
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
<p>div 中的段落 4。</p>
</div>
<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>
</body>
</html>
并集选择器
div,p,a{
color:bule
}
并集选择器用,隔开
3.伪类选择器
- a:link 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
a:link {
color:#000000;
} /* 未访问链接*/
a:visited {
color:#00FF00;
} /* 已访问链接 */
a:hover {
color:#FF00FF;
} /* 鼠标移动到链接上 */
a:active {
color:#0000FF;
} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="https://www.baidu.com" target="_blank">这是一个链接</a></b></p>
</body>
</html>
- :first-child 第一个子元素
- :last-child 最后一个子元素
- nth-child(2n) 选中第n个元素
:first-of-type 父元素的第一个 元素:
:last-of-type父元素的最后一个 p 元素:
:nth-of-type()父元素的指定元素:
:focus 获取焦点的表单元素
只有鼠标点击时发生变换 鼠标移开就不会有了
input:focus {
background-color:red;
}
4.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./css/ht1.css"> -->
<style>
[title="by"] {
color: rgb(147, 18, 233);
font-weight: 700;
font-size: larger;
}
</style>
</head>
<body>
<p title="by">晨风流云</p>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./css/ht1.css"> -->
<style>
* {
text-align: center;
}
[title="by"] {
color: rgb(147, 18, 233);
font-weight: 700;
font-size: larger;
}
h1 {
color: red;
}
h2 {
color: aqua;
}
.year {
color: blue;
}
#name {
color: aqua;
}
</style>
</head>
<body>
<h1 >css学习</h1>
<p title="by">晨风流云</p>
<p class="year">zhifaihhfai</p>
<h1 id="name">前端</h1>
<p></p>
<a href="https://www.baidu.com">百度</a>
<div title="a">
afaf
</div>
</body>
</html>