CSS
1.3快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范，<style> 这里面可以编写CSS的代码</style>-->
<!-- 语法：-->
<!-- 选择器{-->
<!-- 声明1:-->
<!-- 声明2:-->
<!-- 声明3:-->
<!-- }-->
<link rel="stylesheet" href="style.css ">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2JsJeHF-1649406602502)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220401093937859.png)]
CSS 的优势
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于HTML的CSS文件
5.利用SEO，容易被搜索引擎收录
1.4 CSS的四种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式表-->
<style>
h1 {
color: green;
}
</style>
<--!外部样式 -->
<link rel="stylesheet " href="CSS/style.css">
</head>
<body>
<!-- 优先级 就近原则-->
<!--优先级 ：行内样式>内部样式>外部样式-->
<!--行内样式：在标签元素中编写一个style属性，编写样式即可-->
<h1>我是标题</h1>
</body>
</html>
拓展：外部样式两种写法
1.链接
html标签
2.导入式
@import是CSS2.1特有的
<style>
@import url("css/style.css");
</style>
2.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器：选择一类标签 选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- 标签选择器，会选择到页面上所有的这个标签元素-->
h1{
color: #00FF00;
}
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,可以复用
*/
.qingjiang{
color: #448fb9;
}
.kuangsheng{
color: #c6dfb5;
}
</style>
</head>
<body>
<h1 class="qingjiang">标题1</h1>
<h1 class="kuangsheng">标题2</h1>
<h1 class="kuangsheng">标题3</h1>
<p class="qingjiang">P标签</p>
</body>
</html>
3.id选择器 全局唯一！#id名（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>/*
id选择器 ： id 必须保证全局唯一；
#id名称{}
不遵循就近原则，固定的id选择器>class选择器>标签选择器
*/
#qinjiang{
color: #FF00FF;
}
.style1{
color: #448fb9;
}
h1{
color: #cfd0dd;
}
</style>
</head>
<body>
<h1 id="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
<h1>标题7</h1>
</body>
</html>
优先级
id>class>标签
2.2层次选择器
1.后代选择（在某个元素的后面）
/* 后代选择*/
body p{
background: #ff00c8;
}
2.子选择器，只有一代，儿子
/*子选择器*/
body>p{
background: #cfd0dd;
}
3.相邻兄弟选择器 ,同辈
4.通用选择器
/*通用兄弟选择器，当前选择元素的向下的所有兄弟元素*/
.active~p{
background: #fefe02;
}
2.3结构伪类选择器
伪类：条件
/*选中ul第一个子元素*/
ul li:first-child{
background: beige;
}
/*选中ul最后一个子元素*/
/*li与:之间不能有空格*/
ul li:last-child{
background: #fe0267;
}
/*选中p1:定位到父元素，选择当前的第一个元素*/
/*选中当前P元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效*/
p:nth-child(2){
background: #fefe02;
}
/*选中父元素下，P的元素的第二个，类型*/
p:nth-of-type(1){
background: #FF00FF;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5oxiz20r-1649406602504)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220406170053036.png)]
2.4属性选择器（常用）
id+class结合
<!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: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 10px;
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（正则）*/
/*存在id属性的元素*/
/*a[id]{*/
/* background: #fefe02;*/
/*}*/
/*id=first的元素*/
/*a[id=first]{*/
/* background: #fefe02;*/
/*}*/
/*class 中含有links的元素
=是绝对等于
*=是通配，包含*/
/*a[class*="links"]{*/
/* background: #fefe02;*/
/*}*/
/*选中href中一http开头的元素
^=以这个开头
$=这个结尾
*/
/*a[href^=http]{*/
/* background: #fefe02;*/
/*}*/
a[href$=pdf]{
background: #fefe02;
}
</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 active">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">6</a>
<a href="/a.pdf">7</a>
<a href="/abc.pdf">8</a>
<a href="/abc.doc">9</a>
<a href="/abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yS3ZJAQy-1649406602505)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220406172919670.png)]
=是绝对等于
*=是通配等于
^=是以什么开头
$=是以什么结尾
3.美化网页
3.1为什么要美化网页
1.有效传递页面信息
2.美化网页，页面漂亮，才能吸引用户
3.凸显页面的主题
4.提高用户体验
span标签：重点突出的字，使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 20px;
}
</style>
</head>
<body>
欢迎学习<Span id="title1">java</Span>
</body>
</html>
<!-- font-family:字体
font-size:字体大小
font-weight: 字体粗细, font-weight: lighter;更细
color：字体颜色
-->
<style>
body{
font-family: 楷体,"Arial B" ;
color: #9a1717;
}
h1{
font-size: 50px;
text-align: center;
}
.p1{
font-weight: lighter;
font-size: 2em;
}
3.3文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text-align: 居中 center;文本靠右 right ,靠左left
3.首行缩进 text-indent: 2em;
4.行高 line-height: 300px;
5.装饰 text-decoration:
6.文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 颜色：单词 RGB-->
<!-- color: rgba(0,255,255,0.2) 最后的a是增加透明度0-1-->
<!-- 文本排版 text-align: 居中 center;文本靠右 right ,靠左left-->
<!--段落首航缩进text-indent: 2em;-->
<!-- text-decoration: underline 下划线，line-through 中划线，overline 上划线;-->
<!-- 行高，和块的高度一致就可以上下居中-->
<style>
h1{
color: rgba(0,255,255,0.9);
text-align: left;
}
.p1{
text-indent: 2em;
}
.p3{
background: #0000FF;
height: 300px;
line-height: 300px;
}
.L1{
text-decoration: underline;
}
.L2{
text-decoration: line-through;
}
.L3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="img">sdh </a>
<p class="L1">12345</p>
<p class="L2">123457</p>
<p class="L3">123456</p>
<h1>大象和蚂蚁的故事</h1>
<p class="p1">
森林里的运动会开始了。
大象很快战胜了挑战的对手，成了全场的摔跤能手。他得意洋洋地等待新来的选手，可等了半天，也没有人来应战。
童话故事大全400字，大象和蚂蚁的故事
突然，一个微弱的声音从大象脚底响起来了，大象低头一看，哈哈大笑起来:“哈哈哈哈，一只小蚂蚁，你敢和我大象摔跤?我看你是不想活了。”
小蚂蚁说:“咱比试比试?”
大象摆出一副不可一世的架势:“小蚂蚁，这样吧，我站在这里一动不动，只要你能把我弄倒，今天的冠军就是你的了。”
“说话要负责任的!”小蚂蚁说。
“当然。”大象得意地说。
听说小蚂蚁要和大象比赛，动物们都一窝蜂地拥过来观看。
裁判员一声令下，一大一小动物的比拼开始了。
小蚂蚁朝大象硬撞过去，不但未伤大象一根毫毛，自己却被弹出了十米远。吃一堑，长一智，小蚂蚁想:对付这样的庞然大物，看来，只能想办法了。过了一会儿，小蚂蚁计上心来。他爬到了大象的腋窝处，用触角、手和脚去挠大象的痒痒，大象不由得哈哈大笑起来。擂台下的观众感到奇怪，以为大象中了什么邪。几分钟过去了，大象实在忍不住，一下子躺在地上打起滚来。
裁判员轻轻捧起小蚂蚁，说:“本届冠军，为小蚂蚁，大家为它欢呼吧。”
观众们齐声喝彩。
比赛结束后，大象惭愧地说:“蚂蚁小弟，我真是服了你了。你那么爱动脑筋，而我骄傲自大，今天输给你，我口服心服。”
“大象哥哥，我只是投机取巧，抓住了你的弱点而已，你依然是摔跤场上的老大。”小蚂蚁不好意思地说。
“哪里，哪里。”大象连连说。
真是不摔不相识，这摔跤场上的一大一小竟然成了好朋友!
</p>
<p class="p3">Love alters not with his brief hours and weeks 沧桑轮回，爱却长生不改，
But bears it out even to the edge of doom 爱恒久坚定，直到末日的尽头
If this be error and upon me proved 假如有人能证明我说的不实，
I never writ, nor no man ever loved. 那就算我从未写诗，世人也从未爱过。</p>
<!-- 水平对齐，要有参照物，a，b-->
<br/>
<p>
<img src="img/a.png">sd sadasd
</p>
</body>
</html>
3.4阴影样式
#price{
text-shadow: #3c9de7 10px 1px 10px;
}
3.5超链接伪类
正常情况下 a , hover
a{
text-decoration:none;
color: #000000;
}
/*鼠标悬浮的颜色*/
a:hover{
color: red;
/*可以让激活的标签字体变成20px*/
font-size: 20px;
}
/*鼠标按住未释放的状态*/
a:active{
color: #00FF00;
}
a:visited{
color: rebeccapurple;
}
3.6列表
/list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
;/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">44</h2>
<ul>
<li><a href="#">11</a> <a href="#">22</a> <a href="#">33</a> </li>
</ul>
</div>
</body>
</html>
style.css
#nav{
width: 300px;
}
.title{
font-size: 20px;
font-weight: bold;
tab-index: 1em;
line-height: 30px;
background: red;
text-align: center;
}
/* ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
;*/
ul{
background: #cfd0dd;
}
ul li{
height: 30px;
list-style: none;
}
a{
color: #000000;
text-decoration: none;
font-size: 14px;
}
a:hover{
background:orange ;
/* 下划线 */
text-decoration: underline;
}
bsp; 33
```style.css
#nav{
width: 300px;
}
.title{
font-size: 20px;
font-weight: bold;
tab-index: 1em;
line-height: 30px;
background: red;
text-align: center;
}
/* ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
;*/
ul{
background: #cfd0dd;
}
ul li{
height: 30px;
list-style: none;
}
a{
color: #000000;
text-decoration: none;
font-size: 14px;
}
a:hover{
background:orange ;
/* 下划线 */
text-decoration: underline;
}
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
