CSS基本学习
CSS
- Cascading Style Sheet 层叠级联样式表
发展史
- CSS1.0
- CSS2.0 DIV(块)+CSS，HTML与CSS机构分离思想，SEO
- CSS2.1 浮动、定位的出现
- CSS3.0 圆角、阴影、动画效果
补充：SEO
- SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
CSS的四种导入方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: chartreuse; } </style> <link rel="stylesheet" href="../css/h1_style.css"> <style> @import url("../css/h1_style.css"); </style></head><body> <h1 style="color: aliceblue">测试css</h1></body></html>h1_style.css
/*语法：选择器{ 申明1; 申明2; 申明3;}*/h1{ color: blue;}
- 样式使用优先级：就近原则
link导入方式与import方式
import方式是css2.0的产物，import导入的时候，他会等待html页面加载完才开始渲染，这一点与link方式甩
CSS优势
- 内容和表现分离
- 网页结构表现统一，可以复用
- 样式丰富
- 李荣SEO，容易被搜素引擎收录
选择器
- 作用：选择页面上某一个或者一类元素
基本选择器
- 标签选择器：选择一类标签
标签名{}- 类 选择器 ：选择所有class属性一致的标签，可以跨标签
.类名{}- id选择器 ：全局只有一个id
#id名称{}
- 优先级：id选择器>类选择器>标签选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: chartreuse; } </style> <style> .hh{ color: aqua; } </style> <style> #hhh{ color: blue; } </style></head><body> <h1>标签选择器</h1> <h2 class="hh">类选择器</h2> <h3 id="hhh">id选择器</h3></body></html>层次选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器 某个元素 下一级，下下级... 所有选择元素*/ body p{ color: darkred; } /*子选择器 某个元素 某个元素 下一级所有的元素*/ body>p{ background: blue; } /*相邻兄弟选择器 当前选中元素的同级 向下 一个兄弟元素*/ .active + p{ background: chartreuse; } /*通用兄弟选择器，当前选中元素的同级 向下 所有兄弟元素*/ .active~p{ background: red; } </style></head><body> <p>1</p> <p class="active">2</p> <p>3</p> <ul> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> <p>7</p></body></html>结构伪类选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*ul 的第一个*/ ul li:first-child{ background: chartreuse; }/*ul 的最后一个*/ ul li:last-child{ background: blue; } /* 选择当前元素的父级元素 ，选中父级元素下的第一个元素，并且当前元素是该元素才生效 是按照顺序 */ p:nth-child(1){ background: darkred; } /* 选中 当前元素的父级元素 选中父级元素下的第三个元素，并且当前元素是该元素才生效 是按照类型*/ p:nth-of-type(3){ background: black; } </style></head><body><!-- 不是p元素不生效--> <p>p1</p> <p>p2</p> <a>a</a> <p>p3</p> <ul> <li>p4</li> <li>p5</li> <li>p6</li> </ul></body></html>属性选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .test a{ height: 50px; width: 50px; background: blueviolet;/*背景元素*/ display: block;/*块级元素*/ float: left;/*浮动 加了块级元素之后，竖着排列，但是加了浮动又在一列了*/ margin-right: 5px;/*外边距 块之间的距离*/ font: bold 20px/50px Arial;/*(bold 加粗字体) (20px 设置字体大小) (50px 设置行高,如果字体行高与框高一致，呈现居中效果) (Arial 字体样式)*/ text-align: center;/*文字居中*/ color: azure;/*文字颜色*/ text-decoration: none;/*去除文字下划线*/ /*border-radius : 上下左右 四个值*/ border-radius: 25px;/*25px设置为圆形 10px 就是圆角*/ } /* 存在id属性的a标签元素 */ a[id]{ background: azure; } /* id=u2 的a标签素 */ a[id=u2]{ background:yellow; } /* class 中有t1 s1的a标签元素*/ a[class*="t1 s1"]{ background:darkred ; } /* class 中 只有 t1 s1 的a标签元素*/ a[class="t1 s1"]{ background: aqua; } /* href中以http开头的 a标签元素*/ a[href^=http]{ background: aliceblue; } /* href中以png结尾的 a标签元素*/ a[href$=png]{ background: aliceblue; } </style></head><body> <p class="test"> <a href="http://www.baidu.com" class="t1 s1 c1" id="u1">1</a> <a href="http://www.baidu.com" class="t1 s1" id="u2">1</a> <a href="" class="t1 v1">2</a> <a href="images/123.jpg" class="t2 v2">3</a> <a href="images/123.jpg" class="t2 v2">4</a> <a href="images/123.png" class="t2 v2">5</a> <a href="images/123.jpg" class="t2 v2">6</a> </p></body></html>美化网页作用
- 有效传递页面信息
- 吸引用户
- 凸显主题
- 提高用户体验
行内元素,重点突出的 用span套起来
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a>标签</a><a>标签</a><span>突出</span><span>突出</span><a>标签</a><a>标签</a></body></html>样式
字体样式
<style> a{ /*复合写法*/ font: bold 20px/50px Arial;/*(bold 加粗字体) (20px 设置字体大小) (50px 设置行高,如果字体行高与框高一致，呈现居中效果) (Arial 字体样式)*/ /*分开写法*/ font-family: 新宋体;/*字体*/ font-size: 50px;/*字体大小*/ font-weight: bold;/*字体粗细*/ color: aqua;/*字体颜色*/ } </style>文本样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* color: 1.单词形式 red 2.RGB #0~F 3.RGBA rgba(0,0,1,0.5) A是透明度的意思 */ h1{ color: rgba(1,0,0,0.2); } /* text-indent： 表示首行缩进 em ： 缩进的文字长度 */ .p1{ text-indent: 2em; } .p2{ text-decoration: underline;/*下划线*/ text-decoration: line-through;/*中划线*/ text-decoration: overline;/*上划线*/ text-decoration: none;/*去划线*/ } /* 水平对齐 img是参照物,span是像img对齐 */ img,span{ vertical-align: middle; } </style></head><body> <h1>颜色</h1> <p class="p1">20px是字体大小；50px是行高，相当于line-height 。 SimSun,'microsoft yahei',Verdana,Arial;是四种字体的名字20px是字体大小；50px是行高，相当于line-height 。 SimSun,'microsoft yahei',Verdana,Arial;是四种字体的名字20px是字体大小；50px是行高，相当于line-height 。 SimSun,'microsoft yahei',Verdana,Arial;是四种字体的名字 </p> <p class="p2">123</p> <p class="p3"> <img src="" alt="无" height="100px"> <span>123</span> </p> "123</p></body></html>
文本阴影、超链接伪类
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <style> /*鼠标悬停的状态*/ a:hover{ color: aqua; } /*鼠标按住的状态*/ a:active{ color: darkred; font-size: 100px; } /*text-shadow (阴影颜色 水平位移 垂直位移 阴影半径)*/ #state{ text-shadow: yellow 10px -10px 2px; } </style><body> <a id="state"> 状态</a></body></html>列表样式、背景图片以及渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*渐变效果*/ body{ background: linear-gradient(19deg,#21D4FD 0%,#B7D3A7 100%); } /*list-style none：去掉原点 circle 空心圆 decimal 数字 square 正方形 */ ul li{ list-style: circle; background-image: ; } div{ width: 100px; height: 50px; border: 1px solid red;/* 厚度 实线 红色*/ background-image: url("");/*设置背景图片*/ /*默认是平铺的*/ background-repeat: no-repeat;/*不平铺，原始大小*/ background-repeat: repeat-x;/*平铺，原始大小沿x轴平铺*/ background-repeat: repeat-y;/*平铺，原始大小沿y轴平铺*/ /*颜色 图片 图片位置 平铺方式*/ background: darkred url("") 10px 10px no-repeat; /*图片定位*/ background-position: 20px 30px ; } </style></head><body><div id="nav"> <h2>测试</h2></div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></body></html>盒子模型
- 盒子大小：margin+padding+border+内容宽度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <style> /*元素一般总有一个默认的外边距 margin,所以设计的时候可以初始化*/ body,div,a,span,h1{ margin: 0;/*外边距*/ padding: 0;/*内边距*/ } #app{ width: 300px; height: 300px; /*border 粗细 样式 颜色*/ /*solid：实线 dashed 虚线*/ border: 2px solid red; /*外边距设置为 0 auto 可以使页面居中*/ /*前提 是块元素 块元素有固定高度*/ margin: 0 auto; } </style><body> <div id="app"> <h1>盒子模型</h1> <div> <div> 用户名:<input type="text" name="name" value=""/> </div> <div> 密码:<input type="password" name="password"/> </div> </div> </div></body></html>盒子模型
box-shadow: 10px 10px 5px aqua;display和浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 2px solid red; } span{ margin: 2px; background: #21D4FD; /*block : 块元素 inline：行内元素 inline-block 是块元素，但是可以内联 */ display: inline-block; /*浮动效果*/ float: right; /*保持块级元素，但还是浮动效果both:两侧不允许浮动right:右侧不允许浮动left：左侧不允许浮动*/ clear: both; } </style></head><body><div> <span>span2</span> <span>span3</span> <span>span4</span> <span>span5</span></div></body></html>overflow及父级边框塌陷问题
- 浮动元素后面增加div：简单，但是不推荐
- 设置父元素高度:简单，治标不治本
- overflow 简单，下拉的一些场景避免使用
- 父类添加一个伪类：写法稍微复杂一点，但是没有副作用，推荐使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 2px solid red; /** 1. 增加父级元素高度 ，治标不治本 height: 1000px; */ /** 3. 在父级元素中增加一个 overflow: hidden; */ } span{ margin: 2px; background: #21D4FD; display: inline-block; float: right; } /** 2. 增加一个空的div标签，清楚浮动 */ .clear{ clear: both; margin: 0; padding: 0; } /** 4. 父级添加一个伪类 */ #father:after{ content: ''; display: block; clear: both; } </style></head><body><div id="father"> <span>span2</span> <span>span3</span> <span>span4</span> <span>span5</span><!-- 2. --></div></body></html>定位
相对定位
position: relative:相对原来的位置进行指定的偏移，它任然处于标准文档流中，原来的位置会被保留
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .t{ background: darkgrey; height:200px; border: 2px solid darkred ; margin: 10px; } .t1{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; } .t2{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; } .t3{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; /*relative 相对定位*/ position: relative; top: 120px; } </style></head><body><div class="t"><div class="t1">定位</div><div class="t2">定位</div><div class="t3">定位</div></div></body></html>绝对定位
position: absolute:相对父级或浏览器的位置进行指定的偏移，它不再处于标准文档流中，原来的位置不会被保留
- 没有 父级元素没有被position 修饰(父级元素没有被定位)，此时子级使用绝对定位是相对于浏览器的，反之亦然，但都处于父级元素范围内活动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .t{ background: darkgrey; height:200px; border: 2px solid darkred ; margin: 10px; } .t1{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; } .t2{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; } .t3{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; /*absolute 绝对定位*/ position: absolute; top: 120px; } </style></head><body><div class="t"> <div class="t1">定位</div> <div class="t2">定位</div> <div class="t3">定位</div></div></body></html>固定定位
*
position: fixed页面有滚动条的情况下，元素的位置不会随着滚动而改变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .t{ background: darkgrey; height:2000px; border: 2px solid darkred ; margin: 10px; position: relative; } .t1{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; } .t2{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; } .t3{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; /*fixed 固定定位*/ position: fixed; top: 0px; } </style></head><body><div class="t"> <div class="t1">定位</div> <div class="t2">定位</div> <div class="t3">定位</div></div></body></html>z-index 及 透明度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .t{ background: darkgrey; height:2000px; border: 2px solid darkred ; margin: 10px; position: relative; } .t2{ background: red; height:20px; border: 2px dashed darkred ; margin: 10px; position: relative; /*设置图层的高度 ,并且要设置相对定位*/ z-index: 999; } .t3{ background: blue; height:20px; border: 2px dashed darkred ; margin: 10px; position: relative; top: -30px; /*设置透明度*/ opacity: 0.5; filter: alpha(opacity=50); } </style></head><body><div class="t"> <div class="t2">定位</div> <div class="t3"></div></div></body></html>CSS动画
渐变背景
=============================================================================
CSS 推荐狂神说