1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS : 表现 (美化网页)
1.2css的格式
1.在html内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
直接在html界面写css语言
在style中可以写css代码,每一个声明,最好使用;结尾
格式:
<style>
选择器{
声明1;
声明2;
.....
}
</style>
-->
<style>
h1{
color: #f02a52;
}
</style>
</head>
<body>
<h1>
我是h1标签
</h1>
</body>
</html>
2.将css与html分开写
建议使用这种写法
css的优势:
1.内容与表现分离
2.网页结构统一,可以重复使用。
3.样式十分丰富
4.建议使用独立于html的css文件
5.可以使用SEO,便于搜索引擎搜索
3.将css导入方式
1.内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: #051c80;
}
</style>
<!--链接式-->
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<!--采取就近原则,h1所表现的颜色是行内颜色-->
<!-- 行内样式:在标签中写style-->
<h1 style="color: orange">
我是h1标签
</h1>
</body>
</html>
2外部样式
1.链接式
<!--链接式-->
<link rel="stylesheet" href="CSS/style.css">
2.导入式
<style>
@import "CSS/style.css";
</style>
2.选择器
作用:选择页面上的某一个或者某一类元素
2.1基本选则器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--
标签选择器会选择这个页面上所有的标签。
例如:h1标签会选择下列所有的h1标签
-->
h1{
color: #f02a52;
background: orange;
border-radius: 10px;
}
p{
font-size: 40px;
}
</style>
</head>
<body>
<h1>哈哈</h1>
<h1>哈哈</h1>
<h1>哈哈</h1>
<h1>哈哈</h1>
<p>p标签</p>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
类选择器 class:选择所有class一致的标签 可以跨标签使用
格式: .class名称{}
-->
<style>
.bq1{
color: #7359e2;
background-color: #788036;
border-radius: 10px;
}
.bq2{
color: #80001c;
background-color: #788036;
border-radius: 10px;
}
.bq3{
color: #ff2121;
background-color: #788036;
border-radius: 10px;
}
.p1{
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="bq1">哈哈</h1>
<h1 class="bq2">哈哈</h1>
<h1 class="bq3">哈哈</h1>
<h1 class="bq1">哈哈</h1>
<p class="p1">p标签</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
id选择器 id:全局唯一性
格式: #id名称{}
优点:全局唯一
-->
<style>
#id1{
color: #b5f873;
background-color: #788036;
border-radius: 10px;
}
.bq2{
color: #80001c;
background-color: #788036;
border-radius: 10px;
}
.bq3{
color: #ff2121;
background-color: #788036;
border-radius: 10px;
}
.p1{
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="bq1" id="id1">哈哈</h1>
<h1 class="bq2">哈哈</h1>
<h1 class="bq3">哈哈</h1>
<h1 class="bq1">哈哈</h1>
<p class="p1">p标签</p>
</body>
</html>
基本选择器优先级:
不遵循就近原则:优先级是固定的
id选择器>class选择器>标签选择器
2.2层次选择器
1.后代选择器 儿子 孙子…
body p{
color: #f02a52;
background: #7359e2;
}
2子代选择器 儿子
body >p{
color: #f02a52;
background: #7359e2;
}
3.相邻兄弟选择器 此标签的下一个 同辈
.p1+p{
color: #ff2121;
background: aliceblue;
}
4.通用选择器 此标签以下的所有同辈的
.p1~p{
color: #ff2121;
background: aliceblue;
}
2.3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
选中父级元素,定位到父级元素中的第一个
*/
p:nth-child(1){
color: #b5f873;
}
p:nth-of-type(3){
color: #ff2121;
}
/*
ul-li 下的第一个元素
*/
ul li:first-child{
color: #788036;
}
/*
ul-li下的最后一个元素
*/
ul li:last-child{
color: aliceblue;
}
</style>
</head>
<body>
<p class="p1">p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
</body>
</html>
2.4属性选择器
属性选择器是将class+id结合起来
格式: 标签[属性名=属性值]{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
text-decoration: none;
height: 50px;
width: 50px;
border-radius: 10px;
margin-right: 5px;
text-align: center;
background: antiquewhite;
font: bold 20px/50px Arial;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
- =绝对等于
/*
属性id=first
*/
a[id=first]{
background: #b5f873;
}
2.*= 包含这个元素的
a[class*="links"]{
background: #ff2121;
}
3.^=以这个开头的
a[href^="http"]{
background: #ff2121;
}
4.$=以这个结尾的
a[href$="pdf"]{
background: #ff2121;
}
来源:CSDN
作者:小小马同学
链接:https://blog.csdn.net/weixin_42093672/article/details/104441460