CSS
什么是CSS
- Cascading Style Sheet 层叠级联样式表
- CSS：表现(美化网页)
- 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
发展史
- CSS1.0
- CSS2.0：DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
- CSS2.1：浮动，定位
- CSS3.0：圆角，阴影，动画……浏览器兼容性
基本入门
- style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范，<style>可以编写CSS的代码，每一个声明，最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- 分离，link获取(建议使用这种)
h1{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- CSS的优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于html和css文件
- 利于SEO，容易被搜索引擎收录！
CSS的三种导入方式
- 内部样式
- 外部样式
- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: red;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 优先级：就近原则 -->
<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: #1F87CC">我是标题</h1>
</body>
</html>
/*
外部样式
*/
h1{
color: yellow;
}
-
拓展：外部样式两种写法
- 链接式
HTML
<!-- 外部样式 --> <link rel="stylesheet" href="css.css">- 导入式
@import是CSS2.1特有！
<!-- 导入式 --> <style> @import "css.css"; </style>
选择器
- 作用：选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器：选择一类标签 标签{}
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: #a13d30;
}
- 类选择器class：选择所有class属性一致的标签，跨标签 .类名{}
/*类选择器的格式，.class的名称{} 好处，可以多个标签归类，是同一个class */ .a1{ color: #3cbda6; } .b2{ color: #0D7114; }
- id选择器：全局唯一！ #id名{}
/* id选择器：id必须保证全局唯一！ #id名称{} */ #1{ color: pink; } /*选择器优先级 不遵循就近原则，固定的 id选择器>类选择器>标签选择器 */
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1 id="1">标题1</h1><h1 class="a1">标题2</h1><h1 class="b2">标题3</h1><p class="b2">标签</p></body></html>
- 优先级：id>class>标签
层次选择器
- 后代选择器：在某个元素的后面(祖爷爷-爷爷-父亲-儿子)，以空格表示
/*后代选择器*/body p{ background: pink;}
- 子选择器：一代(儿子)，以>表示
/*子选择器*/body>p{ background: blue;}
- 相邻兄弟选择器：只有一个，相邻向下(同辈)，以+表示
/*相邻兄弟选择器*/.active+p{ background: yellow;}
- 通用兄弟选择器：当前选中元素的向下所有兄弟(同辈)，以~表示
/*通用兄弟选择器*/.active~p{ background:red;}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><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><p class="active">p7</p><p>p8</p></ul></body></html>
结构伪类选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 避免使用class，id选择器 --> <style type="text/css"> /*ul的第一个子元素*/ ul li:first-child{ background: rebeccapurple; } /*ul的最后一个子元素*/ ul li:last-child{ background: green; } /* 选择当前p元素的父元素,选择父级元素的第一个，并且是当前元素才生效*/ p:nth-child(1){ background: saddlebrown; } /* 选择当前p元素的父元素,选择父级元素的第二个当前元素*/ p:nth-of-type(2){ background: aqua; } </style></head><body><p>p1</p><p>p2</p><p>p3</p><ul> <li>li1</li> <li>li2</li> <li>li3</li></ul></body></html>
属性选择器
<!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: #1F87CC; text-align: center; color: gainsboro; text-decoration: none; margin-right: 5px; font:bold 20px/50px Arial; } /*属性名，属性名=属性值(正则) = 绝对等于 *=包含这个元素 ^=以这个开头 $=以这个结尾*/ /*存在id属性的元素a[]{}*/ a[id]{ background: yellow; } /*id=first的元素*/ a[id=first]{ background: green; } /*class中有links的元素*/ a[class*='links']{ background: red; } /*选中href中以http开头的元素*/ a[href^=http]{ background: blue; } a[href$=doc]{ background: red; } </style></head><body><p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="http://www.360.com" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item " >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" class="links item " >6</a> <a href="/a.pdf" class="links item " >7</a> <a href="/abc.pdf" class="links item " >8</a> <a href="abc.doc" class="links item " >9</a> <a href="abcd.doc" class="links item last" >10</a></p></body></html>
并集、交集选择器
- 并集选择器
多个选择器通过逗号连接而成，同时声明多个风格相同样式
- 交集选择器
由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*并集选择器*/ p,h1,.ss,#dd{ color: red; font-family: 宋体; } /* 交集选择器*/ p.testp{ color: yellow; } div#dd{ color: #1F87CC; } </style></head><body><h1>cdvjsjv kbs</h1><p>sssssss<span class="ss">asssssssssss</span>asd</p><h1>kasjfsdjhkj</h1><div id="dd">ccc</div><br><h1>sckadvsu</h1><span class="ss">ssssss</span><p class="testp"> saasdvs</p><div class="testp"> <h1>czcz zx</h1></div><p class="testa">safafa</p></body></html>
美化页面元素
-
为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面的主题
- 提高用户的体验
-
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style > #title{ font-size: 50px; } </style></head><body> <span id="title">Java</span></body></html>
字体样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family:字体 font-size:字体大小 font-weight:字体粗细 color: 字体颜色 font:字体风格 --> <style > body{ font-family: 宋体; color: #1F87CC; } h1{ font-size: 50px; } .p1{ font-weight: bold; } p{ font:oblique bolder 12px "黑体"; } </style></head><body><h1>斗罗大陆 </h1><p class="p1">《斗罗大陆》是唐家三少创作的穿越玄幻小说，2008年12月14日-2009年12月13日首发于起点中文网，2009年5月首次出版。</p><p>《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂，由人修炼为神，最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为斗罗大陆最强者的故事 [1] 。主要角色有唐三、小舞、戴沐白等。</p></body></html>
文本样式
- 颜色：color rgb rgba
- 文本对齐的方式：text-align=center
- 首行缩进：text-indent:2em;
- 行高：line-hright
- 装饰：text-decoration
- 文本图片水平对齐：vertical-align:middle
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 颜色： 单词 RGB 0~F RGBA text-align: 排版，居中 text-indent:段落首行缩进 height: 300px; line-height: 300px; 行高，和块高度一致，就可以上下居中 --> <style > h1{ color: rgba(0,255,255,0.9); text-align: center; } .p1{ text-indent: 2em; } .p2{ background: pink; height: 300px; line-height: 300px; } /*下划线*/ .l1{ text-decoration: underline; } /*中划线*/ .l2{ text-decoration: line-through; } /*上划线*/ .l3{ text-decoration: overline; } /*超链接去下划线*/ a{ text-decoration: none; } /*水平对齐*/ img,span{ vertical-align: middle; } </style></head><body><p> <img src="img/a.png" alt=""> <span>asfdvsvdvsd</span></p><a href="">123</a><p class="l1">123</p><p class="l2">123</p><p class="l3">123</p><h1>斗罗大陆 </h1><p class="p1">《斗罗大陆》是唐家三少创作的穿越玄幻小说，2008年12月14日-2009年12月13日首发于起点中文网，2009年5月首次出版。</p><p class="p2">《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂，由人修炼为神，最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为斗罗大陆最强者的故事 [1] 。主要角色有唐三、小舞、戴沐白等。</p></body></html>
文本阴影
/*text-shadow:阴影的颜色，水平偏移，垂直偏移，阴影半径 */ #price{ text-shadow:yellow 10px 10px 10px ; }
超链接伪类
正常情况下，a,a:hover
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*默认的状态*/ a:link{ color: red; text-decoration: none; } /*鼠标悬浮的状态*/ a:hover{ color: orangered; } /*鼠标按住未释放的状态*/ a:active{ color: green; } /* 点击过之后的状态*/ a:visited{ color: pink; } </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>
列表样式
#nav{ width: 300px; background: red;}.title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; background: pink;}/*ui li*//*list-style none:去掉原点 circle：空心圆 decimal:数字 square:正方形 */ul li{ height: 30px; list-style: none; text-indent:1em;}a{ text-decoration: none; font-size: 14px; color: saddlebrown;}a:hover{ color: orange; text-decoration: underline;}
背景图像
- 背景颜色
- 背景图片
div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/a.jpg");}/*默认是全部平铺的repeat*/.div1{ background-repeat: repeat-x;}.div2{ background-repeat: repeat-y;}.div3{ background-repeat: no-repeat;}/*颜色，图片，图片位置，平铺方式*/.title{ background: red url("imgs/d.gif") 270px 10px no-repeat;}ul li{ height 30px; list-style: none; text-indent: 1em; background-image: url("imgs/r.gif") background-repeat: no-repeat background-position: 230px 2px}
渐变
/*径向渐变，圆形渐变*/ body{ background-color: #4158D0; background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 36%, #FFCC70 66%, #ffffff 100%); }
盒子模型
- 什么是盒子模型
盒子模型由margin(外边距)、padding(内边距)、border(边框)组成
- 盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
/*body总有一个默认的外边距，可以设置margin：0，常见操作*/ /*要求：块元素，块元素有固定的宽度*/ h1,ul,li,a,body{ margin: 0; padding: 0; text-decoration: none; } /* border：粗细，样式，颜色*/ #box{ width: 300px; border: 1px solid red; } div:nth-of-type(1) input{ border: 3px dashed pink; }
内外边距
/*外边距的妙用：居中元素*/ #box{ margin: 0 auto; } /* 顺时针旋转 表示全部的(margin:0) 表示上下 左右(margin:0 0) 表示上 下 左右(margin:0 0 0) 表示上 下 左 右( margin:0 0 0 0) 内边距也同样 */ /* left:左 right:右 top:上 bottom:下 */ div{ margin: 1px 2px 3px 4px; padding: 4px 3px 2px 1px; } ol{ margin-right: 4px; margin-bottom: 5px; padding-left: 5px; padding-top: 6px; }
圆角边框
/* 左上 右上 右下 左下，顺时针方向 */ /* 圆圈： 圆角=半径！ */ div{ width: 100px; height: 100px; background: pink; border-radius: 50px; } /*半圆：正半圆，高是宽的一半，两个上角调到和高一样*/ div{ width: 100px; height: 50px; border-radius: 50px 50px 0 0; }
盒子阴影
/* 盒子阴影：高度 宽度 阴影比例 颜色*/ div{ width:100px; height: 100px; border: 10px solid yellow; box-shadow: 10px 10px 5px pink; }
浮动
-
标准文档流
- 块级元素：独占一行
h1~h6 p div 列表……- 行内元素：不独占一行
span a img strong ……
display
/* display block：块元素 inline：行内元素 inline-block：是块元素，但是可以内联，在一行！ none：不显示 */ div{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; }
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
float
- 左右浮动float
/* float right：右浮动 left：左浮动 */ img{ border: 1px red dashed; display: inline-block; float: right; } .l2{ border: 1px pink dashed; display: inline-block; float: left; clear: both; }
父级边框塌陷的问题
- clear
/*clear:right右侧不允许有浮动元素clear:left左侧不允许有浮动元素clear:both两侧不允许有浮动元素clear:none没有浮动*/
-
解决方案：
- 增加父级元素的高度
#father{ border: 1px #1F87CC solid; height: 820px; }- 增加一个空的div标签，清除标签
<div class="clear"></div>.clear{ clear: both; margin: 0; padding: 0; }- overflow
在父级元素中增加一个 overflow：hidden- 父类添加一个伪类
#father:after{ content: ''; display: block; clear: both; } -
小结：
- 浮动元素后面增加空的div
简单，代码中尽量避免空div
- 设置父级元素的高度
简单，元素假设有了固定的高度，就会被限制
- overflow
简单，下拉的一些场景避免使用
- 父类添加一个伪类：after(推荐)
写法稍微复杂一些，但是没有副作用，推荐使用！
-
display和float对比
- display：方向不可以控制
- float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
定位
相对定位
- position:relative
相当于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相对定位</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ background-color: pink; border: 1px dashed blue; position: relative;/*相对定位：上下左右*/ top:-20px; left: 20px; } #second{ background-color: pink; border: 1px dashed blue; } #third{ background-color: pink; border: 1px dashed blue; position: relative; bottom: -10px; right: 20px; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
绝对定位
- absolute
基于xxx定位，上下左右
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
- 相对于父级元素或浏览器的位置进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0px; position: relative; } #d1{ border: 1px dashed #1F87CC; background-color: aqua; } #d2{ border: 1px dashed #1F87CC; background-color: aqua; position: absolute; left: -10px; } #d3{ border: 1px dashed #1F87CC; background-color: aqua; } </style></head><body><div id="father"> <div id="d1">第一个盒子</div> <div id="d2">第二个盒子</div> <div id="d3">第三个盒子</div></div></body></html>
固定定位
- fixed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){/*绝对定位：相当于浏览器*/ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){/*fixed：固定定位*/ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style></head><body><div>div1</div><div>div2</div></body></html>
z-index
- z-index：层级，默认是0，最高无限~999
- opacity：0.5背景透明度
#contend{ width: 380px; padding: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid #000;}ul li{ padding: 0; margin: 0; list-style: none;}/*父级元素相对定位*/#contend ul{ position: relative;}.i1,.i2{ position: absolute; width: 380px; height: 25px; top: 216px;}.t1{ color: white; z-index: 999;/*层级*/}.t2{ background: #000; opacity: 0.5;/*背景透明度*/ filter: Alpha(opacity=50);}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
