入门1"/>
CSS学习入门1
文章目录
- CSS学习笔记
- 思维导图：
- 1、什么是CSS
- 1.1、什么是CSS
- 1.2、发展史
- 1.3、快速入门
- 1.4、CSS的3种导入方式
- 2、选择器
- 2.1、基本选择器
- 2.2、层次选择器
- 2.3、结构伪类选择器
- 2.4、属性选择器（常用）
- 3、美化网页元素
- 3.1、为什么要美化网页
- 3.2、字体样式
- 3.3、文本样式
- 3.4、超链接伪类
- 3.5、阴影
- 3.6、列表ul li
- 3.7、背景
- 3.8、渐变
- 4、盒子模型
- 3.8、渐变
- 4、盒子模型
CSS学习笔记
思维导图：
HTML + CSS + JavaScript结构 + 表现 + 动作
1、什么是CSS
如何学习
CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效效果）
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;声明3;}--><style>h1{color: crimson;}</style></head>
<body><h1>CSS测试</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><!--内部样式--><style>h1{color: green;}</style><!--外部样式--><link rel="stylesheet" href="css/style.css" />
</head>
<body><!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">这是标签</h1>
</body>
</html>拓展：外部样式两种方法
-
链接式
html
<!--外部样式--><link rel="stylesheet" href="css/style.css" />
-
导入式
@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: orange;background: blue;border-radius: 10px;}</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>
2、类 选择器class：选择所有class一致的标签，跨标签，格式：.类名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 类选择器的格式 .class的名称{}好处：可以多个标签归类，是同一个class，可以复用*/.demo1{color: blue;}.demo2{color: red;}.demo3{color: aqua;}</style>
</head>
<body>
<h1 class = "demo1">类选择器：demo1</h1>
<h1 class = "demo2">类选择器：demo2</h1>
<h1 class = "demo3">类选择器：demo3</h1>
</body>
</html>
3、id 选择器：全局唯一，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* id选择器：id必须保证全局唯一#id名称{}不遵循就近原则，优先级是固定的id选择器 > 类选择器 > 标签选择器*/#demo1{color: aqua;}.demo2{color: red;}#demo2{color: orange;}h1{color: blue;}</style>
</head>
<body><h1 id="demo1">id选择器：demo1</h1>
<h1 class="demo2" id = "demo2">id选择器：demo2</h1>
<h1 class="demo2">id选择器：demo3</h1>
<h1>id选择器：demo4</h1>
<h1>id选择器：demo5</h1>
</body>
</html>
优先级：id > class > 标签
2.2、层次选择器
1.后代选择器：在某个元素的后面
/*后代选择器*/
<style>
body p{background:red;
}
</style>
2.子选择器，子一代
/*子选择器*/
<style>
body>p{background:orange;
}
</style>
3.相邻的兄弟选择器 同辈
/*相邻兄弟选择器：只有一个，相邻（向下）*/
<style>
.active+p{
background: red
}
</style><body><p class="active">p1<p><p>p2</p>
</body>
4.通用选择器
<style>
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/.active~p{background:red;
}
</style>
<body><p class="active">p1<p><p>p2</p>
</body>
源码：html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p{background: green;}*//*后代选择器*//*body p{background: red;}*//*子选择器*//*body>p{background: #3cbda6;}*//*相邻兄弟选择器，只有一个，相邻（向下）*//*.active + p{background: #a13d30;}*//*通用兄弟选择器，当前选中元素的向下所有兄弟元素*/.active~p{background: blueviolet;}</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p>p7</p>
<p>p8</p>
</body>
</html>
2.3、结构伪类选择器
伪类
<style>/*ul的第一个子元素*/ul li:first-child{background: aqua;}/*ul的最后一个子元素*/ul li:last-child{background: blue;}/*选中p1：定位到父元素，选择当前的第一个元素选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/p:nth-child(1){background: orange;}/*选中父元素下的，第2个p元素*/p:nth-of-type(2){background: red;}/* nth-of-type(2n)\nth-of-type(2n+1)表示单数和偶数个*/</style>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--避免使用，class，id选择器--><style>/*ul的第一个子元素*/ul li:first-child{background: #a13d30;}/*ul的最后一个子元素*/ul li:last-child{background: red;}/*选中p1：定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个子元素为p的按顺序*/p:nth-child(2){background: blue;}/*选中父元素下的p元素的第二个，按类型*/p:nth-of-type(1){background: yellow;}a:hover{background: black;}</style>
</head>
<body><!--<h1>h1</h1>--><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul><a href="">链接标签</a>
</body>
</html>
2.4、属性选择器（常用）
id + class结合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a{display: block;height: 50px;width: 50px;float:left;border-radius: 10px;background: blue;text-align: center;color: beige;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*属性名，属性名=属性值（正则）=表示绝对等于*=表示包含^=表示以...开头$=表示以...结尾存在id属性的元素 a[]{}*//* a[id]{background: red;}*//*id=first的元素*//* a[id=first]{background: aqua;}*//*class中有links元素*//* a[class = "links item2 first2"]{background: orange;}*//*a[class*="links"]{background: black ;}*//*选中href中以http开头的元素*/a[href^="http"]{background: orange;}</style></head>
<body>
<p class="demo"><a href="" class="links item first" id="first">1</a><a href="/adad/faf" class="links item2 first2" >2</a><a href="qwe123" class="links item3 first3" >3</a><a href="eweqe" class="links item4 first4" >4</a><a href="rrrrr" class="links item5 first5" >5</a><a href="ttt" class="links item6 first6" >6</a><a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
3、美化网页元素
3.1、为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮才能吸引客户
- 凸显页面的主题
- 提高用户的体验
span标签：重点要突出的字，使用span标签套起来
<!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>
font-family：字体系列
font-size：字体大小
font-weight：字体粗细
<style>body{font-family:楷体;color：red;}h1{font-size： 50px;
}.p1{font-weight：blod;}
</style>
3.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family：字体font-size：字体大小font-weight：字体的粗细color：字体颜色--><style>body{font-family:"Arial Black" ,楷体;color: #a13d30;}h1{font-size: 50px;}.p1{font-weight: lighter;}</style>
</head>
<body><h1>故事介绍</h1><p class="p1">按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
</p>
<p>按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p><p>Hooray! It's snowing! It's time to make a snowman.James runs out.
</p></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--字体风格--><style>p{font: oblique bolder 12px "楷体";}</style>
</head>
<body><p>按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p></body>
</html>
font-weight:bolder;/*也可以填px，但不能超过900,相当于bloder*/
/*常用写法：*/
font:oblique bloder 12px "楷体"
3.3、文本样式
颜色 –> color, rgb，rgba
文本对齐方式 –> text-align：center
首行缩进 –> text-indent：2em
行高 –> line-height：300px；单行文字上下居中！line-height = height
下划线 –> text-decoration
文本图片水平对齐：vertical-align: middle;
text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/
图片、文字水平对齐
img,span{vetical-align:middle}/*垂直对齐 middle中间*/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--颜色：单词：#FFFFFFRGB：0~F ,rgb(0,255,255)RGBA：A（透明度）：0~1,rgba(0,255,255,0.9)text-indent：段落首行缩进line-height: 300px;行高 和 块的高度一致，就可以上下居中--><style>h1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent: 2em;}.p3{background: blueviolet;height: 300px;line-height: 50px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/* a标签去除下划线 */a1{text-decoration: none;}/* 水平对齐~ 参照物， a，b */img,span{vertical-align: middle;}</style>
</head>
<body><a href="">a标签去除下划线</a><p class="l1">123321</p>
<p class="l2">123321</p>
<p class="l3">123321</p><h1>故事介绍</h1><p class="p1">按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
</p>
<p>按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p><p class="p3">Hooray! It's snowing! It's time to make a snowman.James runs out.
</p><p><img src="images/a.png" alt=""><span>abcdefghijklmnabcdefghijklmn</span>
</p></body>
</html>
3.4、超链接伪类
超链接伪类
/* 未访问的链接 */
a:link {color: #FF0000}
/* 已访问的链接,点击之后的状态*/
a:visited {color: #00FF00}
/* 鼠标移动到链接上,鼠标悬浮的状态*/
a:hover {color: #FF00FF}
/* 选定的链接,鼠标按住未释放的状态*/
a:active {color: #0000FF}
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 默认颜色 */a{text-decoration: none;color: #000000;}/* 鼠标悬浮的颜色 （只需要记住这个）*/a:hover{color: burlywood;font-size: 30px;}/* 鼠标按主未释放的状态 */a:active{color: #008800;}/* 未访问的链接 */a:link{color: maroon;}/* 已访问的链接 */a:visited{color: darkmagenta;}/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/#price{text-shadow: #008800 20px -10px 2px;}</style>
</head>
<body><a href="#"><img src="images/a.jpg" alt="">
</a>
<p><a href="#">码出高校：Java开发手册</a>
</p>
<p><a href="">作者：孤尽老师</a>
</p>
<p id="price">￥99
</p></body>
</html>
<style>
/*
默认：
鼠标悬浮的状态：hover
鼠标按住未释放的状态：active
点击之后的状态：visited
*/a{/*超链接有默认的颜色*/text-decoration:none;color:#000000;}a:hover{/*鼠标悬浮的状态*/color:orange;}a:active{/*鼠标按住未释放的状态*/color:green}a:visited{/*点击之后的状态*/color:red}
</style>
3.5、阴影
阴影：text-shadow
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{text-shadow: #008800 20px -10px 2px;
}
/* 第一个参数：表示水平偏移第二个参数：表示垂直偏移第三个参数：表示模糊半径第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色
3.6、列表ul li
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title><link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音响</a> <a href="#">数字商品</a></li><li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li><li><a href="#">电脑</a> <a href="#">办公</a></li><li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a> <a href="#">中标</a> <a href="#">珠宝</a></li><li><a href="#">食品饮料</a> <a href="#">保健食品</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li></ul></div>
</body>
</html>
#nav{width: 300px;background: darkgrey;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red;
}
/*ul li
list-style:none：去掉圆点circle：空心圆decimal：数字spuare：正方形
*/
ul{background: darkgrey;
}
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;
}
/*list-style{none:去掉原点circle：空心圆decimal：数字square：正方形
}*/
ul li{height:30px;list-style:none;text-indent:1em;
}
a{text-decoration:none;font-size:14px;color:#000;
}
a:hover{color:orange;text-decoration:underline/*下划线*/
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{width:300px;
}
3.7、背景
- 背景颜色：background
- 背景图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 1000px;height: 700px;border: 1px solid red;background-image: url("images/tx.jpg");/*默认是全部平铺的 repeat*/}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style>
</head>
<body><div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title><link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音响</a> <a href="#">数字商品</a></li><li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li><li><a href="#">电脑</a> <a href="#">办公</a></li><li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a> <a href="#">中标</a> <a href="#">珠宝</a></li><li><a href="#">食品饮料</a> <a href="#">保健食品</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li></ul></div>
</body>
</html>
CSS
#nav{width: 300px;background: darkgrey;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red url("../images/c.jpg") 270px 10px no-repeat;
}
/*ul li
list-style:none：去掉圆点circle：空心圆decimal：数字spuare：正方形
*/
/*ul{background: darkgrey;
}*/
ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/b.jpg");background-repeat: no-repeat;background-position: 236px 2px;
}a{text-decoration: none;font-size: 14px;color: black;
}
a:hover{color: orange;text-decoration: underline;
}background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
综合使用
background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/
3.8、渐变
网址：
径向渐变、圆形渐变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--径向渐变，圆形--><style>body{background-color: #FFFFFF;background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);}</style>
</head>
<body></body>
</html>
4、盒子模型
round: darkgrey;
}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url(“…/images/b.jpg”);
background-repeat: no-repeat;
background-position: 236px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
[外链图片转存中...(img-A2Lr7xZN-1664355866525)]```css
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
综合使用
background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/
3.8、渐变
网址：
径向渐变、圆形渐变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--径向渐变，圆形--><style>body{background-color: #FFFFFF;background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);}</style>
</head>
<body></body>
</html>
4、盒子模型
更多推荐
CSS学习入门1
发布评论