- A+
所属分类：Web前端
W3C标准
-
结构化标准语言（HTML、XML）
-
表现标准语言（CSS）
-
行为标准语言（DOM、ECMAScript ）
HTML（结构）+ CSS（表现）+ JavaScript（交互）
什么是CSS
如何学习
-
CSS是什么
-
CSS怎么用（快速入门）
-
CSS选择器（重点 + 难点）
-
美化网页（文字、阴影、超链接、列表、渐变..）
-
盒子模型
-
浮动
-
定位
-
动画（特效效果）
一、CSS是什么
Cascading Style Sheet 层叠级联样式表 （美化网页）
二、发展史
CSS1.0
CSS2.0 [DIV(块)+CSS：提供了HTML和CSS结构分离的思想，使网页变得简单，有利于SEO]
CSS2.1 [浮动、定位]
CSS3.0 [圆角、阴影、动画..]
三、快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个css程序</title>
<!--
规范：style标签可以编写css代码，每一个声明用分号隔开
选择器 {
声明1;
声明2;
声明3;
}
-->
<!-- <style> -->
<!-- h1 { -->
<!-- color: red; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>
建议使用HTML和CSS分离的规范
CSS的优势： 1、内容和表现分离 2、网页结构表现统一，可以实现复用 3、样式丰富 4、利于SEO
四、CSS的四种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!-- 内部样式 -->
<style>
h1 {
color: green;
}
</style>
<!-- 外部样式（链接式：属于html） -->
<link rel="stylesheet" href="css/style.css">
<!-- 外部样式（导入式：属于css） -->
<!-- <style> -->
<!-- @import "css/style.css"; -->
<!-- </style> -->
</head>
<body>
<!-- 样式优先级：就近原则 -->
<!-- 1.行内样式 -->
<h1>标题</h1>
</body>
</html>
选择器
作用：选择页面上的某一个或者某一类元素
一、基本选择器
-
标签选择器：选择一类标签，格式：标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
/*标签选择器会选择页面上所有这个标签的元素*/
h1 {
color: #f7ff75;
background: red;
border-radius: 8px;
}
p {
font-size: 60px;
}
</style>
</head>
<body>
<h1>YLF</h1>
<h1>BQ</h1>
<p>羊羊羊</p>
</body>
</html> -
类选择器：选择类名一致的所有标签，格式：.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
/*类选择器可以复用*/
.class1 {
color: #f7ff75;
}
.class2 {
color: #f7f;
}
</style>
</head>
<body>
<h1 class="class1">标题1</h1>
<h1 class="class2">标题2</h1>
<h1 class="class1">标题3</h1>
<p class="class1">段落</p>
</body>
</html> -
id选择器：选择id名唯一对应的标签，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
/*
id选择器全局唯一
优先级：id选择器 > 类选择器 > 标签选择器
*/
#title1 {
color: #f7ff75;
}
.class1 {
color: #ff77ff;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1 id="title1" class="class1">标题1</h1>
<h1 class="class1">标题2</h1>
<h1 class="class1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
二、层次选择器
-
后代选择器
/*后代选择器*/
body h1 {
color: green;
} -
子选择器
/*子选择器*/
body>h1 {
color: red;
} -
相邻兄弟选择器
/*相邻兄弟选择器 向下相邻且同层同标签*/
.class1 + h1 {
color: aqua;
} -
通用兄弟选择器
/*通用兄弟选择器 向下同层同标签*/
.class1 ~ h1 {
color: blue;
}
三、结构伪类选择器
限制条件的选择器
/*选择ul的第一个子元素*/
ul li:first-child {
color: #ff77ff;
}
/*选择ul的最后一个子元素*/
ul li:last-child {
color: #f7ff75;
}
a:hover {
background: blue;
}
四、属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.class1 a {
display: block;
float: left;
color: gray;
background: #0654dc;
height: 50px;
width: 50px;
margin-right: 5px;
border-radius: 6px;
text-align: center;
text-decoration: none;
font: bold 20px/50px Arial;
}
/*选择有id属性的元素*/
/*a[id] {*/
/* background: #ff77ff;*/
/*}*/
/*选择id为id1的元素*/
/*a[id=id1] {*/
/* background: #c50f61;*/
/*}*/
/*
选择class中包含links的元素
=绝对等于
*=包含等于
*/
/*a[class*="links"] {*/
/* background: #ff33d3;*/
/*}*/
/*
选择href以https开头的元素
^=
*/
/*a[href^=https] {*/
/* background: #ff77ff;*/
/*}*/
/*
选择href以pdf结尾的元素
$=
*/
a[href$=pdf] {
background: #ff77ff;
}
</style>
</head>
<body>
<p class="class1">
<a href="https:www.baidu.com" class="links item first" id="id1">1</a>
<a href="" class="links item active" target="_blank" title="title2">2</a>
<a href="image/123.html" class="links item" id="id3">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>