1、什么是CSS
如何学习
1.CSS是什么
2.CSS怎么用(快速入门)
3.CSS选择器(重点+难点)
4.美化网页(文字，阴影，超链接，列表，渐变…)
5.盒子模型
6.浮动
7.定位
8.网页动画(特效效果)
1.1、什么是CSS
Cascading Style Sheet层叠样式表
CSS:表现(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页浮动…
1.2、发展史
CSS1.0
CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0圆角，阴影，动画…浏览器兼容性~
1.3、快速入门
基础入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写css代码
每一个声明最好用分号结尾
语法：
选择器{
声明1；
声明2；
...
}-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范
css优势：
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录！
1.4、CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<!-- style="color: red"-->
<h1>我是标题</h1>
</body>
</html>
扩展：外部样式两种写法
-
链接式(推荐)
html
-
导入式
@import是CSS 2.1特有的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入式-->
<style>
@import "css/style.css";
</style>
</head>
<body>
<h1>我爱java</h1>
</body>
</html>
2、选择器
作用：选择页面上的某一个或者某一类元素
2.1、基本选择器
1.标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择页面上所有的这个标签的元素*/
h1{
color: red;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>听狂神说</p>
</body>
</html>
2.类选择器 class: 选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处，可以多个标签归类，是同一个class，可以复用
*/
.qinjiang{
color: #d9adde;
}
.kuangshen{
color: #76807b;
}
</style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qinjiang">标题3</h1>
<p class="kuangshen">p标签</p>
</body>
</html>
3.id选择器: 全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器:id必须保证全局唯一
#id名称{
}
*/
#qinjiang{
color: #d2de26;
}
.style1{
color: #696a80;
}
h1{
color: antiquewhite;
}
</style>
</head>
<body>
<h1 id="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
</body>
</html>
不遵循就近原则，固定的
id选择器>class选择器>标签选择器
2.2、层次选择器
1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body P{
background: red;
}
2、子选择器，一代，儿子
body>p{
background: #d2de26;
}
3、相邻兄弟选择器 同辈
/*相临兄弟选择器 ：只有一个，相邻的下一个*/
.active + p{
background: blue;
}
4、通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: lightgray;
}
2.3、结构伪类选择器
伪类：条件
/*<!--ul的第一个子元素-->*/
ul li:first-child{
background: #d9adde;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}
/*选中p1：定位到父类元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且得是p元素才生效 顺序！
p:nth-child(1){
background: aquamarine;
}
/*选中父元素，下的p元素的第二个， 按类型*/
p:nth-of-type(2){
background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--ul的第一个子元素-->*/
ul li:first-child{
background: #d9adde;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}
/*选中p1：定位到父类元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且得是p元素才生效 顺序！*/
p:nth-child(1){
background: aquamarine;
}
/*选中父元素，下的p元素的第二个， 按类型*/
p:nth-of-type(2){
background: yellow;
}
/*a:hover{*/
/*background: blue;*/
/*}*/
</style>
</head>
<body>
<!--<a href="">123</a>-->
<!--<h1>h1</h1>-->
<P>p1</P>
<P>p2</P>
<P>p3</P>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4、属性选择器(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: gainsboro;
/*去下划线*/
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名，属性名 = 属性值(正则)
= 绝对等于
*=包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[id]{*/
/*background: yellow;*/
/*}*/
/*id=first的的元素*/
/*a[id=first]{*/
/*background: green ;*/
/*}*/
/*class 中有links的元素*/
/*a[class*="links"]{*/
/*background: yellow;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{*/
/*background: aqua;*/
/*}*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
<a href="" 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">10</a>
</p>
</body>
</html>
= 等于
*= 包含这个元素
^=以什么开头
$= 以什么结尾
3、美化网页元素
3.1、为什么要美化网页
1、有效的传递页面的信息
2、美化页面，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户体验
span标签：重点要突出的字，使用soan套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">java</span>
</body>
</html>
3.2、字体样式
<!--
font-family:字体
font-size:字体大小
font-weight:字体的粗细
color:字体颜色
-->
<style>
body{
font-family: 隶书;
color: #d9adde;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
扫一扫
1549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
