css学习
Posted 狂狼大白鲨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css学习相关的知识，希望对你有一定的参考价值。
CSS学习
1.如何学习
- css是什么
- css怎么用（快速入门）
- css选择器（重点+难点）
- 美化网页（文字、阴影、超链接、列表、渐变···）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
1.1 什么是css
Cascading Style Sheet 层叠级联样式表
css：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
1.2css发展史
css1.0
css2.0 DIV块 +css html与css结构分离的思想，使网页变得简单，SEO
css2.1 浮动 定位
css3.0 圆角，阴影、动画、、、浏览器兼容~
1.3 快速入门
style
基本入门
<!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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RADa9pMl-1629339416834)(C:\\Users\\17290\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210717200102268.png)]
css优势：
- 内容和表现分离
- 网页结构表现同一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于seo，容易被搜索引擎收录！
1.4 css的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式学习</title>
</head>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<link rel="stylesheet" href="/style.css">
<body>
<!--优先级：行内样式 > 内部样式 > 外部样式-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 >
我是标题
</h1>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uf8fmCKS-1629339416840)(C:\\Users\\17290\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210717213837037.png)]
2.选择器
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器
-
标签选择器：选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择界面上所有的这个标签的元素*/ h1{ color: red; background: #22dea2; border-radius: 13px; } p{ font-size: 20px; } </style> </head> <body> <h1>学java</h1> <h1>学python</h1> <p> 狂神说 </p> </body> </html> -
类选择器：选中所有class属性一致的标签，可以跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{} 好处：可以多个标签归类，是同一个class可以复用 */ .qinJiang{ color: #22dea2; } .KuangShen{ color: #e7d533; } </style> </head> <body> <h1 class="qinJiang">标题1</h1> <h1 class="KuangShen">标题2</h1> <h1 class="qinJiang">标题3</h1> <p class="qinJiang">p标签</p> </body> </html> -
ID选择器：全局唯一 #ID{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器：id必须保证全局唯一！ # id名称{} 不遵循就近原则，是固定的 id选择器>class选择器>标签选择器 */ #琴江{ color: #22dea2; } .style1{ color: red; } h1{ color: black; } </style> </head> <body> <h1 id="琴江">标题1</h1> <h1 class="style1">标题2</h1> <h1 class="style1">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>- 优先级： id选择器>class选择器>标签选择器
2.2层次选择器
-
后代选择器：在某个元素的后边
/* 后代选择器*/ body p{ background: green; } -
子选择器 （一代，儿子）
/* 子选择器*/ body>p{ background: red; } -
相邻选择器（兄弟选择器），相邻只相邻下方的一个
/* 相邻兄弟选择器 */ .active+p{ background: green; } </style> -
通用选择器（相邻下方的全部）
/* 通用选择器，当前选中元素的向下的所有兄弟*/ .active~p{ background: #e7d533; }
2.3结构伪类选择器
伪类：条件
<style> /*ul的第一个子元素*/ ul li:first-child{ background: green; } ul li:last-child{ background: red; } /*ul的最后一个个子元素*/ /*选中p1：定位到父元素，选择当前的第一个元素 选中当前p元素的父级元素，选择父级元素的第一个 */ p:nth-child(2){ background: aqua; } /* 选中父元素，下的p元素的第二个类型*/ p:nth-of-type(2){ background: yellow; } </style>
2.4属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTzUG20B-1629339416842)(C:\\Users\\17290\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210720092905532.png)]
= 为绝对等于*= 为包含等于^= 为开头等于$= 的结尾等于<style> a[href$=pdf]{ background: #e7d533; } </style>
3.美化网页元素
3.1为什么美化网页
-
有效的传递页面信息
-
美化网页，页面漂亮，吸引用户
-
凸显页面的主题
-
提高用户的体验
span标签：重点要突出的字，用span套起来
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #title{ font-size: 60px; } </style></head><body>欢迎学习：<span id="title">Java</span></body></html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkFGy60y-1629339416844)(C:\\Users\\17290\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210720094404732.png)]
3.2字体样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 字体的风格font :斜体 粗细 大小 字体--> <style> p{ font: oblique bolder 16px "楷体" ; } </style></head><body><p> 《魁拔》 是2008年北京青青树动漫科技有限公司以系列动画电影的第一部《魁拔之十万火急》为基础，重新剪辑而成的TV动画。由王川执导，田博、马华等编剧，刘婧荦，竹内顺子等配音。</p></body></html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ReapoiYL-1629339416845)(C:\\Users\\17290\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210720101035989.png)]
3.3文本样式
-
颜色
<!-- y\\颜色单词rgb：(#000000)0-fRGBA: A（0-1） -
文本对齐方式
text-align:排版 -
首行缩进
text-indent:段落首行缩进(2em)指的是缩进两个单位 -
行高
height: 300px; line-height:300px ;行高和块的高度一致就可以上下居中 -
下划线
/*上划线 中划线 下划线*/ .l1{ text-decoration: underline; } .l2{ text-decoration: line-through; } .l3{ text-decoration: overline ; }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7BNsfuB-1629339416847)(C:\\Users\\17290\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210720104759301.png)]
-
文本装饰
text–decoration=“none”：超链接去下划线
<!-- 水平对齐 参照物 a,b--> <style> img,span{ vertical-align: middle; } </style>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- y\\颜色单词rgb：0-fRGBA: A（0-1）text-align:排版text-indent:段落首行缩进 height: 300px; line-height:300px ;行高和块的高度一致就可以上下居中--> <style> h1{ color: red; text-align: center; } .p1{ text-indent: 2em; } .p3{ background: #0e77a0; height: 300px; line-height:300px ; } /*上划线 中划线 下划线*/ .l1{ text-decoration: underline; } .l2{ text-decoration: line-through; } .l3{ text-decoration: overline ; } </style></head><body><p class="l1">1122121</p><p class="l2">1122121</p><p class="l3">1122121</p><h1>故事介绍</h1><p class="p1"> 《魁拔》 是2008年北京青青树动漫科技有限公司以系列动画电影的第一部《魁拔之十万火急》为基础，重新剪辑而成的TV动画。由王川执导，田博、马华等编剧，刘婧荦，竹内顺子等配音。</p><p> TV版完整保留了电影的世界观、人物设定、故事内容和情节主线，但重制了片头曲。《魁拔妖侠传》是魁拔系列电影的前传，主要讲述的是有关卡拉肖克潘家族的故事，与电影关系并不大。目前大家所说的魁拔通常指魁拔系列动画电影</p><p class="p3"> It is the ninth year of Yonghe (A.C.353), also known as the year of Guichou in terms of the Chinese lunar calendar.On one of those late spring days, we gather at the Orchid Pavilion, which is located in Shanyin County, Kuaiji Prefecture, for dispelling bad luck and praying for good fortune.The attendees of the gathering are all virtuous intellectuals, varying from young to old. Endowed with great mountains and lofty peaks, Orchid Pavilion has flourishing branches and high bamboo bushes all around, together with a clear winding brook engirdled, which can thereby serve the guests by floating the wine glasses on top for their drinking. Seated by the bank of brook, people will still regale themselves right by poetizing their mixed feelings and emotions with wine and songs, never mind the absence of melody from string and wind instruments.</p></body></html>
3.4阴影
/* text-shadow: 阴影颜色、水平偏移、垂直偏移、阴影半径*/ #price{ text-shadow: #0e77a0 10px 10px 1px; }
3.5超链接伪类
正常情况下：a a:hover{
}
/*鼠标悬浮的颜色*/ a:hover{ color: orange;/*鼠标悬停后改变，链接文字的颜色*/ font-size: 30px; background-color：orange/*鼠标悬停后改变的是链接文字背景的颜色*/ } /*鼠标按住未释放*/ a:active{ color: green; } a:visited{ color: red; }
3.6列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表样式</title> <link rel="stylesheet" href="style.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> </ul></div></body></html>
#nav{ width: 250px; background: gray;;}h2{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 30px; background: red;}/*ul lilist-style: none 取掉标签前面的实心圆点list-style: circle 变成空心圆ist-style: decimal 变成有序数字*/ul{ background: gray;}ul li{ height: 30px; list-style: none; text-indent: 1em;}a{ text-decoration: none; font-size: 14px; color: black;}a:hover{ color: #baa01e; text-decoration: under以上是关于css学习的主要内容，如果未能解决你的问题，请参考以下文章