CSS学习总结（一）
1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS ： 表现 （美化网页）
1.2css的格式
1.在html内
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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.内部样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: #051c80;
}
style>
<link rel="stylesheet" href="CSS/style.css">
head>
<body>
<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.标签选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
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.类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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结构伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">p1p>
<p>p2p>
<p>p3p>
<p>p4p>
<p>p5p>
<ul>
<li>l1li>
<li>l2li>
<li>l3li>
<li>l4li>
ul>
body>
html>
2.4属性选择器
属性选择器是将class+id结合起来
格式: 标签[属性名=属性值]{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">1a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last">10a>
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;
}