CSS
1.初识CSS
1.1什么是CSS
层叠样式表(级联样式表):Cascading Style SheetSEO
CSS : 表现(美化图片)
字体,颜色,边距,高度,宽度,背景图片,网页浮动…
1.2CSS的发展史
CSS 1.0
CSS 2.0 DIV(块)+ CSS, HTML与CSS结构分离的思想,网页变得简单,SEO
CSS 2.1 浮动,定位
CSS 3.0 圆角,阴影,动画…浏览器兼容性
1.3快速入门
可在HTML页面直接编写CSS:
<style>
......
</style>
可产生一个link链接,单独一个页面编写CSS(更加规范):
<link rel="stylesheet" href="...(CSS页面地址)">
CSS的优势:
1.内容与结构分离
2.网页结构表现统一,可以实现复用
3.样式十分丰富
4.建议使用独立于HTML的CSS文件
5.利用SEO,容易被搜索引擎收录
2.选择器
作用:选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>学习Java</h1>
<p>CSS</p>
</body>
</html>
2.类选择器 class
class="…"
用“.”选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.标题{
color: blue;
}
.LOL{
color: red;
}
</style>
</head>
<body>
<h1 class="标题">学习Java</h1>
<p class="LOL">CSS</p>
</body>
</html>
3.id选择器
id="…"
用“#”选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#标题{
color: blue;
}
#LOL{
color: red;
}
</style>
</head>
<body>
<h1 id="标题">学习Java</h1>
<p id="LOL">CSS</p>
</body>
</html>
2.2层次选择器
1.后代选择器:
某个元素后面所有与您选中的元素类型相同的元素都会被选中
body p{
color: red;
}
body后面所有p标签元素都会被选中
2.子选择器
某个元素后面仅一代与您选中的元素类型相同的元素都会被选中
body>p{
color: red;
}
跟在body后面一代的p标签会被选中。
假如body内有个列表,列表内又设置了p标签,那么这里的p标签将不会被选中。(这就是仅一代的含义)
3.弟弟选择器
某元素下一位您所选择类型的元素,且是同代的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#LOL+p{
color: red;
}
</style>
</head>
<body>
<h1 id="标题">学习Java</h1>
<p id="LOL">CSS</p>
<p id="OL">CSS</p>
</body>
</html>
会选中id为“OL”的p标签,且是同代的。
4.通用选择器
选中某元素后面“您所选择类型的同代的所有”元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#LOL~p{
color: red;
}
</style>
</head>
<body>
<h1 id="标题">学习Java</h1>
<p id="LOL">CSS</p>
<p id="OL">CSS</p>
<p class="OL">CSS</p>
<p class="OL">CSS</p>
</body>
</html>
会选中id为“LOL”后面所有同一代的p标签元素。
2.3属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 200px;
width: 200px;
border-radius: 10px;
background: black;
text-align: center;
color: blue;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*a[id=wangwei]{*/
/* background: aqua;*/
/*}*/
/*a[class*="links"]{*/
/* background: rebeccapurple;*/
/*}*/
/*a[href^=http]{*/
/* background: red;*/
/*}*/
a[href$=uk]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.manchester.ac.uk" class="links item first" target="_blank" id="wangwei">曼彻斯特大学</a>
<a href="https://www.bilibili.com/" class="links" target="_blank" title="tests">哔哩哔哩动画</a>
<a href="https://www.bilibili.com/read/cv5702420" class="item" target="_blank">完整Java学习路线</a>
<a href="https://www.bilibili.com/video/BV1YJ411a7dy?p=8" class="first" target="_blank">CSS教学</a>
<a href="https://hao.360.com/" class="links item" target="_blank">360浏览器</a>
<a href="https://space.bilibili.com/95256449" class="links item first" target="_blank">狂神说</a>
<a href="nothing" class="links item" target="_blank">HTML5教学</a>
</p>
<p><a href="https://www.eic.org.cn/school/detail/311" class="links item first" target="_blank" id="xuanjie">MD</a></p>
</body>
</html>css
1.选中所有带有“[]”内属性的元素:
a[id]{
background: yellow;
}
(选中了所有带有id属性的元素)
2.选中属性等于“[]”内标明的内容的元素:
a[id=wangwei]{
background: aqua;
}
(选中了id=wangwei
的元素)
3.选中所有class属性包含"links"的元素
a[class*="links"]{
background: rebeccapurple;
}
(“*=”表示“包含”,而“=”表示“等于”)
4.选中所有以“http
”开头的“href
”属性的元素
a[href^=http]{
background: red;
}
5.选中所有以“uk
”结尾的“href
”属性的元素
a[href$=uk]{
background: red;
}
3.美化网页元素
3.1字体美化
3.1.1 span标签:
<span id="wangwei">简</span>
用id为“wangwei”
的span标记“简”。
3.1.2 字体:
(1)字体种类:
font-family: 楷体;
(2)字体颜色:
color: red;
(3)字体大小:
font-size: 50px;
(4)字体粗细:
font-weight: bolder;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family: 楷体;
color: red;
}
h1{
font-size: 50px;
}
.xuanjie{
font-weight: bolder;
}
#wangwei{
color: aqua;
}
</style>
</head>
<body>
<h1>故事<span id="wangwei">简</span>介</h1>
<p class="xuanjie">
平静安详的元泱境界
</p>
<p>
在偏远的兽国窝窝乡
</p>
</body>
</html>
3.3文本样式
1.颜色:
color rgb rgba
2.文本对齐的方式:
文本居中:text-align = center
3.首行缩进:
缩进两个字:text-indent: 2em
4.行高:
此行有5个字这么高(行内字符不会上下居中):height: 5em
此行有5个字这么高(行内字符会上下居中):line-height: 5em
5.装饰:
text-decoration
6.文本图片水平对齐:
vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: rgba(0,255,255,1);
text-align: center;
}
p{
text-indent: 2em;
/*background: red;*/
/*height: 5em;*/
line-height: 5em;
text-decoration: overline red;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1>故事简介</h1>
<p><a href="">MMDD</a></p>
<p>
平静安详的元泱境界
</p>
<p>
在偏远的兽国窝窝乡
</p>
</body>
</html>
3.4超链接伪类
1.a:hover{}
a:hover{
color: red;
font-size: 2em;
}
鼠标悬停时字体将做出改变
2.a:active
a:active{
color: green;
}
鼠标按住时字体将做出改变
3.阴影
.asd{
text-shadow: red 10px 10px 3px;
}
字体会有阴影效果:颜色,向上,下偏移,清晰度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
}
a:hover{
color: red;
font-size: 2em;
}
a:active{
color: green;
}
.asd{
text-shadow: red 10px 10px 3px;
}
</style>
</head>
<body>
<a href="">
<img src="../tupian/digeng.png" alt="">
</a>
<p>
<a href="">大卫·科波菲尔</a>
</p>
<p>
<a href="">作者:许安杰的引路人</a>
</p>
<p class="asd">
售价:99元
</p>
</body>
3.5列表
1.div划分模块
<div>...</div>
CSS代码:
#nav{
width: 14em;
background: darkgray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="xuexi.css">
</head>
<body>
<div id="nav">
<p class="title">全部商品分类</p>
<ul class="JS_navCtn cate_menu">
<li>
<a href="//shouji.jd.com/">手机</a>
<a href="//wt.jd.com">运营商</a>
<a href="//shuma.jd.com/">数码</a>
</li>
<li>
<a href="//diannao.jd.com/">电脑</a>
<a href="//bg.jd.com">办公</a>
</li>
<li>
<a href="//channel.jd.com/home.html">家居</a>
<a href="//channel.jd.com/furniture.html">家具</a>
<a href="//jzjc.jd.com/">家装</a>
<a href="//channel.jd.com/kitchenware.html">厨具</a>
</li>
<li>
<a href="//channel.jd.com/1315-1342.html">男装</a>
<a href="//channel.jd.com/1315-1343.html">女装</a>
<a href="//phat.jd.com/10-156.html">童装</a>
<a href="//channel.jd.com/1315-1345.html">内衣</a>
</li>
</ul>
</div>
</body>
</html>
3.7背景
(这星期时间有点匆忙,就只写到这里了。。。)