十、CSS初识
10.1、css基本介绍
-
css学习流程
- 先学习如何查找标签
- 在学习如何添加样式
-
定义：css（层叠样式表）就是给html标签添加样式的，让它变得更加好看
-
注释
/*单行注释*/ /* 多行注释1 多行注释2 多行注释3 */ """ 通常我们在写css样式的时候夜壶用注释来划分样式区域（因为html代码多，对应的css代码也多，而且杂） """ -
css的语法结构
选择器 { 属性1：值1; 属性2：值2; 属性3：值3; } -
css的三种引入机制
# 1 style标签内部直接书写 <style> h1 { color: red; } </style> # 2 link标签引入外部css文件（最正规的方式，解耦合） <link rel="stylesheet" href="mycss.css(css文件)"> # 3 行内式（一般不用） <h1 style="color: green;">老板好，我怀疑你在开车</h1>
10.2、css选择器
-
基本选择器
# 1.id选择器 #d1 { /*找到id是d1的标签 将文本的颜色变成红色*/ color:red; } # 2.类选择器 .c1 { /*找到class值里面的包含c1的标签 将文本颜色变成绿色*/ color:green; } # 3.元素(标签)选择器 span { /*找到html中所有的spa标签 将文本颜色变成黄色*/ color:yellow; } # 4.通用选择器 * { /* 将整个html的标签文本颜色变成蓝色*/ color:blue; } -
组合选择器
""" 在前端，我们将标签的嵌套用亲戚关系来表示层级 <div>div <p>div p</p> <p>div p <span>div p span</span> </p> <span>span</span> <span>span</span> </div> div里面的p span都是div的后代 p是div的儿子 p里面的span是p的儿子 是div的孙子 div是p的父亲 """ # 1.后代选择器 div span { /*将div标签里面所有的span标签的文本颜色变成红色*/ color: red; } # 2.儿子选择器 div>span { /*将div标签里面的第一层级的所有span标签的文本颜色变成绿色*/ color: green; } # 3.毗邻选择器 div+span { /*与div同级别紧挨着的下面的第一个(只取一个)span标签的文本颜色变成黄色*/ color: yellow; } # 4.弟弟选择器 div~span { /*与div同级别的下面的span标签的文本颜色变成蓝色*/ color: blue; } -
属性选择器
# 1.含有某个属性 [username] { /*将所有含有属性名是username的标签背景颜色变成红色*/ background-color: red; } # 2.含有某个属性并且某个值 [username="jason"] { /*找到所有属性名是username并且属性值是Jason的标签的背景颜色变成绿色*/ background-color: green; } # 3.含有某个属性并且某个值的某个标签 input[username="jason"] { /*找到所有属性名是username并且属性值是Jason的input标签的背景颜色变成蓝色*/ background-color: blue } -
分组与嵌套
""" 选择器之间用逗号隔开，逗号表示并列关系 """ # 标签嵌套 div,p,span { /*将html里同一级中所有的div、p、span标签的文本颜色变成黄色*/ color: yellow; } # 选择器嵌套 #d1,.c1,span { /*将html里同一级中所有的id值是d1，class值是c1的，和span标签的文本颜色变成红色*/ color: red; } -
伪类选择器
""" 鼠标对a标签的四种状态 未访问态：link a:link {} 鼠标悬浮态：hover a:hover {} 鼠标点击不松开，激活态：active a:active {} 访问后的状态：visted a:visted {} 其他 input框获取焦点(鼠标点了input框) input:focus {} 注意：其他标签也可以使用伪类选择器，只是a标签用的比较多，需要记住的就是悬浮态的使用(hover) """ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: black; } a:link { /*访问之前的状态*/ color: red; } a:hover { /*需要记住*/ color: aqua; /*鼠标悬浮态*/ } a:active { color: black; /*鼠标点击不松开的状态 激活态*/ } a:visited { color: darkgray; /*访问之后的状态*/ } p { color: darkgray; font-size: 48px; } p:hover { color: white; } input:focus { /*input框获取焦点(鼠标点了input框)*/ background-color: red; } </style> </head> <body> <a href="https://www.jd.com/">小轩在不在?</a> <p>点我有你好看哦</p> <input type="text"> </body> </html> -
伪元素选择器
-
对p标签的第一个字符修改
- p:first-letter {}
-
在p标签的前面加上abc
- p:before {content:’abc’}
-
在p标签的后面加上abc
- p:after {content:’abc’}
-
注意：before和after通常是用来清除浮动带来的影响：父级标签的塌陷问题
p:first-letter { font-size: 48px; color: orange; } p:before { /*在文本开头 同css添加内容*/ content: '你说的对'; color: blue; } p:after { content: '雨露均沾'; color: orange; } -
-
选择器优先级(id选择器、类选择器、标签选择器、行内式)
-
选择器相同：就近原则，谁离标签近就是用谁的样式（和变量的差不多）
-
选择器不同：精确度越高就越有效
- 行内>id选择器>类选择器>标签选择器
-
10.3、css属性操作
注意：①、只有块级标签有长宽，行内标签设置了长宽也不会生效
②、有相同的前缀的属性值可以写在一起，且不分先后
-
字体属性
""" 1.font-family:文字样式 2.font-size:字体大小 3.font-weight:字重 inherit：继承父标签样式 bolder:加粗 ligther:加细 4.color:文字颜色 color:red color:#eeeeee color:rbg(127,127,127) color:rgba(127,127,127,0.5) 第四个参数是透明度，范围0~1 """ p{ font-family ： '字体选择' font-size ： 24px '文字大小' font-weight ：inherit'继承父标签样式'或者 bolder'加粗'或者 lighter'变细' color：red color:#ee762e color：rgb（127，234，234） color：rgba（127，234，234，0.5） # 第四个参数是透明度0-1 } -
文字属性
""" 1.text-align:设置文本位置 center:居中 right:左对齐 left:右对齐 justify:两端对齐 2.text-decoration:文本装饰 none:默认，什么样式都没有 underline:下划线 overline:上划线 line-through:删除线 3.text-indent:2em 首行空两格 """ p{ text-align:center('居中')/right/left/justify('两端对齐') text-decoration:underline('下划线')/overline('上划线')/line-through('删除线')/none text-indent：2em #首行空两格 }注意:text-decoration常用来消除a标签自带的下划线
a { text-decoration:none; } -
背景属性
""" 1.background-color:背景色 2.background-img:url(''):背景图片 3.background-position:背景位置 background-position:100px 100px:第一个调借左右，第二个调节上下 4.background-repeat:背景平铺 repeat:默认，背景图片平铺整个网页 repeat-x:背景图片只在水平方向上平铺 repeat-y:背景图片只在竖直方向上平铺 no-repeat:背景图片不平铺 5.background-attachment:固定背景图片 background-attachment:fixed; """ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { 100%; height: 500px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html> -
边框属性
""" 1.边框属性（宽度、样式、颜色） bodeer-width boder-style boder-color 2.边框宽度 boder-width 3.边框样式 boder-style none:无边框 dotter:点状虚线框 dashed:矩形虚线框 soli:实线框 4.边框颜色 boder-color """ # 边框设置为圆形 div { height:200px; 200px; boder-raduis:50%; background-color:red; background-repeat:no-repeat; } # 圆形头像展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; background-color: antiquewhite; } .c1 { height: 100px; 100px; border-radius: 50%; border: 5px solid white; overflow: hidden; } img { max- 100%; } </style> </head> <body> <div class="c1"> <img src="111.png" alt=""> </div> </body> </html> -
display属性
""" display:none html文档元素存在，但是在浏览器中不显示。一般配合JavaScript代码使用 display:block 将行内标签设置成块级标签 display:inline 将块级标签设置成行内标签 display:inline-block 使元素同时具有块级和行内标签的特点 """ -
盒子模型
""" margin:用于空值元素与元素之间的距离；margin的最基本用途就是用来控制元素周围的空间间隔，从视觉角度上达到相互隔离的状态 border:围绕在内边距和内容外的边框 padding:用于控制内容与边框的距离 content:盒子里的内容，显示文本和图像 顺序(margin padding)： 10px：上下左右 10px 20px：上下10px 左右20px 10px 20px 30px：上10px 左右20px 下30px 10px 20px 30px 40px：上10px 右20px 下30px 左40px """ -
float浮动
-
浮动的方法
float:left # 向左浮动 float:right # 向右浮动 float:none # 默认值，不浮动 -
clear清除浮动
clear：left # 在左侧不允许存在浮动元素 clear:right # 在右侧不允许存在浮动元素 clear:both # 在左右两侧不允许存在浮动元素 clear:none # 默认值，允许浮动元素出现在左右两侧 clear:inherit # 规定应该从父级元素继承clear属性的值 -
清除浮动
""" 清除浮动的副作用（父级标签塌陷问题） 解决方法 固定高度 伪元素清除法(使用较多) overflow:hidder """ .clearfix:after { content:""; display:block; clear:both; }
-
-
overflow溢出属性
""" overflow:visible # 默认值，内容不会被修剪，溢出的元素会显示在元素框外边 overflow:hidden # 内容会被修剪，并且其余内容是不可见的 overflow:scroll # 内容会被修剪，当时浏览器会显示滚动条一遍查看溢出内容 overflow:auto # 如果内容被修剪，则浏览器会显示滚动条以便查看溢出内容 overflow:inherit # 规定应该从父级元素标签overflow属性的值 """ .c1 { height: 100px; 100px; border: 1px solid black; overflow: auto; } -
定位
""" static：静态的，不能改变元素位置，标签默认是静态的，不能移动位置 relative：相对定位，不会脱离文档流。 absolute：绝对定位，脱离文档流，相对于定位过的父级标签做偏移 fixed：固定定位，脱离文档流，相对于浏览器窗口在某个位置固定下来 """ position:relative position:absolute position:fixed -
z-index模态框
-
z-index值表示谁压着谁，数值大的盖住数值小的
-
只有定位了的元素，才有z-index，也就是说，不管是相对定位、绝对定位、固定定位，都可以使用z-index，而浮动元素不能使用z-index
-
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素
-
从父现象：父亲怂了，儿子再他妈牛逼也没用
#d1 { z-index: 999; } #d2 { z-index: 1000; } 结果：优先展示d2的
-
-
透明度
用来定义透明效果。取值范围是0~1,0是完全透明，1是完全不透明
.c1 { background-color:rgb(127,127,127); opactity:0.5; }
10.4、博客园搭建
-
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客园</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div class="blog-left"> <div class="blog-arnvar"> <img src="邓紫棋.png" alt=""> </div> <div class="blog-name"> <div>老司机的博客园</div> </div> <div class="blog-info"> <div>车速太快，什么都没有留下！</div> </div> <div class="blog-link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="blog-tag"> <ul> <li><a href="">#Python</a></li> <li><a href="">#Java</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2020-8-16</span> </div> <div class="article-content">重金求子，事成之后500万答谢并赠送一套大别墅</div> <hr> <div class="article-botton"> <span>#Pythonn</span> <span>#JavaScript</span> </div> </div> </div> </body> </html> -
css配饰样式
/*这是博客园的增叠样式表*/ /*通用设置*/ body { margin: 0; background-color: #eeeeee; } a { text-decoration: none; } ul { list-style-type: none; padding: 0; } /*左侧设置*/ .blog-left { background-color: #4e4e4e; 20%; height: 100%; position: fixed; float: left; } .blog-arnvar { 200px; height: 200px; border: 5px solid white; border-radius: 50%; margin: 20px auto; overflow: hidden; } img { max- 100%; } .blog-name { font-size: 20px; color: darkgray; text-align: center; } .blog-info { font-size: 18px; color: darkgray; text-align: center; padding-top: 20px; } .blog-link,.blog-tag { text-align: center; margin-top: 70px; } .blog-link a,.blog-tag a { font-size: 24px; color: darkgray; } .blog-link a:hover,.blog-tag a:hover { color: white; } /*右侧设置*/ .blog-right { float: right; 80%; height: 1000px; } .article { margin: 20px 40px 10px 10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); background-color: white; } .article-title { padding-left: 20px; padding-top: 10px; border-left: 8px solid red; } .title { font-size: 32px; } .date { font-size: 18px; font-weight: bolder; float: right; padding-top: 5px; padding-right: 10px; } .article-content { text-indent: 2em; padding-top: 20px; padding-bottom: 20px; } .article-botton { text-indent: 2em; }
css3选择器：https://www.cnblogs.com/skylar/p/css3-selector.html#s1
渐变：https://www.cnblogs.com/tianma3798/p/6084608.html
动画高级：https://www.cnblogs.com/qianduanjingying/p/4937574.html